CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版)
先日作成した「CSS3メディアクエリを使った固定レイアウト - ウェブ学のすすめ」のメニューをコンパクトにしたバーションです。CSS3のtransitionとtargetを使用し、メニューを折りたたみタップすることで内容が見えるようになっています。
※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利いていません。
プレビュー
↓別ウィンドウを開いて見る
CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版) - js do it
※おすすめQRコード読み取りアプリ
最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格: 無料
コード
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="style.css"> <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="http://jsrun.it/assets/y/2/s/u/y2su3.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="http://webgaku.biz/images/headerpost.jpg" alt=""> <div id="lead"> <h2>買い物に出掛けよう</h2> <p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。1か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p> <p class="date">2012年8月3日</p> <p class="more"><a href="#">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="http://jsrun.it/assets/7/N/K/R/7NKRx.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="http://jsrun.it/assets/y/p/T/a/ypTar.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="http://jsrun.it/assets/1/8/z/b/18zbQ.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="http://jsrun.it/assets/x/a/M/K/xaMKx.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="http://jsrun.it/assets/s/g/O/l/sgOlw.png" alt="Twitter"></a></li> <li><a href="#"><img src="http://jsrun.it/assets/u/h/q/Z/uhqZh.png" alt="Facebook"></a></li> <li><a href="#"><img src="http://jsrun.it/assets/t/1/n/v/t1nvX.png" alt="Google Plus"></a></li> <li><a href="#"><img src="http://jsrun.it/assets/x/A/b/n/xAbn4.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> </body> </html>
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; } 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:#fff; font-size:14px; background-color:#666; background-image:url(http://jsrun.it/assets/e/D/g/A/eDgAo.png); background-repeat:no-repeat; background-position:94% 50%; padding:3px 25px 3px 5px; } article a { color:#000; text-decoration:none; display:block; overflow:hidden; } article a:hover { background-color:#cfffb2; } #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:5px solid transparent; color:#000; } nav li a:hover { border-bottom-color:#ff1e97; } #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; background-image:url(http://jsrun.it/assets/m/D/x/j/mDxjm.png); background-repeat:no-repeat; background-position:right center; display:block; padding:10px 40px 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:#ff1e97; font-weight:bold; border-right:1px solid #fff; padding-right:6px; margin-right:3px; text-decoration:none; } 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:22px; } 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; } 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 #aaa; border-radius:5px; background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee)); background:-webkit-gradient(#fff 0%,#eee 100%); background:-moz-gradient(#fff 0%,#eee 100%); background:-o-gradient(#fff 0%,#eee 100%); background:-ms-gradient(#fff 0%,#eee 100%); background:linear-gradient(#fff 0%,#eee 100%); marin-bottom:5px; } article h2 a { padding:5px 5px 5px 30px; background-image:url(); backgorund-position:; background-repeat:no-repeat; } 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;} } }