ウェブ学のすすめ

Study of Web Design & Programing

可変レイアウトデモサイト「PICKUP STREAM」

CSS

CSS3のメディアクエリを使用して可変レイアウトのデモサイトを作りました。外部スタイルシートに記述するのではなく、スタイルシートの中に@media規則でメディアクエリを記述してします。

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

プレビュー


↓別ウィンドウを開いて見る
可変レイアウトデモサイト「PICKUP STREAM」 - js do it

↓QRコード

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

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格： 無料

ポイント

スタイルシート内に設定を記述する場合
@media only メディアタイプ and (特性) and (特性){
       スタイルシートの記述
}

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>PICKUP STREAM</title>
</head>
<body>
<section>
<header>
<div id="site">
<h1><a href="#"><img src="http://jsrun.it/assets/4/7/A/Q/47AQA.png" alt="PICKUP STREAM"></a></h1>
</div>
<div id="socialicon">
<li><a href="#"><img src="http://jsrun.it/assets/a/X/X/z/aXXzK.png" alt="Twitter"></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/f/U/V/J/fUVJW.png" alt="Facebook"></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/z/o/3/Z/zo3ZY.png" alt="Google Plus"></a></li>
<li><a href="#"><img src="http://jsrun.it/assets/w/u/G/O/wuGOl.png" alt="RSS Feed"></a></li>
</div>
<figure>
<img src="http://jsrun.it/assets/4/j/T/a/4jTal.jpg" alt="">
</figure>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<article>
<div class="date"><span>1</span>AUG</div> 
<header>
<h1>海岸のデコレーション</h1>
<div class="cate">CATEGORY：<a href="#">海と海岸と空</a></div>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>

<figure>
<img src="http://jsrun.it/assets/d/t/M/o/dtMoS.jpg" alt="">
</figure>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>

</header>
</article>


<aside>
<h1>CATEGORIES</h1>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地下</a></li>
</ul>
</aside>
<aside>
<h1>RECENT POSTS</h1>
<ul>
<li><a href="#">海岸のデコレーション</a></li>
<li><a href="#">風車と海風の関係</a></li>
<li><a href="#">ツルを伸ばしてどこまでも</a></li>
<li><a href="#">色とりどりの絨毯</a></li>
<li><a href="#">休日に買い物にいくなら</a></li>
<li><a href="#">高層ビルと風の関係</a></li>
</ul>
</aside>

<footer>
<p>PICKUP STREAM</p>
<small>Copyright &copy; PICKUP STREAM,all rights reserved</small>
</footer>
</section>
</body>
</html>
CSS
@charset "utf-8";

/* reset */
* {
	margin:0;
	padding:0;
}
li{
	list-style-type:none;
}
img {
	border:none;
}

body {
	font-family:
	"ヒラギノ角ゴ Pro W3", 
	"Hiragino Kaku Gothic Pro", 
	"メイリオ", 
	Meiryo, 
	Osaka, 
	"ＭＳ Ｐゴシック", 
	"MS PGothic", 
	sans-serif;
}

section {
	width:960px;
	margin:30px auto 0;
}

/* header */
header {
	margin:0 0 50px;
}
#site {
	float:left;
}
#site h1 {
	line-height:1;
    margin-bottom:10px;
}
#site h1 a:hover img {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 2s;
	-webkit-transform:rotate(360deg);
}

/* #socialicon */
#socialicon {
	float:right;
	text-align:right;
}
#socialicon ul {
	padding:3px 0 0;
}
#socialicon li {
	display:inline;
}

#socialicon li a img {
	background:none!important;
}
#socialicon li a:hover img {
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	background:none!important;
}

/* nav */
nav {
	overflow:hidden;
	border-top:1px solid #fff;
	background-color:#000;
	box-shadow:3px 3px 3px #333;
}
nav li {
	float:left;
}
nav li a {
	font-size:14px;
	line-height:14px;
	display:block;
	width:120px;
	padding:6px 0;
	border-right:1px solid #fff;
	color:#fff;
	text-align:center;
	text-decoration:none;
	
	-webkit-text-shadow:1px 1px 3px #fff;
	-moz-text-shadow:1px 1px 3px #fff;
	text-shadow:1px 1px 3px #fff;
}
nav li a:hover {
	background-color:#0097d8;
}

/* .date */
.date {
	float:right;
	background-color:#0097d8;
	padding:8px 22px;
	border-radius:55px/48px;
	text-align:center;
	font-weight:bold;
	color:#fff;
}
.date span {
	display:block;
	font-size:32px;
	line-height:1.0;
}

/* article */
article {
	width:600px;
	float:left;
	margin:0 0 50px;
}
article h1 {
	font-size:28px;
	border-bottom:1px solid #aaa;
	margin: 0 0 6px;
	padding:0 0 6px;
}
article img {
	-webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
	-moz-box-shadow: 0 10px 8px -6px #8d8c8c;
	 box-shadow: 0 10px 8px -6px #8d8c8c;
}
article p {
	line-height:1.6;
}

.cate {
	font-size:14px;
	color:#666;
	margin-bottom:10px;
}
.cate a {
	text-decoration:none;
	color:#666;
}

/* aside */
aside {
	width:300px;
	float:right;
	margin:0 0 50px;
}
aside h1 {
	font-size:26px;
	color:#66c1e8;
	margin:0 0 5px;
}
aside ul {
	border-top:1px solid #aaa;
}
aside li {
	border-bottom:1px solid #aaa;
}
aside li a {
	display:block;
	text-decoration:none;
	color:#666;
	padding:10px 0 10px 25px;
	background-image:url(http://jsrun.it/assets/t/X/c/J/tXcJP.png);
	background-repeat:no-repeat;
	background-position:0 50%;
}
aside li a:hover {
	background-color:#b4f0ff;
}

/* footer */
footer {
	clear:both;
	background-color:#000;
	color:#fff;
	padding:10px 10px 50px;
}
footer small {
	font-size:12px;
	font-weight:bold;
	display:block;
}


@media only screen and (min-width:600px) and (max-width:979px){
	section {
		width:100%;
	}
	article {
		width:62.5%;
	}
	aside {
		width:31.25%;
	}
	img {
		max-width:100%;
		height:auto;
	}
}

@media only screen and (max-width:599px){
	section {
		width:100%;
	}
	header {
		margin:0 0 15px;
	}
	article {
		width:100%;
		float:none;
	}
	aside {
		width:100%;
		float:none;
	}
	img {
		max-width:100%;
		height:auto;
	}
	section {
		position:relative;
	}
	#socialicon {
		position:absolute;
		right:8px;
		bottom:6px;
	}
	#site, #socialicon {
		float:none;
	}
	nav li a {
		width:100px;
		pading:5px 0;
		font-size:12px;
	}
	.date {
		float:none;
		font-size:12px;
		line-height:2.5;
		display:inline;
		padding:3px 10px;
		border-radius:5px;
	}
	.date span {
		font-size:12px;
		display:inline;
        margin-right:4px;
	}
	article h1 {
		font-size:24px;
	}
}