カラムレイアウトの設計演習 続パターンB
背景画像を中心に設計
はてな記法をためす
ｈｔｍｌ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>カラムレイアウトの設計</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1> <img src="img/logo.png" alt="PICKUP STREAM"> </h1> <div id="nav"> <ul> <li> <a href="#">HOME</a> </li> <li> <a href="#">CATEGORY</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">CONTACT</a> </li> </ul> </div> <!-- /#nav --> </div> <!-- /#header --> <div id="billboard"> <div id="lead"> <h2>買い物に出掛けよう</h2> <p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。１か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p> <p class="date">2012年8月3日</p> <p class="more"> <a href="#">MORE</a> </p> </div> <!-- /#lead --> </div> <!-- /#billboard --> <div id="content"> <div class="post" id="sectionA"> <a href="#"> <h2>風車と風の関係</h2> <p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p> <p class="date">2012年8月1日</p> <p class="more_s">MORE</p> </a> </div> <!-- /.post --> <div class="post" id="sectionB"> <a href="#"> <h2>ツルを伸ばしてどこまでも</h2> <p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p> <p class="date">2012年7月28日</p> <p class="more_s">MORE</p> </a> </div> <!-- /.post --> <div class="post" id="sectionC"> <a href="#"> <h2>海岸のデコレーション</h2> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p> <p class="date">2012年7月20日</p> <p class="more_s">MORE</p> </a> </div> <!-- /.post --> <div class="post" id="sectionD"> <a href="#"> <h2>色とりどりの絨毯</h2> <p>原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p> <p class="date">2012年7月5日</p> <p class="more_s">MORE</p> </a> </div> <!-- /.post --> </div> <!-- /#content --> <div id="footer"> <p>PICKUPxSTREAM</p> <div id="iconmenu"> <ul> <li> <a href="#"> <img src="img/twitter.png" alt="Twitter"> </a> </li> <li> <a href="#"> <img src="img/facebook.png" alt="Facebook"> </a> </li> <li> <a href="#"> <img src="img/googleplus.png" alt="Google Plus"> </a> </li> <li> <a href="#"> <img src="img/rss.png" alt="RSS Feed"> </a> </li> </ul> </div> <!-- /#iconmenu --> <div id="submenu"> <ul> <li> <a href="#">Privacy Policy</a> </li> <li> <a href="#">Terms of Use</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <!-- /#submenu --> <p> <small>Copyright © PICKUP STREAM, all rights reserved.</small> </p> </div> <!-- /#footer --> </div> <!-- /#container --> </body> </html>
ｃｓｓ
@charset "UTF-8"; /* reset */ html, body, div, h1, h2, 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 { margin-top: 25px } p { line-height: 1.6 } /* layout */ #container { width: 960px; margin: auto; } #header { margin-bottom: 10px; overflow: hidden; } #billboard { margin-bottom: 30px } #content { margin-bottom: 30px; overflow: hidden; } /* #header */ h1 { float: left } /* #nav */ #nav { float: right; font-size: 22px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; padding-top: 30px; } #nav li { float: left } #nav li a { display: block; float: left; margin-left: 20px; border-bottom: solid 5px transparent; color: #000; } #nav li a:hover { border-bottom-color: #FF1E97 } /* #billboard */ #billboard { width: 960px; height: 465px; background: #FFF url(img/basket.jpg) no-repeat left top; } #lead { width: 290px; height: 465px; margin-left: 620px; padding: 0 25px; color: #FFF; overflow: hidden; background-color: #333; background: -webkit-gradient(linear,left top, left bottom, from(#000), to(#888)); background: -webkit-linear-gradient(#000 0%, #888 100%); background: -moz-linear-gradient(#000 0%, #888 100%); background: -o-linear-gradient(#000 0%, #888 100%); background: -ms-linear-gradient(#000 0%, #888 100%); background: linear-gradient(#000 0%, #888 100%); } #lead h2 { margin: 20px 0 } #lead .more { font-size: 18px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; text-align: right; } #lead .more a { color: #FFF; background: url(img/more.png) no-repeat right center; display: block; padding: 10px 40px 10px 0; } /* .post */ .post { float: left; display: block; width: 216px; margin: 0 32px 25px 0; padding-top: 170px; background-size: 80%; } #sectionA, #sectionB, #sectionC, #sectionD { -webkit-background-size: contain; -moz-background-size: contain; -ms-background-size: contain; background-size: contain; } #sectionA { background: url(img/windmill_thumb.jpg) no-repeat left top } #sectionB { background: url(img/leaf_thumb.jpg) no-repeat left top } #sectionC { background: url(img/sand_thumb.jpg) no-repeat left top } #sectionD { background: url(img/flower_thumb.jpg) no-repeat left top } .post:last-child { margin-right: 0 } .post + .post + .post + .post { margin-right: 0 } /* thumbnail */ .post img { width: 216px } .post h2 { font-size: 16px; margin: 15px 0 0 0; } .post p { font-size: 12px; margin: 10px 0; } .post .date { float: left; font-weight: bold; } .post .more_s { float: right; color: #FFF; font-size: 14px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; background: #666 url(img/more_small.png) no-repeat 90% 50%; padding: 3px 28px 3px 5px; } .post a { color: #000; display: block; overflow: hidden; background: #FFF; } .post a:hover { background-color: #CFFFB2 } /* #footer */ #footer { font-family: 'Maven Pro', Helvetica, Arial, sans-serif; color: #ffffff; background-color: #333; padding: 10px 10px 30px 10px; } #footer p { float: left } #iconmenu { float: right } #iconmenu ul { padding: 3px 0 0 0 } #iconmenu li { display: inline } /* #submenu */ #submenu { clear: both } #submenu ul { margin: 10px 0 5px 0; padding: 3px 0 0 0; font-size: 12px; } #submenu li { display: inline } #submenu a { color: #ff1e97; font-weight: bold; border-right: solid 1px #FFF; padding-right: 6px; margin-right: 3px; } #submenu li:last-child a { border: none } #submenu li + li + li a { border: none } /* copy */ p small { font-size: 12px; font-weight: bold; }
