【RWD】可変レイアウトの演習
可変レイアウトの演習を行いました。
ソース
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>可変レスポンシブWEBデザイン</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style-reset.css"> <link rel="stylesheet" href="css/style-l.css"> <link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:600px) and (max-width:979px)"> <link rel="stylesheet" href="css/style-s.css" media="only screen and (max-width:599px)"> <link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,900' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <div id="header"> <div id="site"> <h1><img src="img/logo.png" alt="PICKUP STREAM"></h1> </div> <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+"></a></li> <li><a href="#"><img src="img/rss.png" alt="RSS"></a></li> </ul> </div> <div id="headering"> <img src="img/header.jpg" alt=""> </div> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div><!-- /#header --> <div id="content"> <div class="date"><span>1</span> AUG</div> <h2>海岸のデコレーション</h2> <div class="cat">CATEGORY: <a href="url">海と海岸と空</a></div> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <p><img src="img/sand.jpg" alt="海岸線で生息する小さな植物"></p> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </div><!-- /#content --> <div id="sidebar"> <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> <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> </div> <!-- /#sidebar --> <div id="footer"> <p>PICKUP STREAM</p> <small>Copyright © PICKUP STREAM, all rights reserved.</small> </div> </div> <!-- /#container --> </body> </html>
CSS
style-reset.css
@charset "utf-8"; html,body,h1,h2,h3,p,ul,li{ margin:0; padding: 0; font-family: "Hiragino Kaku Gothic ProN" , meiryo, sans-serif; line-height: 1.0; font-size: 16px; } ul{ list-style: none; } img{ border: none; } a{ text-decoration: none; }
style-l.css
@charset "utf-8"; /*----------- Page Layout -----------*/ body{ margin: 24px 10px; } #container{ width: 960px; margin: auto; } #header{ margin-bottom: 50px; } #content{ width: 600px; float: left; margin-bottom: 50px; } #sidebar{ width: 300px; float: right; margin-bottom: 50px; } #footer{ clear: both; } /* Web Fonts */ #nav, #footer, .date, .menu h3{ font-family: "Maven Pro", Helvetica, Arial, sans-serif; } /* ---------- header ----------*/ /* logo */ #site { float: left } /* social */ #iconmenu{ float: right; text-align: right; line-height: 1.6; } #iconmenu ul{ margin: 0; padding-top: 3px; } #iconmenu li{ display: inline; list-style: none; } #iconmenu img{ border: none; } /* headering */ #headering img{ vertical-align: bottom; } /* nav */ #nav { font-size: 14px; overflow: hidden; border-top: solid 1px #FFF; background: #000; } #nav li{ float: left } #nav li a{ display:block; width: 120px; padding: 5px 0; border-right: solid 1px #FFF; text-align: center; color: #FFF; line-height: 1.6; } #nav li a:hover{ background: #0097B8; } /*------- content --------*/ /* date */ .date{ float: right; background: #0097B8; padding: 8px 22px; border-radius: 55px / 48px; text-align: center; font-weight: bold; color: #FFF; } .date span{ display:block; font-size: 32px; } /* title */ #content h2{ font-size: 28px; border-bottom: solid 1px #AAA; margin-bottom: 6px; padding-bottom: 3px; } /* cat */ .cat { font-size: 14px; color: #666; margin-bottom: 30px; } .cat a{ color: #666; } /* article */ #content p{ line-height: 1.6; margin-bottom: 16px; } /*----- menu ------*/ .menu{ margin-bottom: 50px; } .menu h3{ font-size: 26px; color: #66c1e8; margin-bottom: 5px; } .menu ul{ border-top: solid 1px #AAA; } .menu li{ border-bottom: solid 1px #AAA; } .menu li a{ display: block; font-size: 14px; color: #666; padding: 10px 0 10px 20px; background: url(../img/listmark.png) no-repeat 0 50%; } .menu li a:hover{ background-color: #B4F0FF; } /*------ footer -------*/ #footer{ color: #fff; background: #000; padding: 10px 10px 20px; } #footer small{ font-size: 12px; font-weight: bold; line-height: 1.6; display: block; }
style-m.css
@charset "utf-8"; #container{ width: 100%; } #content{ width: 62.5%; } #sidebar{ width: 31.25%; } img{ max-width:100%; height: auto; }
style-s.css
@charset "utf-8"; #container{ width: 100%; position: relative; } #header{ margin: 0 0 15px; } #content{ width: 100%; float: none; } #sidebar{ width: 100%; float: none; } img{ max-width:100%; height: auto; } /* icon menu */ #iconmenu{ position:absolute; right: 8px; bottom: 6px; } #footer{ padding-bottom: 60px; } #site, #iconmenu{ float:none; } /* nav */ #nav li a{ width: auto; padding: 5px 8px; } /* content */ .date{ float: none; font-size: 12px; line-height: 2.5; display: inline; padding: 3px 10px; border-radius: 5px; } .date span{ font-size: 12px; display: inline; } #content h2{ font-size: 24px; }