レスポンシブデザイン

HTML5

http://efgraphics.net/71lesson/1030_mediaquery2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Media Query レスポンシブデザイン</title>
<link rel="stylesheet" href="css/1030_style2.css" media="screen">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header id="header">
<div id="headerLogo">
<h1><span class="hidden">PICKUP STREAM</span></h1>
<ul class="social">
    <li><a href="#"><img src="1030_img/twitter.png" alt="Twitter"></a></li>
    <li><a href="#"><img src="1030_img/facebook.png" alt="Facebook"></a></li>
    <li><a href="#"><img src="1030_img/googleplus.png" alt="googleplus"></a></li>
    <li><a href="#"><img src="1030_img/rss.png" alt="RSS"></a></li>
  </ul>
  </div><!--/#headerLogo-->
<div id="headerPhoto">
<figure><img src="1030_img/header.jpg" alt="Header Photo"></figure>
</div>
<nav>
  <ul class="globalNav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>
</header>
<div id="content" class="cf">
<article>
<div class="title">
<ul class="day">
<li class="date">1</li>
<li class="month">AUG</li>
</ul>
<h2>海岸のデコレーション</h2>
<p class="cadegory">CATEGORY: 海と海岸と空</p>
</div>
<div class="sentence">
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p class="photo"><img src="1030_img/sand.jpg" alt=""></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</div>
</article>

<aside>
<section class="sidebar">
<dl>
<dt>CATEGORIES</dt>
<dd>山と森林</dd>
<dd>海と海岸と空</dd>
<dd>都市と建築</dd>
<dd>地下</dd>
</dl>
</section>
<section class="sidebar">
<dl>
<dt>RECENT POSTS</dt>
<dd>海岸のデコレーション</dd>
<dd>風車と海風の関係</dd>
<dd>ツルを伸ばしてどこまでも</dd>
<dd>色とりどりの絨毯</dd>
<dd>休日に買い物にいくなら</dd>
<dd>高層ビルと風の関係</dd>
</dl>
</section>
</aside>
</div><!--/#content-->
</div><!--/#container-->
<footer>
<p>PICKUP STREAM</p>
<small>Copyright&copy; PICKUP STREAM, all rights reserved.</small>
</footer>
</body>
</html>

@charset "UTF-8";
/* CSS reset */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }

body, div, h1, h2, h3, p, img, small, ul, li, dl, dt, dd, article, aside, header, footer,nav, figure {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  vartical-align: middle;
}
span.hidden {
  visibility: hidden;
}
/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/*Common*/
body {
  color: #333;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  background: #FFF;
}
p {
  line-height: 1.5;
}
a {
  color: #333;
}
img {
  max-width: 100%;
}
/* 共通およびスマートフォン */
header {
  margin-top: 1em;
  margin-bottom: 2em;
}
header h1 {
  width: 360px;
  height: 39px;
  display: block;
  background: url(../1030_img/logo.png) no-repeat;
  margin-bottom: 0.2em;
}
ul.social {
  overflow: hidden;
  margin-bottom: 0.2em;
}
ul.social li{
  float: left;
  display: inline;
  margin-left: 5px;
}
ul.globalNav {
  width: 100%;
  background: #000;
}
ul.globalNav li a {
  color: #FFF;
  text-align: center;
  font-size: 0.9em;
  line-height: 2em;
  display: block;
  border-bottom: 1px solid #FFF;
}
.title {
  margin-bottom: 1.25em;
  overflow: hidden;
}
.title h2 {
  font-size: 1.8em;
  color: #000;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #888;
  margin-bottom: 0.3em;
}
p.cadegory {
  color: #666;
  font-size:0.9em;
}
ul.day {
  float: right;
  display: inline;
  margin-top: 0.5em;
  background: #00A0D6;
  width: 70px;
  height: 60px;
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%;

  text-align: center;
  color: #FFF;
  line-height: 1.1;
}
li.date {
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.75em;
  font-weight: bold;
  padding-top: 6px;
}
li.month {
  font-family: Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight: bold;
}

.sentence p{
  margin-bottom: 1.5em;
}

aside section.sidebar {
  margin-bottom: 2em;
}
aside section.sidebar {
  margin-bottom: 1,5em;
}
aside section.sidebar dl {
}
aside section.sidebar dl dt{
  font-size:1.5em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #58BADF;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #888;
}
aside section.sidebar dl dd{
  font-size:0.85em;
  color: #888;
  line-height: 1.5em;
  border-bottom: 1px solid #888;
  background: url(../1030_img/listmark.png) no-repeat 0 10px;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  padding-left: 18px;
}
footer {
  width: 100%;
  background: #000;
  color: #FFF;
  padding: 1em;
}
footer.p {
  font-size: 0.8em;
}
footer small {
  font-size: 0.65em;
}

/*  Media Queries による切り替え */
/* タブレット向けのスタイル：481px~768px */
@media only screen and (min-width: 481px) {
header {
  overflow: hidden;
}
header h1 {
  float: left
}
ul.social {
  float: right;
}
ul.globalNav {
  overflow: hidden;
}
ul.globalNav li a{
  float: left;
  display: inline;
}
ul.globalNav li a{
  display: block;
  padding: 2px 3em 0 3em;
  line-height: 2;
  border-right: 1px solid #FFF;
  border-bottom: none;
}
#container {
  max-width: 960px;
  margin: 0 auto;
}
#content {
  overflow: hidden;
}
article {
  float: left;
  width: 60%;
}
aside {
  float: right;
  width: 30%;
}
}