ウェブ学のすすめ

Study of Web Design & Programing

CSS3メディアクエリを使った固定レイアウト

Smartphone

昨日はパーセント指定でウィンドウサイズを変更するにつれて可変するレイアウトを作りましたが、今日は画面サイズによって固定したレイアウトが表示されるデモサイトを作成しました。

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

プレビュー


↓別ウィンドウを開いて見る
CSS3メディアクエリを使った固定レイアウト - js do it

↓QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 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>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。１か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p>
<p class="date">2012年8月3日</p>
<p class="more"><a href="#">MORE</a></p>
</div>
</div>
<div id="content">
<article>
<a href="#">
<img src="http://jsrun.it/assets/7/N/K/R/7NKRx.jpg" alt="">
<h2>風車と風の関係</h2>
<p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p>
<p class="date">2012年8月1日</p>
<p class="more_s">MORE</p>
</a>
</article>
<article>
<a href="#">
<img src="http://jsrun.it/assets/y/p/T/a/ypTar.jpg" alt="">
<h2>ツルを伸ばしてどこまでも</h2>
<p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p>
<p class="date">2012年7月28日</p>
<p class="more_s">MORE</p>
</a>
</article>
<article>
<a href="#">
<img src="http://jsrun.it/assets/1/8/z/b/18zbQ.jpg" alt="">
<h2>海岸のデコレーション</h2>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p>
<p class="date">2012年7月20日</p>
<p class="more_s">MORE</p>
</a>
</article>
<article>
<a href="#">
<img src="http://jsrun.it/assets/x/a/M/K/xaMKx.jpg" alt="">
<h2>色とりどりの絨毯</h2>
<p>原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p>
<p class="date">2012年7月5日</p>
<p class="more_s">MORE</p>
</a>
</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 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;
}
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:suto;
	}
	#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;
	}
			
}