ウェブ学のすすめ

Study of Web Design & Programing

CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版)

先日作成した「CSS3メディアクエリを使った固定レイアウト - ウェブ学のすすめ」のメニューをコンパクトにしたバーションです。CSS3のtransitionとtargetを使用し、メニューを折りたたみタップすることで内容が見えるようになっています。

※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利いていません。

プレビュー


↓別ウィンドウを開いて見る
CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版) - js do it

QRコード

※おすすめ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 &copy; 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;}
    }
}