contentp div idcontent p pdiv div idfooter pCopyright

（２）指定例 ■ contentのp要素を特定する例 <div id="content"> <p>青森の「味噌カレー牛乳ラーメン」ってちょっと不思議な味・・・。 青森行ったら，食べてみる価値あるかも</p></div> <div id="footer"> <p>Copyright © 2010 Yutaka Shirai All Right Reserved. </p> #content p { background: #FFFF 00; padding : 20 px; }

5. 3. 3 floatプロパティで段組レイアウト ■navとcontentを段組で body { #header { #nav { #content{ font-size: 80%; width: 678 px; } color: red; border-bottom: 1 px solid #777777; } background-color: #FFFF 77; width: 150 px; float: left; } color: blue; width: 500 px; float: right; padding-left: 25 px; } #footer { clear: both; border-top: 1 px solid #777777; } }

5. 3. 4 ナビゲーションスタイル （１）横に並ぶナビゲーションスタイル ■横に並ぶナビゲーションのスタイル #nav li { float: left; width: 118 px; border: 1 px solid black; margin-right: 5 px; margin-left: 0 px; font-size: 12 px; text-align: center; background-color: #CCCCCC; }

（２）ナビゲーションスタイルと段組の組み合わせ ■col 1とcol 2を横に並ばせる body{ width: 550 px; } #header { color: red; border-bottom: 1 px solid #777777; } #nav li{ float: left; width: 118 px; border: 1 px solid black; margin-right: 5 px; margin-left: 0 px; font-size: 12 px; text-align: center; background-color: #CCCCCC; } #content{clear: both; border-top: 1 px solid #777777; } #col 1{ width: 250 px; float: left; } #col 2{ width: 250 px; float: right; } #footer{ clear: both; border-top: 1 px solid #777777; }

5. 3. 5 displayプロパティを使ったリンク ■displayプロパティを使って，ブロックレベルに変換 #nav li { float: left; width: 118 px; border: 1 px solid black; margin-right: 5 px; margin-left: 0 px; text-align: center; background-color: #CCCCCC; text-decoration: none; } #nav a{display: block; width: 118 px; height: 20 px; color: black; text-decoration: none; } #nav a: hover{ display: block; color: #FFFFCC; background-color: #FF 00 FF; text-decoration: none; }

（３）基本とするHTML文書とスタイルシート 【指定なし】 HTML <div id="box 1">  </div> <div id="box 2">  </div> CSS #box 1 { background-color: #CCCCCC; width: 250 px; border: 1 px solid black; padding: 20 px; } #box 2 { background-color: #FFCCFF; width: 250 px; border: 1 px solid black; padding: 20 px; }

absolute #box 2のみのcss #box 2 { position: absolute; top: 50 px; left: 100 px; background-color: #FFCCFF; width: 250 px; border: 1 px solid black; padding: 20 px; } 100 px 50 px

relative #box 2のみのcss #box 2 { position: relative; top: 50 px; left: 100 px; background-color: #FFCCFF; width: 250 px; border: 1 px solid black; padding: 20 px; } 100 px 50 px

fixed #box 1, boc 2のcss #box 1 { background-color: #CCCCCC; width: 250 px; height: 500 px; border: 1 px solid black; padding: 20 px; } #box 2 { position: fixed; top: 50 px; left: 100 px; background-color: #FFCCFF; width: 250 px; border: 1 px solid black; padding: 20 px; } Absoluteと同じだが， スクロールしても box 2の位置が変わらない

5. 4. 1 positionプロパティを使ったレイアウト （１）HTMLでIDを指定する HTML <div id="wrapper"> <div id="dragon"> <img src="image/Dragon. Curve. jpg” alt="ドラゴンカーブ" width=100 height=80> </div> <div id="julia"><img src="image/julia. jpg” alt="充填ジュリア集合" width=100 height=100> </div> <div id="mandelbro"><img src="image/mandelbro. jpg” alt="マンデルブロー集合" width=100 height=100></div> <div id="mengar"><img src="image/Mengar. jpg” alt="メンガーのスポンジ" width=100 height=100></div>

（２）スタイルシートで正確に位置を指定する CSS #wrapper #dragon #julia #mandelbro #mengar { { { width: 500; margin: 20 px; } position: absolute; top: 20 px; position: absolute; top: 120 px; left: 40 px; } left: 160 px; }

（２）スタイルシートと表示結果 #wrapper { width : margin : } #content { width : height : padding : border : overflow: } 500 px; 20 px; 400 px; 200 px; 1 px solid black; scroll;

5. 4. 4 ボックスの重ね順 z-indexを使う ■値が大きいほど前に表示される #wrapper #dragon #julia #mandelbro #mengar {width: 500; { position: margin: 20 px; } absolute; top: 20 px; left: 40 px; z-index: 1; } absolute; top: 80 px; left: 100 px; z-index: 2; } absolute; top: 160 px; left: 150 px; z-index: 3; } absolute; top: 240 px; left: 200 px; z-index: 4; }