Webサイト作成入門（akiinu）

# Web制作におけるレイアウト手法

## 使うもの
HTML/CSS/CSS3
CSSのリセット（ブラウザごとのデザインを初期化するため）
`<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">`

## 1カラムレイアウト

```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header">header</div>
  <div id="main">main</div>
  <div id="footer">footer</div>
</div>  
</body>
</html>
```

```lang:css
#container {
    /* width: 500px; */
     width: 70%;
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
}
#footer {
     background-color: green;
}
```

※　margin 0 auto　→上下の余白なし、左右の余白自動→中央寄せ


## 2カラムレイアウト（可変幅）
※floatを指定したらwidthを指定するのがルール

```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header">header</div>
  <div id="main">
   <div id="left">left</div>
   <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>
```

rightを60％にして間を空けたい
　⇒footerが回り込んでしまう
　→#mainにoverflow: hidden;


```lang:css
#container {
    /* width: 500px; */
     width: 70%;
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
     overflow: hidden;
}
#footer {
     background-color: green;
}
#left {
     background-color: pink;
     float: left;
     width: 30%;
}
#right {
     background-color: purple;
     float: right;
     width: 60%;
}
```

leftを固定してrightは可変にしたい
　→#rightのfloat,widthを消して#margin-left: 200px;

```lang:css
#container {
    /* width: 500px; */
     width: 70%;
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
     overflow: hidden;
}
#footer {
     background-color: green;
}
#left {
     background-color: pink;
     float: left;
     width: 200px;
}
#right {
     background-color: purple;
     margin-left: 200px;
}
```


## 2カラムレイアウト（固定幅）
```lang:css
#container {
    /* width: 500px; */
     width: 70%;
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
     overflow: hidden;
}
#footer {
     background-color: green;
}
#left {
     background-color: pink;
     float: left;
     width: 200px;
}
#right {
     background-color: purple;
     float: right;
     width: 300px;
}
```

間に余白を入れる

```lang:css
#container {
    /* width: 500px; */
     width: 70%;
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
     overflow: hidden;
}
#footer {
     background-color: green;
}
#left {
     background-color: pink;
     float: left;
     width: 200px;
}
#right {
     background-color: purple;
     float: right;
     width: 200px;
}
```

rightを左に寄せつつ間に余白をとる
`#right {
     background-color: purple;
     float: left;
     width: 200px;
     margin-left: 100px;
}`
または
`#right {
     background-color: purple;
     margin-legt: 300px;
}`


## 3カラムレイアウト（可変幅）
```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-

1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header">header</div>
  <div id="main">
   <div id="left">left</div>
   <div id="center">center</div>
   <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</div>  
</body>
</html>
```

```lang:css
#container {
    /* width: 500px; */
     width: 70%;
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
     overflow: hidden;
}
#footer {
     background-color: green;
}
#left {
     background-color: pink;
     float: left;
     width: 30%;
}
#center {
     background-color: orange;
     float: left;
     width: 40%;
}
#right {
     background-color: purple;
     float: left;
     width: 30%;
}
```

leftとrightを固定したいとき

```lang:css
#container {
    /* width: 500px; */
     width: 70%;
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
     overflow: hidden;
}
#footer {
     background-color: green;
}
#left {
     background-color: pink;
     float: left;
     width: 100px;
}
#center {
     background-color: orange;
     margin-left: 100px;
     margin-right: 100px;
}
#right {
     background-color: purple;
     float: right;
     width: 100px; 
}
```

※加えてrightとcenterの位置を変える（floatのものを先に書く）
```lang:html
  <div id="main">
   <div id="left">left</div>
   <div id="right">right</div>
   <div id="center">center</div>
  </div>
```

## 3カラムレイアウト（固定幅）

固定幅かつ間に余白をいれる

```lang:css
#container {
     width: 500px; 
     margin: 0 auto;
}
#header {
     background-color: red;
}
#main {
     background-color: blue;
     overflow: hidden;
}
#footer {
     background-color: green;
}
#left {
     background-color: pink;
     float: left;
     width: 100px;
}
#center {
     background-color: orange;
     float: left;
     width: 280px;
     margin-left: 10px;
     margin-right: 10px;
}
#right {
     background-color: purple;
     float: right;
     width: 100px; 
}
```

