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

PC用、タブレット用は固定レイアウトですが、スマートフォンでは可変レイアウトになるデザインを作成しました。広告の部分はAmazon アソシエイトからお買い得のスマホ用品を表示しています。

※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利いていません。
※スマートフォンからはAmazonのウィジェットが表示されません。

プレビュー

↓別ウィンドウを開いて見る

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>可変レイアウト+固定レイアウト</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>
<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>
<div id="site">
<h1>PICKUP<span>STREAM</span></h1>
<p>Comfort, Delightful, Refreshing Time Produce</p>
</div>
</header>
<div id="content">
<article>
<a href="">    
<div class="date"><span>1</span>AUG</div> 
<h2>風車と風の関係</h2>    
<p><img src="http://jsrun.it/assets/7/N/K/R/7NKRx.jpg" alt="">
風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません。そのため、風車は首が回るようになっており、常に真正面から風を受けることができるようになっています。この…</p>
<p class="more">READ MORE></p>
</a>
</article>
<article>
<a href="">
<div class="date"><span>28</span>JUL</div> 
<h2>海岸のデコレーション</h2>    
<p><img src="http://jsrun.it/assets/y/p/T/a/ypTar.jpg" alt="">
海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。…</p>
<p class="more">READ MORE</p>
</a>
</article>
<article>
<a href="">
<div class="date"><span>12</span>JUL</div> 
<h2>ツルを伸ばしてどこまでも</h2>    
<p><img src="http://jsrun.it/assets/1/8/z/b/18zbQ.jpg" alt="">
ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていくたくましさは見習いたいものです。遠くから見ると細く見えるツルも、近くで見ると意外と太く、簡単に切ることは…</p>
<p class="more">READ MORE</p>
</a>
</article>
<article>
<a href="">
<div class="date"><span>5</span>JUL</div> 
<h2>色とりどりの絨毯</h2>    
<p><img src="http://jsrun.it/assets/x/a/M/K/xaMKx.jpg" alt="">
原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には多くの人が訪れ、花を楽しんでいます。花の見ごろは来週半ばごろまで続くそうですので、時間を作って行ってみ…</p>
<p class="more">READ MORE</p>
</a>
</article>    
</div>
<aside id="ad">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_7f215386-a83a-4a77-982a-8932ea2a20e9"  WIDTH="300px" HEIGHT="250px"> <PARAM NAME="movie" VALUE="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fapplogy-22%2F8009%2F7f215386-a83a-4a77-982a-8932ea2a20e9&Operation=GetDisplayTemplate"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#FFFFFF"><PARAM NAME="allowscriptaccess" VALUE="always"><embed src="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fapplogy-22%2F8009%2F7f215386-a83a-4a77-982a-8932ea2a20e9&Operation=GetDisplayTemplate" id="Player_7f215386-a83a-4a77-982a-8932ea2a20e9" quality="high" bgcolor="#ffffff" name="Player_7f215386-a83a-4a77-982a-8932ea2a20e9" allowscriptaccess="always"  type="application/x-shockwave-flash" align="middle" height="250px" width="300px"></embed></OBJECT> <NOSCRIPT><A HREF="http://ws.amazon.co.jp/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Fapplogy-22%2F8009%2F7f215386-a83a-4a77-982a-8932ea2a20e9&Operation=NoScript">Amazon.co.jp ウィジェット</A></NOSCRIPT>
</aside>
<aside class="menu">
<h2>CATEGORIES</h2>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地下</a></li>    
</ul>
</aside>
<aside class="menu">
<h2>RECENT POSTS</h2>
<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>PICKUPxSTREAM</p>
<small>Copyright &copy; PICKUP STREAM</small>
</footer>
</section>
</body>
</html>

CSS

@charset "utf-8";

body, section, header, article, aside, nav, footer, #content, 
.menu, #ad, ul, li, h1, h2, small, p, a, img, span {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
body {
	font-family:
		"ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, 
		Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		sans-serif;
    background-color:#fff;
}
section {
	width:960px;
	margin:0 auto;
}
header {
    width:960px;
    height:280px;
    margin:0 0 20px;
    background-color:#EEF3FF;
    background-image:url(http://webgaku.biz/images/header01.jpg);
    background-position:left bottom;
    box-shadow:3px 3px 3px #ccc;
}
#content {
    width:630px;
    float:left;
}
aside {
    width:300px;
    float:right;
}
footer {
    clear:both;
    box-shadow:3px 3px 3px #ccc;
}
nav {
    font-size:14px;
    font-family:
        'Maven Pro',
        Helvetica,
        Arial,
        sans-serif;
    overflow:hidden;
    background-color:#000;
}
nav li {
    float:left;
    width:120px;
    font-weight:bold;
}
nav li a {
    border-right:1px solid #fff;
    text-align:center;
    padding:5px 0;
    color:#fff;
    display:block;
    text-decoration:none;
}
nav li a:hover {
    background-color:#63a2c6;
}

