可変レイアウト：レイアウトの設定

画面サイズごとのデザイン

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>html5 + css3</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style-s.css"media="only screen and (max-width:599px)">
<link rel="stylesheet" href="style-m.css" media="only screen and (min-width: 600px)and(max-width: 979px)">
<link rel="stylesheet" href="style-l.css" type="text/css" media="screen.print">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:900,400">
</head>

<body>
<section id="main">
    <header>
       <section id="title">
<h1><img src="https://lh4.googleusercontent.com/-aetAvlciFMM/UE3KkDEuaNI/AAAAAAAABVE/C4wdOHo3oe4/s16/music05-007.gif" width="50" height="50" alt="PICKUP STREAM">PICKUP STREAM</h1>
       </section><!--#titile-->
       
<section id="icon"><!--#icon-->
<ul>
<li><a href="#"><img src="https://lh4.googleusercontent.com/-c7rw4BpKaUA/UE3A5OXa40I/AAAAAAAABT0/z8n4xKNCnuY/s512/Twitter_512x512.png" width="23" height="23" alt="twitter">twitter</a></li>
<li><a href="#"><img src="https://lh4.googleusercontent.com/-2MU7HnbUmfc/UE3A5ENuxBI/AAAAAAAABTs/nPZZ8ZS411Y/s512/facebook.png" width="25" height="25" alt="facebook" >facebook</a></li>
<li><a href="#"><img src="https://lh4.googleusercontent.com/-rliReqTBqNk/UE3A5Pyi4bI/AAAAAAAABTw/4TEEP_NWzbk/s300/google_plus_logo.png" width="25" height="25" alt="google plus">google plus</a></li>
<li><a href="#"><img src="https://lh6.googleusercontent.com/-iC2BvY4MeFE/UE3A53sx6_I/AAAAAAAABT4/4977gfLtuTI/s225/images.jpg" width="20" height="20" alt="rss">RSS</a></li>
</ul>
</section><!--#icon-->

<caption class="headerimg">
<img  src="https://lh3.googleusercontent.com/-YqEnG5TVDEw/UE2_V4hSs_I/AAAAAAAABTc/G-3EGCf4Hlg/s640/futta2861.jpg" width="960" height="180" alt="">
</caption><!--headerimg-->

<nav class="menu1"><!--.menu1-->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTENT</a></li>
</ul>
</nav><!--.menu1-->
</header><!--header-->

<article id="content"><!--content-->
<section class="date">
<span>1</span>AUG
</section><!--.date-->
<h2>文章のタイトル</h2>

<section class="cat">
CATEGORY: <a href="#">海と海岸と空</a>
</section><!--category-->

<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p><img src="https://lh3.googleusercontent.com/-iKg_mlXT7nw/UE2_WKjJnLI/AAAAAAAABTg/ZfF1TBxKEEo/s640/futta0574.jpg" width="550" height="300" alt="深海のガラスの結晶画像"></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</article><!--.content-->
<aside>
<section class="side">
<h3>CATEGORIES</h3>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地下</a></li>
</ul>
</section><!--.side-->
<section class="subside">
<h3>RECENT POSTS</h3>
<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>
</section><!--.subside-->
</aside>
<footer>
<p>PICKUP STREAM</p>
<small>copyright &copy: PICKUP STREAM, all rught reserved.</small>
</footer>
</section><!--main-->
</body>
</html>

style-l.css

@charset="UTF-8";

body{
	  margin: 24px 10px;
		font-family: 
		       "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
@media only screen and (min-width: 600px)and(max-width: 979px){
     #main{
			     width: 100%;
			}	
}
@media only screen and (max-width: 599px){
     #main{
			     width: 100%;
			}	
}

#main{
	  width: 960px;
		margin: auto;
}
header{
	   margin: 0 0 50px;
}

#content{
	  width: 600px;
		float: left;
		margin: 0 0 50px;
}
aside{
	  width: 300px;
		float: left;
		margin: 0 0 50px;
}
footer{
	  clear: both;
}

#title{
	 float: left;
}
#title h1{
	  margin: 0;
		line-height: 1;
}

#icon{
	   float: right;
		 text-align: right;
}
#icon ul{
	  margin: 0;
		padding: 3px 0 0;
}
#icon li{
	   display: inline;
		list-style-type: none;
}
#icon img{
	  border: none;
}
#headerimg img{
	   vertical-align: bottom;
}

nav{
	  font-family: Verdana, Geneva, sans-serif;
		font-size: 14px;
		overflow: hidden;
		border-top: solid 1px #fff;
		background-color: #000;
}
nav ul{
	  margin: 0;
		padding: 0;
}
nav li {
	  list-style-type: none;
		float: left;
}

nav li a {
	   display: block;
		 width: 120px;
		 padding: 6px 0;
		 border-right: solid 1px #fff;
		 color: #fff;
		 text-align: center;
		 text-decoration: none;
}
nav li a: hover{
	   background-color: #0097d8;
}

.date{
	   float: right;
		 background-color: #0097d8;
		 padding: 8px 22px;
		 border-radius: 55px/48px;
		 text-align: center;
		 font-family: Arial, Helvetica, sans-serif;
		 font-weight: bold;
		 color: #fff;
}
.date span{
	  display: block;
		font-size: 32px;
		line-height: 1.0;
}
#content h2{
	  font-size: 28px;
		border-bottom: solid 1px #aaa;
		margin: 0 0 6px;
		padding: 0 0 3px;
}
.cat{
	   font-size: 14px;
		 color: #666;
}
.cat a{
	   text-decoration: none;
		 color: #666;
}
#content p{
	   line-height: 1.6;
}
.subside{
	  margin-bottom: 50px;
}
.subside h3{
	font-family:"Arial Black", Gadget, sans-serif;
	   font-size: 26px;
		color: #66c1e8;
		margin: 0 0 5px;
}
.subside ul{
	   margin: 0;
		 padding: 0;
		 border-top: solid 1px #aaa;
}
.subside li{
	margin-bottom: 0;
	list-style-type: none;
	border-bottom: solid 1px #aaa;
}
.subside li a{
	  display: block;
		font-size: 14px;
		text-decoration: none;
		color: #666;
		padding: 10px 0 10px 20px;
		backgournd-image: url();
		background-repeat: no-repeat;
		background-position: 0 50%;
}
.subside li a: hover{
	   background-color: #b4f0ff;
}

footer{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color: #fff;
	background-color: #000;
	padding: 10px 10px 20px;
}
footer p{
	  margin: 0;
}
footer{
	  font-size: 12px;
		font-weight: bold;
		display: block;
}

Captcha