※marginの相殺
headerにmargin-bottom: 20px;
mainにmargin-top: 50px;を設定すると、
お互いに打ち消し合って大きい方に設定される。


# 実際にサイトを作る

## 文書の構造をつくる

```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header">header</div>
  <div id="menu">menu</div>
  <div id="main"> 
    <div id="contents">
      contents
    </div><!-- contents -->
    <div id="sidebar">
      sidebar
    </div><!-- #sidebar -->
  </div><!-- #main -->
    <div id="footer">footer</div>
</div><!-- #container -->
</body>
</html>
```

## 2カラムレイアウトを作る

* countainer→幅を決める・中央寄せにする
* header・menu→余白をつける
* contents,sidebar→幅を決める・幅余らせる
* main→回り込み防ぐ・余白つける

```lang:css
#container {
     width: 600px;
     margin: 0 auto;
}
#header {
     margin-bottom: 15px;
}
#menu {
     margin-bottom: 15px;
}
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
}
```

## 背景の設定・コンテンツの設定・フォントの設定

コンテンツの枠に影を作る
`box-shadow: 0 0 3px rgba(0,0,0,0.5);`
→縦0横0ぼかし3pxカラー黒透明度50％


footer下までのばす
* htmlにheight: 100%;
* #containerに
min-height: 100%;
heght: 100%;
* bodyにheight: 100%;
* body > #container {
height: auto;
}

文字がふちに寄りすぎているので余白をつける
* containerにpadding: 0 10px;

フォントを指定する
* bodyにfont-family


```lang:css
html {
  background-image: url('bg.gif');
  height: 100%;
}
body {
    height: 100%;
    font-family: Verdana, Arial;
}
body > #container {
    height: auto;
}
#container {
     min-height: 100%;
     height: 100%;
     width: 600px;
     margin: 0 auto;
     padding: 0 10px;
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
     margin-bottom: 15px;
}
#menu {
     margin-bottom: 15px;
}
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
}
```

## ヘッダーとフッター

ヘッダーに画像・メニューの設定

```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
  <div id="menu">
    <ul>
      <li><a href="">ホーム</a></li>
      <li><a href="">製品情報</a></li>
      <li><a href="">企業情報</a></li>
    </ul>
    </div>
  <div id="main"> 
    <div id="contents">
      contents
    </div><!-- contents -->
    <div id="sidebar">
      sidebar
    </div><!-- #sidebar -->
  </div><!-- #main -->
    <div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
```

フッターの指定

```lang:css
#footer {
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}
```

## メニューのスタイリング
メニューはHTML上ではリスト
`#menu ul>li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}`

※contents,sidebarの回り込みが起きる
→#menuにoverflow: hidden;

＊もっと使いやすく＊

マウスオーバーで色を変える
`#menu ul>li:hover {
      background: #ddd;
}`

下線をなくす・要素全体をリンクに
`#menu ul>li>a {
      text-decoration: none;
　　　　　display: block;
}`

```lang:css
html {
  background-image: url('bg.gif');
  height: 100%;
}
body {
    height: 100%;
    font-family: Verdana, Arial;
    font-size: 14px;
}
body > #container {
    height: auto;
}
#container {
     min-height: 100%;
     height: 100%;
     width: 600px;
     margin: 0 auto;
     padding: 0 10px;
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
     margin-bottom: 15px;
}
#menu {
     margin-bottom: 15px;
     overflow: hidden;
}
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}
#menu ul>li {
      float: left;
      width: 100px;
      font-size: 13px;
      text-align: center;
      padding: 4px;
      background: #ccc;
      margin-right: 10px;
      border-radius: 4px;
      text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
      background: #ddd;
}
#menu ul>li>a {
      text-decoration: none;
      display: block;
}
```

