レスポンシブルWebサイト 可変レイアウト+固定レイアウト
可変レイアウト+固定レイアウト
- Lサイズ:横幅960px
- Mサイズ:横幅620px
- Sサイズ:横幅可変
画面サイズごとのデザイン
- PCサイズ
![f:id:island-web:20120918071757j:image f:id:island-web:20120918071757j:image](https://cdn-ak.f.st-hatena.com/images/fotolife/i/island-web/20120918/20120918071757.jpg)
- タブレットサイズ
- スマートフォンサイズ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>可変レイアウト+固定レイアウト</title> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:650px) and (max-width:979px)"> <link rel="stylesheet" href="style-s.css" media="only screen and (max-width:649px)"> <link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'> </head> <body> <!-- ▼#container --> <div id="container"> <!-- ▼#header --> <div id="header"> <!-- ▼#nav --> <div id="nav"> <ul> <li><a href="url">HOME</a></li> <li><a href="url">CATEOGRY</a></li> <li><a href="url">ABOUT</a></li> <li><a href="url">CONTACT</a></li> </ul> </div> <!-- ▲#nav --> <!-- ▼#site --> <div id="site"> <h1>PICKUP<span>STREAM</span></h1> <p>Comfort, Delightful, Refreshing Time Produce</p> </div> <!-- ▲#site --> </div> <!-- ▲#header --> <!-- ▼#content --> <div id="content"> <div id="content-inner"> <!-- ▼.post --> <div class="post"> <a href="url"> <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 --> <!-- ▼.post --> <div class="post"> <a href="url"> <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 --> <!-- ▼.post --> <div class="post"> <a href="url"> <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 --> <!-- ▼.post --> <div class="post"> <a href="url"> <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> </div> <!-- ▲#content --> <!-- ▼#sidebar --> <div id="sidebar"> <div class="ad"> <!-- Rakuten Widget FROM HERE --><script type="text/javascript">rakuten_design="slide";rakuten_affiliateId="04dbeaa6.68ec97da.04dbeaa7.398ca5a5";rakuten_items="tra-ctsmatch";rakuten_genreId="tra-allzenkoku";rakuten_size="300x250";rakuten_target="_blank";rakuten_theme="gray";rakuten_border="on";rakuten_auto_mode="on";rakuten_genre_title="off";rakuten_recommend="on";rakuten_service_flag="travel";</script><script type="text/javascript" src="http://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget_travel.js"></script><!-- Rakuten Widget TO HERE --> </div> <!-- ▼.menu --> <div class="menu"> <h3>CATEGORIES</h3> <ul> <li><a href="url">山と森林</a></li> <li><a href="url">海と海岸と空</a></li> <li><a href="url">都市と建築</a></li> <li><a href="url">地下</a></li> </ul> </div> <!-- ▲.menu --> <!-- ▼.menu --> <div class="menu"> <h3>RECENT POSTS</h3> <ul> <li><a href="url">海岸のデコレーション</a></li> <li><a href="url">風車と海風の関係</a></li> <li><a href="url">ツルを伸ばしてどこまでも</a></li> <li><a href="url">色とりどりの絨毯</a></li> <li><a href="url">休日に買い物にいくなら</a></li> <li><a href="url">高層ビルと風の関係</a></li> </ul> </div> <!-- ▲.menu --> </div> <!-- ▲#sidebar --> <!-- ▼#footer --> <div id="footer"> <p>PICKUP STREAM</p> <small>Copyright © PICKUP STREAM, all rights reserved.</small> </div> <!-- ▲#footer --> </div> <!-- ▲#container --> </body> </html>
style-l.css
@charset "utf-8"; /* layout */ body { margin: 0 10px; font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; } #container { width: 960px; margin: auto; } #header { width: 960px; height: 280px; margin: 0 0 30px; background-image: url(img/ocean.jpg); background-position: left bottom; } #content { width: 630px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both; } /* nav */ #nav { font-size: 14px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; overflow: hidden; background-color: #000; } #nav ul { margin: 0; padding: 0; } #nav li { list-style-type: none; float: left; width: 120px; } #nav li a { display: block; padding: 5px 0; border-right: solid 1px #ffffff; color: #ffffff; text-align: center; text-decoration: none; } #nav li a:hover { background-color: #63a2c6; } /* site */ #site { font-family: 'Maven Pro', 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; margin: 0; line-height: 1; } #site h1 span { font-weight: normal; } #site p { font-size: 16px; margin: 0; } /* content */ .date { float: left; background-color: #537685; padding: 5px 15px 8px; margin: 0 10px 5px 0; text-align: center; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 14px; color: #fff; } .date span { display: block; font-size: 20px; line-height: 1; } .post h2 { font-size: 22px; border-bottom: solid 1px #aaa; margin: 6px 0 15px; padding: 0 0 3px; } .post p img { float: left; margin-right: 10px; clear:left; } .post p { font-size: 14px; line-height: 1.6; margin: 0; clear: left; } .post .more { background-image: url(img/more_gray.png); background-repeat: no-repeat; background-position: center right; text-align: right; padding-right: 30px; color: #888; clear: none; } .post { border: solid 1px #aaa; margin-bottom: 20px; } .post a { display: block; padding: 10px; overflow: hidden; color: #000; text-decoration: none; } .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%); } /* ad */ .ad { width: 300px; height: 250px; margin-bottom: 20px; } /*.menu */ .menu { background-color: #537685; padding: 15px; margin-bottom: 20px; } .menu h3 { font-family: 'Maven Pro', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: normal; color: #fff; margin: 0 0 25px; } .menu ul {margin: 0; padding: 0; border-top: solid 1px #aaa; } .menu li { margin-bottom: 0; list-style-type: none; border-bottom: solid 1px #aaa; } .menu li a { display: block; font-size: 14px; text-decoration: none; color: #fff; padding: 10px 0; } .menu li a:hover { background-color: #63a2c6; } /* #footer */ #footer { font-family: 'Maven Pro', Helvetica, Arial, sans-serif; color: #fff; background-color: #000; padding: 10px 10px 20px; } #footer p { margin: 0; } #footer small { font-size: 12px; font-weight: bold; display: block; }
style-m.css
@charset "utf-8"; /* layout */ #container { width: 620px; } #header { width: 620px; } #content { width: 300px; float: left; } /* .post */ .post { width: 300px; margin-right: 20px; } .post:nth-child(even) { margin-right: 0; } .post img { width: 300px; } .post h2 { font-size: 22px; } .post p { font-size: 16px; } .post .more_s { font-size: 18px; } /* #headerpost */ #headerpost { position: relative; } #headerpost img { float: none; } #headerpost #lead { float: none; position: absolute; left: 0; bottom: 0; background-color: rgba(0,0,0,0.7); width: auto; padding: 10px 20px; margin: 0; } #headerpost h2 { font-size: 20px; margin: 10px 0 10px 0; } #headerpost p { font-size: 14px; margin: 0 0 20px 0; } #headerpost .date { float: left; margin: 0; } #headerpost .more { float: right; margin: -12px 15px 0px 0; }
style-s.css
@charset "utf-8"; /* layout */ #container { width: 100%; } #header { width: 100%; height: 140px; background-size: 100% auto; margin: 0 0 15px; } #content { width: 100%; float: none; } #sidebar { width: 100%; float: none; } /* nav */ #nav { font-size: 12px; } #nav ul li { width: 25%; } #nav ul li:last-child a { border: none; } /* site */ #site { display: block; text-align: center; margin: 0; } #site h1 { font-size: 30px; } #site p { font-size: 12px; } /* content */ .date { font-size: 12px; padding: 3px 5px; } .date span { font-size: 12px; } .post h2 { font-size: 18px; } .post img { max-width: 35%; height: auto; }