【 HTML5, CSS3 】 レスポンシブデザイン:固定レイアウト テンプレート
HTML5とCSS3で作ったレスポンシブデザイン:固定レイアウトのものをより完璧のものに修正しました。
リンク元はこちらです。
http://jsrun.it/vinton/3xm9
こちらのものを、よりカスタマイズしやすくしました。
色合いもベーシックに仕上げ、アフィリエイトサイトや色々な用途に使えると思います。
CSSファイルも今回は1つにまとめてあるバージョンです。
こちらはカスタマイズしたデモページです。
DEMO_PAGE 【 HTML5, CSS3 】 レスポンシブデザイン:固定レイアウト テンプレート
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版) - js do it</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <meta name="Description" content="jsdo.it - share JavaScript, HTML5 and CSS -" /> <meta name="Keywords" content="JavaScript,HTML5,CSS" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" /> <link href="http://fonts.googleapis.com/css?family=Maven+Pro:900,400" rel="stylesheet"> </head> <body> <section> <header> <div id="site"> <h1><a href="#"><img src="img/logo.png" alt="PICKUP STREAM"></a></h1> </div> <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> </nav> </header> <div id="headerpost"> <img src="img/basket.jpg" alt=""> <div id="lead"> <h2>買い物に出掛けよう</h2> <p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。1か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p> <p class="date">2012年8月3日</p> <p class="more"><a href="#">See more</a></p> </div> </div> <div id="content"> <article id="post01"> <h2><a href="#post01">風車と風の関係</a></h2> <div class="post_inner"> <a href="#"> <img src="img/windmill_thumb.jpg" alt=""> <p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p> <p class="date">2012年8月1日</p> <p class="more_s">MORE</p> </a> </div> </article> <article id="post02"> <h2><a href="#post02">ツルを伸ばしてどこまでも</a></h2> <div class="post_inner"> <a href="#"> <img src="img/leaf_thumb.jpg" alt=""> <p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p> <p class="date">2012年7月28日</p> <p class="more_s">MORE</p> </a> </div> </article> <article id="post03"> <h2><a href="#post03">海岸のデコレーション</a></h2> <div class="post_inner"> <a href="#"> <img src="img/sand_thumb.jpg" alt=""> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p> <p class="date">2012年7月20日</p> <p class="more_s">MORE</p> </a> </div> </article> <article id="post04"> <h2><a href="#post04">色とりどりの絨毯</a></h2> <div class="post_inner"> <a href="#"> <img src="img/flower_thumb.jpg" alt=""> <p>原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p> <p class="date">2012年7月5日</p> <p class="more_s">MORE</p> </a> </div> </article> </div> <footer> <p>PICKUPxSTREAM</p> <div id="socialicon"> <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> <aside> <ul> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Contact</a></li> </ul> </aside> <small>Copyright © PICKUP STREAM</small> </footer> </section> <script type="text/javascript"> </script></body> </html>
【style.css】
@charset "UTF-8"; * { margin:0; padding:0; } li { list-style-type:none; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } section { width:960px; margin:10px auto 0; } header { margin-bottom:10px; overflow:hidden; } #headerpost { margin-bottom:30px; } #content { margin-bottom:30px; overflow:hidden; } article { float:left; width:216px; margin-right:32px; margin-bottom:25px; } article:last-child { margin-right:0; } article + article + article + article { margin-right:0; } #headerpost p.more a:hover { color: #FF9; } article img { width:216px; height:auto; vertical-align:bottom; border:none; } article h2 { font-size:16px; margin:5px 0 0; } article p { font-size:12px; margin:10px 0; } article .date { float:left; } article .more_s { font-family: "Maven Pro", Helvetica, Arial, sans-serif; float:right; color:#333; font-size:14px; background-color:#FC0; padding:1px 5px; } article a { color:#000; text-decoration:none; display:block; overflow:hidden; } article a:hover { background-color:#FFC; } #site { float:left; } #site img { vertical-align:bottom; } nav { float:right; font-size:22px; padding-top:30px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; } nav li { float:left; } nav li a { display:block; float:left; margin-left:20px; text-decoration:none; border-bottom:4px solid transparent; color:#000; } nav li a:hover { border-bottom-color:#FC3; } #headerpost img { float:left; vertical-align:bottom; } #lead { float:left; width:300px; color:#fff; margin-left:25px; overflow:hidden; } #headerpost h2 { margin:20px 0; } #headerpost .more { font-size:18px; text-align:right; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; } #headerpost .more a { color:#fff; display:block; padding:10px 0 10px 0; text-decoration:none; } #headerpost { background-color:#333; background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#888)); background:-webkit-gradient(#000 0%,#888 100%); background:-moz-gradient(#000 0%,#888 100%); background:-o-gradient(#000 0%,#888 100%); background:-ms-gradient(#000 0%,#888 100%); background:linear-gradient(#000 0%,#888 100%); overflow:hidden; } footer { color:#fff; background-color:#333; padding:10px 10px 20px; font-family: 'Maven Pro', Helvetica, Arial, sans-serif; } footer p { float:left; } #socialicon { float:right; } #socialicon ul { padding:3px 0 0; } #socialicon li { display:inline; } #socialicon img { border:none; } aside { clear:both; } aside ul { margin:10px 0; padding:3px 0 0; font-size:12px; } aside li { display:inline; } aside a { color:#FFC; font-weight:bold; border-right:1px solid #fff; padding-right:6px; margin-right:3px; text-decoration:none; } aside a:hover { color: #FF9; } aside li:last-child a { border:none; } aside li + li + li a { border:none; } small { font-size:12px; font-weight:bold; display:block; } @media only screen and (min-width:600px) and (max-width:959px){ section { width:620px; } article { width:300px; margin-right:20px; } article:nth-child(even){ margin-right:0; } article img { width:300px; } article h2 { font-size:18px; } article p { font-size:16px; } article .more_s { font-size:18px; } nav { padding-top:0; } nav li:nth-child(2){ float:none; overflow:hidden; } #headerpost { position:relative; } #headerpost img { float:none; } #lead { float:none; position:absolute; left:-25px; bottom:0; background-color:rgba(0,0,0,0.7); width:auto; padding:10px 20px; } #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 0 0; } } @media only screen and (max-width:599px){ section { width:300px; } article { float:none; width:300px; margin-right:0; } article img { width:300px; } article h2 { font-size:22px; } article p { font-size:16px; } article .more_s { font-size:18px; } #site { float:none; } #site img { width:300px; height:auto; } nav { float:none; font-size:14px; padding-top:6px; } nav ul li a { margin-right:10px; margin-left:0; } #headerpost img { float:none; width:300px; height:auto; } #lead { float:none; background-color:#252525; padding:10px 10px; margin:0; width:280px; } #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 0 0; } nav li a:hover { border-bottom: 3px solid #FC3; } article .post_inner { height:0; -webkit-transition:0.5s height; -moz-transition:0.5s height; -o-transition:0.5s height; transition:0.5s height; overflow:hidden; } article:target .post_inner { height: 400px; } article { paddimg-top:10px; margin-bottom:5px; } article h2 { font-size:16px; border:1px solid #CCC; border-radius:2px; background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#aaa)); background:-webkit-gradient(#fff 0%,#aaa 100%); background:-moz-gradient(#fff 0%,#aaa 100%); background:-o-gradient(#fff 0%,#aaa 100%); background:-ms-gradient(#fff 0%,#aaa 100%); background:linear-gradient(#fff 0%,#aaa 100%); marin-bottom:5px; } article h2 a { padding:5px 5px 5px 30px; background-image:url(); backgorund-position:; background-repeat:no-repeat; } article h2 a:hover { background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccc)); background:-webkit-gradient(#fff 0%,#ccc 100%); background:-moz-gradient(#fff 0%,#ccc 100%); background:-o-gradient(#fff 0%,#ccc 100%); background:-ms-gradient(#fff 0%,#ccc 100%); background:linear-gradient(#fff 0%,#ccc 100%); marin-bottom:5px; } article:target h2 a { background-image:url(); } article h2 a:hover{ background-color:transparent; } #headerpost { -webkit-animation:fadein 5s; -moz-animation:fadein 5s; -o-animation:fadein 5s; -ms-animation:fadein 5s; } @-webkit-keyframes fadein { 0%{opacity:0;} 100%{opacity:1;} } @-moz-keyframes fadein { 0%{opacity:0;} 100%{opacity:1;} } @-o-keyframes fadein { 0%{opacity:0;} 100%{opacity:1;} } @-ms-keyframes fadein { 0%{opacity:0;} 100%{opacity:1;} } }