## 見出しと本文を作る
```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
  <div id="menu">
    <ul>
      <li><a href="">ホーム</a></li>
      <li><a href="">製品情報</a></li>
      <li><a href="">企業情報</a></li>
    </ul>
    </div>
  <div id="main"> 
    <div id="contents">
      <h2>見出し</h2>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <h2>見出し</h2>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div><!-- contents -->
    <div id="sidebar">
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div><!-- #sidebar -->
  </div><!-- #main -->
    <div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
```

見出しのスタイルを作る

```lang:css
html {
  background-image: url('bg.gif');
  height: 100%;
}
body {
    height: 100%;
    font-family: Verdana, Arial;
    font-size: 14px;
}
body > #container {
    height: auto;
}
#container {
     min-height: 100%;
     height: 100%;
     width: 600px;
     margin: 0 auto;
     padding: 0 10px;
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
     margin-bottom: 15px;
}
#menu {
     margin-bottom: 15px;
     overflow: hidden;
}
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}
#menu ul>li {
      float: left;
      width: 100px;
      font-size: 13px;
      text-align: center;
      padding: 4px;
      background: #ccc;
      margin-right: 10px;
      border-radius: 4px;
      text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
      background: #ddd;
}
#menu ul>li>a {
      text-decoration: none;
      display: block;
}
h2, h3 {
  font-weight: bold;
}
h2 {
  font-size: 16px;
  border-left: 5px solid #ccc;
  padding: 3px 0 3px 10px;
  margin-bottom: 10px;
}
h3 {
  border-bottom: 1px solid #ccc;
  padding: 3px 0;
  margin-bottom: 10px;
}
p {
  margin-bottom: 14px;
} 
```

## 画像付きリスト

`<ur class="products">
  <li>
   <img src="dummy.png" width="60" height="60">
   <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
  </li>
  <li>
   <img src="dummy.png" width="60" height="60">
   <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
  </li>
  <li>
   <img src="dummy.png" width="60" height="60">
   <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
  </li>
</ul>`

```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
  <div id="menu">
    <ul>
      <li><a href="">ホーム</a></li>
      <li><a href="">製品情報</a></li>
      <li><a href="">企業情報</a></li>
    </ul>
    </div>
  <div id="main"> 
    <div id="contents">
      <h2>見出し</h2>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <ur class="products">
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
     </ul>
      <h2>見出し</h2>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div><!-- contents -->
    <div id="sidebar">
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div><!-- #sidebar -->
  </div><!-- #main -->
    <div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
```

products imgとproducts pのスタイリング
回り込みを防ぐためにliにoverflow

```lang:css
html {
  background-image: url('bg.gif');
  height: 100%;
}
body {
    height: 100%;
    font-family: Verdana, Arial;
    font-size: 14px;
}
body > #container {
    height: auto;
}
#container {
     min-height: 100%;
     height: 100%;
     width: 600px;
     margin: 0 auto;
     padding: 0 10px;
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
     margin-bottom: 15px;
}
#menu {
     margin-bottom: 15px;
     overflow: hidden;
}
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}
#menu ul>li {
      float: left;
      width: 100px;
      font-size: 13px;
      text-align: center;
      padding: 4px;
      background: #ccc;
      margin-right: 10px;
      border-radius: 4px;
      text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
      background: #ddd;
}
#menu ul>li>a {
      text-decoration: none;
      display: block;
}
h2, h3 {
  font-weight: bold;
}
h2 {
  font-size: 16px;
  border-left: 5px solid #ccc;
  padding: 3px 0 3px 10px;
  margin-bottom: 10px;
}
h3 {
  border-bottom: 1px solid #ccc;
  padding: 3px 0;
  margin-bottom: 10px;
}
p {
  margin-bottom: 14px;
}
ul.products {
  margin-bottom: 15px;
}
ul.products>li {
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
} 
ul.products>li:last-child {
  border: none;
}
ul.products>li>img {
  float: left;
  width: 60px;
}
ul.products>li>p {
  margin-left: 70px;
  font-size: 13px;
}
```

## キャプション付き画像

`<div class="sample">
<img src="dummy.png" width="60" height="60">
<p>補足。補足。</p>
</div>`

