レスポンシブWeb デザイン2
全て1から書きました。
すごい難易度高かったです。
HTML5で書いて、firefoxにも対応!
http://felica.boy.jp/responsive/sample2.html
- HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>PICKUP×STREAM</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style-l2.css"> <link rel="stylesheet" href="style-m2.css" media="only screen and (min-width:620px) and (max-width:959px)"> <link rel="stylesheet" href="style-s2.css" media="only screen and (max-width:619px)"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> </head> <body> <article> <header> <div id="logo_area"> <h1><img src="logo2.png" alt="PICKUP×STREAM"><br>快適で楽しくて爽快な時間をプロデュース</h1> </div> <nav id="header_nav"> <ul> <li>HOME</li> <li>CATEGOLY</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </nav> </header> <div id="billboard_wrapper"> <div id="billboard_image"> <img src="billboard.jpg" class="billboard_image"> </div> <div id="billboard_detail"> <h2>買い物に出掛けよう</h2> <p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。1か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p> <p class="date">2012年8月3日</p> <p id="more"><span>MORE</span><img src="arrow2.png" height="13px" width="13px" alt=""></p> </div> </div> <div id="section_wrapper"> <section id="section1"> <img src="section1.png" alt="" class="image"> <h1>風車と風の関係</h1> <p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p> <p class="date">2012年8月3日</p> <div class="more"><img src="more.png"></div> </section> <section id="section2"> <img src="section2.png" alt="" class="image"> <h1>ツルを伸ばしてどこまでも</h1> <p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p> <p class="date">2012年8月1日</p> <div class="more"><img src="more.png"></div> </section> <section id="section3"> <img src="section3.png" alt="" class="image"> <h1>海岸のデコレーション</h1> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p> <p class="date">2012年7月28日</p> <div class="more"><img src="more.png"></div> </section> <section id="section4"> <img src="section4.png" alt="" class="image"> <h1>色とりどりの絨毯</h1> <p>原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p> <p class="date">2012年7月20日</p> <div class="more"><img src="more.png"></div> </section> </div> <footer> <h1>PICKUP×STREAM</h1> <ul> <li>Privacy Policy</li> <li>Team of Use</li> <li>Contact</li> </ul> <small>Copyright © PICKUP STREAM, all rights reserved.</small> <div id="icon_area"> <img src="twitter.png"> <img src="facebook.png"> <img src="google-plus.png"> <img src="feed.png"> </div> </footer> </article> </body> </html>
- CSS Large
@charset "UTF-8"; article { width: 960px; margin: 0 auto; } header { overflow: hidden; } h1 { font-size: 14px; color: #999; } #logo_area { float: left; } #header_nav { float: right; } #header_nav li { float: left; font-size: 16px; padding: 40px 0 20px 20px; } #billboard_wrapper { margin-bottom: 20px; overflow: hidden; } #billboard_image { width: 640px; float: left; } #billboard_detail { width: 260px; height: 580px; color: #fff; float: right; padding: 30px; background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(122,122,122,0.8) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(99%,#727272)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,(122,122,122,0.8) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,(122,122,122,0.8) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,(122,122,122,0.8) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,(122,122,122,0.8) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0.8)', endColorstr='(122,122,122,0.8)',GradientType=0 ); /* IE6-9 */ } h2 { font-size: 24px; } #billboard_detail p { padding: 20px 0 0 0; line-height: 1.3; } #more { text-align: right; } #more span { padding-right: 10px; } #section_wrapper { margin-bottom: 20px; clear: both; overflow: hidden; } #section1 { width: 216px; float: left; margin-right: 32px; } #section2 { width: 216px; float: left; margin-right: 32px; } #section3 { width: 216px; float: left; margin-right: 32px; } #section4 { margin: 0; } section h1 { font-weight: bold; color: #000; font-size: 16px; padding: 5px 0 15px 0; } .date { padding-top: 20px; font-size: 13px; } .more { position: relative; bottom: 16px; left: 118px; } footer { background-color: #333; padding: 10px; position: relative; } footer h1 { color: #fff; font-weight: bold; padding-bottom: 20px; } footer ul { overflow: hidden; margin-bottom: 10px; } footer li { float: left; padding: 5px 10px; color: #ff78ac; border-left: 1px solid #fff; font-size: 13px; } footer li:first-child { border: none; padding-left: 0; } small { color: #fff; font-weight: bold; margin-bottom: 20px; font-size: 12px; } #icon_area { position: absolute; top: 10px; right: 10px; } #icon_area img { height: 30px; width: 30px; }
- CSS Midium
@charset "UTF-8"; article { width: 620px; margin: 0 auto; } header { position: relative; } #header_nav { width: 180px; position: absolute; right: 0px; top: 10px; } #header_nav ul { margin-top: 20px; } #header_nav li { padding: 2px 10px; } #billboard_image { position: relative; } #billboard_detail { width: 560px; height: auto; position: absolute; top: 460px; } #section1 { width: 300px; float: left; margin-right: 10px; } #section2 { width: 300px; float: right; margin-left: 10px; margin-right: 0; } #section3 { width: 300px; float: left; margin-right: 10px; } #section4 { width: 300px; float: right; margin-left: 10px; } .image { width: 300px; } .more { position: relative; bottom: 16px; left: 198px; }
- CSS Small
@charset "UTF-8"; article { width: 620px; margin: 0 auto; } header { position: relative; } #header_nav { width: 180px; position: absolute; right: 0px; top: 10px; } #header_nav ul { margin-top: 20px; } #header_nav li { padding: 2px 10px; } #billboard_image { position: relative; } #billboard_detail { width: 560px; height: auto; position: absolute; top: 460px; } #section1 { width: 300px; float: left; margin-right: 10px; } #section2 { width: 300px; float: right; margin-left: 10px; margin-right: 0; } #section3 { width: 300px; float: left; margin-right: 10px; } #section4 { width: 300px; float: right; margin-left: 10px; } .image { width: 300px; } .more { position: relative; bottom: 16px; left: 198px; }