#site {
    font-family:
        'Maven Pro',
        Helvetica,
        Arial,
        sans-serif;
    background:rgba(255,255,255,0.5);
    display:inline-block;
    padding:10px 20px;
    margin-top:30px;
    -webkit-animation-name: translateX;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:1; 
}
@-webkit-keyframes translateX {
    0%{-webkit-transform:translate(960px);}
    100%{-webkit-transform:translate(0);}
}
#site h1 {
    font-size:50px;
    line-height:1;
}
#site h1 span {
    font-weight:normal;
}
#site p {
    font-size:16px;
}
.date {
    float:left;
    background-color:#537685;
    padding:5px 15px 8px;
    margin:0 10px 5px 0;
    text-align:center;
    font-family:
        'Maven Pro',
        Helvetica,
        Arial,
        sans-serif;
    font-weight:bold;
    fonr-size:14px;
    color:#fff;
    border-radius:4px;
}
.date span {
    display:block;
    font-size:20px;
    line-height:1;
}
article h2 {
    font-size:22px;
    border-bottom:1px solid #aaa;
    margin:6px 0 15px;
    padding:0 0 3px;
}
article p img {
    float:left;
    margin-right:10px;
    clear:left;
    box-shadow:3px 3px 1px #333;
}
article p {
    font-size:14px;
    line-height:1.6;
    clear:left;
}
article .more {
    background-image:url(http://jsrun.it/assets/e/D/g/A/eDgAo.png);
    background-repeat:no-repeat;
    background-position:center right;
    text-align:right;
    padding-right:30px;
    color:#888;
    clear:none;
}
article {
    border:1px solid #aaa;
    margin:0 0 20px 0;
    box-shadow:3px 3px 3px #ccc; 
}
article a {
    display:block;
    padding:10px;
    overflow:hidden;
    color:#000;
    text-decoration:none;
}
article a:hover {
    background-color:#ddd;
    background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddd));
    background:-webkit-linear-gradient(#fff 0%,#ddd 100%);
    background:-moz-linear-gradient(#fff 0%,#ddd 100%);
    background:-o-linear-gradient(#fff 0%,#ddd 100%);
    background:-ms-linear-gradient(#fff 0%,#ddd 100%);
    background:-linear-gradient(#fff 0%,#ddd 100%);
}
#ad {
    margin:0 0 20px;
    }
#ad img {
    width:300px;
    height:250px;
}
.menu {
    float:right;
    width:300px;
    background-color:#537685;
    margin:0 0 20px;
    box-shadow:3px 3px 3px #ccc;
}
.menu h2 {
    font-family:
        'Maven Pro',
        Helvetica,
        Arial,
        sans-serif;
    font-size:22px;
    font-weight:normal;
    color:#fff;
    padding:10px;
}
.menu ul {
    border-top:1px solid #aaa;
}
.menu li {
    border-bottom:1px solid #aaa;
}
.menu li a {
    display:block;
    font-size:14px;
    text-decoration:none;
    color:#fff;
    padding:10px;
}
.menu li a:hover {
    background-color:#63a2c6;
}
footer {
    font-family:
        'Maven Pro',
        Helvetica,
        Arial,
        sans-serif;
    color:#fff;
    background-color:#000;
    padding:10px 10px 20px;
}
footer small {
    font-size:12px;
    font-weight:bold;
    display:block;
}

@media only screen and (min-width:600px) and (max-width:959px){
    section {
        width:650px;
    }
    header {
        width:650px;
        height:300px;
        background-size:100% 300px;
    }
    nav li {
        width:120px;
        font-size:12px;
    }
    #site {
        -webkit-animation-name: translateX;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count:1; 
    }
    @-webkit-keyframes translateX {
        0%{-webkit-transform:translate(650px);}
        100%{-webkit-transform:translate(0);}
    }
    #content {
        width:320px;
        margin-right:20px;
    }
    article:nth-child(even){
        margin-right:0;
    }
    article img {
        float:left;
        width:150px;
        height:auto;
        margin:0 5px 2px 0;
    }
    article h2 {
        font-size:18px;
    }
    article p {
        font-size:16px;
    }
    article .more {
        font-size:18px;
    }
}

@media only screen and (max-width:599px){
    section {
        width:100%;
        float:none;
    }
    header {
        width:100%;
        height:150px;
        text-align:center;
        background-size:100% 150px;
    }
    nav li {
        width:24%;
        font-size:12px;
    }
    nav li:last-child {
        border:none;
        
    }
    #site {
        margin:0;
        text-align:center;
        -webkit-animation-name: translateY;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count:1;
    }
    @-webkit-keyframes translateY {
        0%{-webkit-transform:translate(0,-60px);}
        100%{-webkit-transform:translate(0,0);}
    }
    #site h1 {
        font-size:30px;
    }
    #site p {
        font-size:12px;
    }
    #content {
        width:100%;
        float:none;
    }
    .date {
        padding:2px 6px;
        fonr-size:10px;
    }
    .date span {
        font-size:14px;
    }
    article h2 {
        font-size:18px;
        margin:6px 0 15px;
        padding-bottom:6px;
    }
    article p img {
        float:left;
        width:150px;
        height:auto;
    }
    article p {
        font-size:14px;
    }
    aside {
        width:100%;
        float:none;
    }
    #ad {
        width:100%;
        margin:20px 0;
        text-align:center;
    }
    .menu {
        width:100%;
        float:none;
    }
    footer {
        width:100%;
        padding:0; 
    }
    footer p {
        padding:10px;
    }
    footer small {
        padding:0 10px 10px;
    }
    
}

ウェブ学のすすめ

Study of Web Design & Programing

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

プレビュー

コード

HTML

CSS