画像に枠をつける
`div.sample>lmg {
   padding: 2px;
   backgoround:#fff
   border: 1px solid #ccc
}`

```lang:css
html {
  background-image: url('bg.gif');
  height: 100%;
}
body {
    height: 100%;
    font-family: Verdana, Arial;
    font-size: 14px;
}
body > #container {
    height: auto;
}
#container {
     min-height: 100%;
     height: 100%;
     width: 600px;
     margin: 0 auto;
     padding: 0 10px;
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
     margin-bottom: 15px;
}
#menu {
     margin-bottom: 15px;
     overflow: hidden;
}
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}
#menu ul>li {
      float: left;
      width: 100px;
      font-size: 13px;
      text-align: center;
      padding: 4px;
      background: #ccc;
      margin-right: 10px;
      border-radius: 4px;
      text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
      background: #ddd;
}
#menu ul>li>a {
      text-decoration: none;
      display: block;
}
h2, h3 {
  font-weight: bold;
}
h2 {
  font-size: 16px;
  border-left: 5px solid #ccc;
  padding: 3px 0 3px 10px;
  margin-bottom: 10px;
}
h3 {
  border-bottom: 1px solid #ccc;
  padding: 3px 0;
  margin-bottom: 10px;
}
p {
  margin-bottom: 14px;
}
ul.products {
  margin-bottom: 15px;
}
ul.products>li {
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
} 
ul.products>li:last-child {
  border: none;
}
ul.products>li>img {
  float: left;
  width: 60px;
}
ul.products>li>p {
  margin-left: 70px;
  font-size: 13px;
}
div.sample {
  float: right;
  width: 60px;
  margin-left: 10px;
}
div.sample>p {
  font-size: 10px;
}
div.sample>img {
  padding: 2px;
  background:#fff;
  border: 1px solid #ccc
}
```

## バッジをつける

`<span class="budge">new!</span>`

```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
  <div id="menu">
    <ul>
      <li><a href="">ホーム</a></li>
      <li><a href="">製品情報</a></li>
      <li><a href="">企業情報</a></li>
    </ul>
    </div>
  <div id="main"> 
    <div id="contents">
      <h2>見出し</h2>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <ul class="products">
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
     </ul>
      <h2>見出し</h2>
      <div class="sample">
        <span class="badge">new!</span>
        <img src="dummy.png" width="60" height="60">
        <p>補足。補足。</p>
      </div>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div><!-- contents -->
    <div id="sidebar">
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div><!-- #sidebar -->
  </div><!-- #main -->
    <div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
```

badgeのスタイリング
親要素div.sampleと子要素badgeのポジションを決める

```lang:css
html {
  background-image: url('bg.gif');
  height: 100%;
}
body {
    height: 100%;
    font-family: Verdana, Arial;
    font-size: 14px;
}
body > #container {
    height: auto;
}
#container {
     min-height: 100%;
     height: 100%;
     width: 600px;
     margin: 0 auto;
     padding: 0 10px;
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
     margin-bottom: 15px;
}
#menu {
     margin-bottom: 15px;
     overflow: hidden;
}
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}
#menu ul>li {
      float: left;
      width: 100px;
      font-size: 13px;
      text-align: center;
      padding: 4px;
      background: #ccc;
      margin-right: 10px;
      border-radius: 4px;
      text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
      background: #ddd;
}
#menu ul>li>a {
      text-decoration: none;
      display: block;
}
h2, h3 {
  font-weight: bold;
}
h2 {
  font-size: 16px;
  border-left: 5px solid #ccc;
  padding: 3px 0 3px 10px;
  margin-bottom: 10px;
}
h3 {
  border-bottom: 1px solid #ccc;
  padding: 3px 0;
  margin-bottom: 10px;
}
p {
  margin-bottom: 14px;
}
ul.products {
  margin-bottom: 15px;
}
ul.products>li {
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
} 
ul.products>li:last-child {
  border: none;
}
ul.products>li>img {
  float: left;
  width: 60px;
}
ul.products>li>p {
  margin-left: 70px;
  font-size: 13px;
}
div.sample {
  float: right;
  width: 60px;
  margin-left: 10px;
  position: relative;
}
div.sample>p {
  font-size: 10px;
}
div.sample>img {
  padding: 2px;
  background:#fff;
  border: 1px solid #ccc
}
.badge {
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px 4px 3px;
  position: absolute;
  top: -5px;
  right: -10px;
}
```

