カラムレイアウトの設計演習 パターンC
カラムレイアウトの設計演習 パターンC
検討はこちら
模範html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウトの設計 C</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <div id="nav"> <ul> <li> <a href="#">HOME</a> </li> <li> <a href="#">CATEOGRY</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">CONTACT</a> </li> </ul> </div> <!-- /#nav --> <div id="site"> <h1>PICKUP <span>STREAM</span> </h1> <p>Comfort, Delightful, Refreshing Time Produce</p> </div> <!-- /#site --> </div> <!-- /#header --> <div id="wrapper"> <div id="content"> <div class="post"> <a href="#"> <div class="date"> <span>1</span>AUG </div> <h2>風車と風の関係</h2> <p> <img src="img/windmill_thumb.jpg" alt="">風車は風を受けて… </p> <p class="more">READ MORE</p> </a> </div> <!-- /.post --> <div class="post"> <a href="#"> <div class="date"> <span>28</span>JUL </div> <h2>海岸のデコレーション</h2> <p> <img src="img/sand_thumb.jpg" alt="">海岸には砂や… </p> <p class="more">READ MORE</p> </a> </div> <!-- /.post --> <div class="post"> <a href="#"> <div class="date"> <span>12</span>JUL </div> <h2>ツルを伸ばしてどこまでも</h2> <p> <img src="img/leaf_thumb.jpg" alt="">ツル植物は太い木の… </p> <p class="more">READ MORE</p> </a> </div> <!-- /.post --> <div class="post"> <a href="#"> <div class="date"> <span>5</span>JUL </div> <h2>色とりどりの絨毯</h2> <p> <img src="img/flower_thumb.jpg" alt="">原生花園では今年も… </p> <p class="more">READ MORE</p> </a> </div> <!-- /.post --> </div> <!-- #content --> <div id="sidebar"> <div class="ad"> <img src="img/ad.jpg" alt="広告"> </div> <!-- /.ad --> <div class="menu"> <h3>CATEGORIES</h3> <ul> <li> <a href="#">山と森林</a> </li> <li> <a href="#">海と海岸と空</a> </li> <li> <a href="#">都市と建築</a> </li> <li> <a href="#">地下</a> </li> </ul> </div> <!-- /.menu --> <div class="menu"> <h3>RECENT POSTS</h3> <ul> <li> <a href="#">海岸の...</a> </li> <li> <a href="#">風車と...</a> </li> <li> <a href="#">ツルを...</a> </li> <li> <a href="#">色とりどり..</a> </li> <li> <a href="#">休日に...</a> </li> <li> <a href="#">高層...</a> </li> </ul> </div> <!-- /.menu --> </div> <!-- /#sidebar --> </div> <!-- /#wrapper --> <div id="footer"> <p>PICKUP STREAM</p> <p> <small>Copyright © PICKUP STREAM, all rights reserved.</small> </p> </div> <!-- /#footer --> </div> <!-- /#container --> </body> </html>
模範css
@charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, p, ul, li, img, a { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none } a { text-decoration: none } img { border: none; vertical-align: bottom; } /* body */ body { font-size: 16px } /* layout */ #container { width: 960px; margin: auto; } #header { margin-bottom: 30px } #wrapper { overflow: hidden } #content { width: 630px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both } /* #nav */ #nav { font-size: 14px; background: #000; } #nav ul { overflow: hidden } #nav li { float: left; width: 120px; } #nav li a { display: block; line-height: 3.0; border-right: solid 1px #FFF; color: #FFF; text-align: center; } #nav li a:hover { background: #63A2C6 } /* #header */ #header { width: 960px; height: 280px; background: url(../img/seagull.jpg) no-repeat left bottom; } #site { font-family: Helvetica, Arial, sans-serif; background: rgba(255, 255, 255, 0.5); display: inline-block; padding: 10px 20px; margin-top: 30px; } #site h1 { font-size: 50px } #site h1 span { font-weight: normal } /* #content */ .date { float: left; background: #537685; padding: 5px 15px 8px; margin: 0 10px 5px 0; text-align: center; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 14px; color: #FFF; } .date span { display: block; font-size: 20px; } .post { border: solid 1px #AAA; margin-bottom: 20px; } .post h2 { font-size: 22px; border-bottom: solid 1px #AAA; margin: 10px 0 15px 0; padding-bottom: 8px; } .post p { font-size: 14px; line-height: 1.6; clear: left; } .post p img { float: left; margin-right: 10px; clear: left; } .post .more { background: url(../img/more_gray.png) no-repeat center right; text-align: right; padding-right: 30px; color: #888; clear: none; } .post a { display: block; padding: 10px; overflow: hidden; color: #000; } .post a:hover { background-color: #DDD; background: -webkit-gradient(linear,left top, left bottom, from(#FFF), to(#DDD)); background: -webkit-linear-gradient(#FFF 0%, #DDD 100%); background: -moz-linear-gradient(#FFF 0%, #DDD 100%); background: -o-linear-gradient(#FFF 0%, #DDD 100%); background: -ms-linear-gradient(#FFF 0%, #DDD 100%); background: linear-gradient(#FFF 0%, #DDD 100%); } /* #sidebar */ .ad img { width: 300px; height: 250px; margin-bottom: 20px; } .menu { background: #537685; padding: 15px; margin-bottom: 20px; } .menu h3 { font-family: Helvetica, Arial, sans-serif; font-size: 22px; font-weight: normal; color: #FFF; margin-bottom: 25px; } .menu ul { border-top: solid 1px #AAA } .menu li { border-bottom: solid 1px #AAA } .menu li a { display: block; font-size: 14px; color: #FFF; padding: 15px 0 13px 0; } .menu li a:hover { background: #63A2C6 } /* #footer */ #footer { font-family: Helvetica, Arial, sans-serif; color: #FFF; background: #000; padding: 15px 10px 20px 10px; } #footer small { font-size: 11px; font-weight: bold; display: block; margin-top: 2px; }