## アイコン付きリストを作る

`<ul class="submenu">
  <li><a href="">menu1</a></li>
  <li><a href="">menu2</a></li>
  <li><a href="">menu3</a></li>
</ul>`

```lang:html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0-rc-1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
  <div id="header"><h1><img src="dummy.png" height="100" width="600"></h1></div>
  <div id="menu">
    <ul>
      <li><a href="">ホーム</a></li>
      <li><a href="">製品情報</a></li>
      <li><a href="">企業情報</a></li>
    </ul>
    </div>
  <div id="main"> 
    <div id="contents">
      <h2>見出し</h2>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <ul class="products">
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
      <li>
       <img src="dummy.png" width="60" height="60">
       <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
       </li>
     </ul>
      <h2>見出し</h2>
      <div class="sample">
        <span class="badge">new!</span>
        <img src="dummy.png" width="60" height="60">
        <p>補足。補足。</p>
      </div>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div><!-- contents -->
    <div id="sidebar">
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <h3>見出し</h3>
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      <ul class="submenu">
        <li><a href="">menu1</a></li>
        <li><a href="">menu2</a></li>
        <li><a href="">menu3</a></li>
      </ul>
    </div><!-- #sidebar -->
  </div><!-- #main -->
    <div id="footer">Copyright 2012, dotinstall.com</div>
</div><!-- #container -->
</body>
</html>
```

```lang:css
html {
  background-image: url('bg.gif');
  height: 100%;
}
body {
    height: 100%;
    font-family: Verdana, Arial;
    font-size: 14px;
  }
body > #container {
    height: auto;
  }
#container {
     min-height: 100%;
     height: 100%;
     width: 600px;
     margin: 0 auto;
     padding: 0 10px;
     background-color: #fff;
     box-shadow: 0 0 3px rgba(0,0,0,0.5);
   }
#header {
     margin-bottom: 15px;
   }
#menu {
     margin-bottom: 15px;
     overflow: hidden;
   }
#main {
     overflow: hidden;
     margin-bottom: 15px;
}
#contents {
      float: left;
      width: 400px;
}
#sidebar {
      float: right;
      width: 180px;
}
#footer {
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-top: 1px solid #ccc;
      padding: 10px 0 20px;
}
#menu ul>li {
      float: left;
      width: 100px;
      font-size: 13px;
      text-align: center;
      padding: 4px;
      background: #ccc;
      margin-right: 10px;
      border-radius: 4px;
      text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
      background: #ddd;
}
#menu ul>li>a {
      text-decoration: none;
      display: block;
}
h2, h3 {
  font-weight: bold;
}
h2 {
  font-size: 16px;
  border-left: 5px solid #ccc;
  padding: 3px 0 3px 10px;
  margin-bottom: 10px;
}
h3 {
  border-bottom: 1px solid #ccc;
  padding: 3px 0;
  margin-bottom: 10px;
}
p {
  margin-bottom: 14px;
}
ul.products {
  margin-bottom: 15px;
}
ul.products>li {
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
} 
ul.products>li:last-child {
  border: none;
}
ul.products>li>img {
  float: left;
  width: 60px;
}
ul.products>li>p {
  margin-left: 70px;
  font-size: 13px;
}
div.sample {
  float: right;
  width: 60px;
  margin-left: 10px;
  position: relative;
}
div.sample>p {
  font-size: 10px;
}
div.sample>img {
  padding: 2px;
  background:#fff;
  border: 1px solid #ccc
}
.badge {
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px 4px 3px;
  position: absolute;
  top: -5px;
  right: -10px;
}
ul.submenu>li {
  background: url('h.png') no-repeat;
  padding: 0 0 5px 20px; 
}
```

※アイコン付リストは背景画像と余白でできている