レスポンシブwebサイト - web制作学習用ブログ

html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<![endif]-->
<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width">
</head>

<body>
<header>
<h1>Media Queries</h1>
</header>
<nav>
<ul class="cf">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>

<div id="contents" class="cf">
<aside class="content_menu cf">
<section class="content_menu1">
<h1>Contents Menu1</h1>
</section>
<section class="content_menu2">
<h1>Contents Menu2</h1>
</section>
</aside>
<article class="content">
<section class="main">
<h1>2013.10.14</h1>
<p>レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。</p>
</section>
<section class="main">
<h1>2013.10.12</h1>
<p>メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。</p>
</section>
<section class="main">
<h1>2013.09.25</h1>
このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。
</section>
<section class="main">
<h1>2013.09.10</h1>
今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。
</section>
<section class="main">
<h1>2013.09.09</h1>
PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。
</section>
</article>
</div>
<footer>
<small>〓 2013 Webデザインの勉強</small>
</footer>
</body>
</html>

css

@charset "utf-8";
/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
}
body {
  font-family:
 "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
 line-height: 1;
}
ul {
  list-style: none;
}
a {
  text-decoration:none;
}

blockquote:before,blockquote:after,
q:before,qafter{
  content:'';
  content:none;
}

ins {
  background: #bbe3d7;
  color: #333;
  text-decoration: none;
}
mark {
  background: #bbe3d7;
  color: #333;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[tite],dfn[title]{
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 16px 0;
  padding: 0;
}
input,select {
  vertical-align: middle;
}
/*clearfix*/
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* 共通設定およびスマートフォン向けのスタイル */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line_height: 1.5;
  background: #fff;
}
header {
  text-align: center;
  padding-left: 6%;
  background: #333;
}
header h1{
  font-size: 2.3em;
  padding: 0.4em 0 0.4em 0;
  margin: 0 0 0.2em;
  color: #fff;
}
nav {
  margin: 0;
  background: #066;
}
nav ul {
  margin:0;
  padding:0;
}
nav ul li{
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  line-height: 2.0em;
  color: #fff;
  border-bottom: 1px solid #fff;
}
nav ul li a{
  color: #fff;
}
#contents {
  width: 80%;
  margin: 1em auto 1em;
  overflow: hidden;
}
#contents h1 {
  font-weight: bold;
}
section {
  margin: 0 0 1em;
}
aside > section {
  height: 130px;
  background: #33cc00;
  padding: 15px 0 0 20px;
}
article > section {
  border-bottom: 1px solid #ccc;
}
.main h1 {
  color: #069;
}
.main p {
  padding: 10px;
}
footer {
  width:100%;
  text-align: center;
}
/*  Media Queries による切り替え */
/*  タブレット向けスタイル481~768px */
@media only screen and (min-width: 481px) {
nav {
  margin: 0;
  padding: 0 0 0 7%;
}
nav ul {
  padding: 0;
}
nav ul li {
  float: left;
  width: 100px;
  margin: 0;
  text-align:center;
  line-height: 3em;
  border-left: 1px solid #ccc;
  border-bottom: none;
}
.contents_menu1 {
  width: 45%;
  float: left;
}
.contents_menu2 {
  width:45%;
  float:right;
}
}
/* PC向けのスタイル：769px〜960px */
@media only screen and (min-width: 769px) {
article.content {
  width:65%;
  float: right;
}
aside.content_menu {
  width: 30%;
  float: left;
}
aside.content_menu ul li {
  font-size: 1.1em;
}
.contents_menu1,.contents_menu2 {
  width: 95%;
  float: left;
}
}

完成サイトはこちら
http://portfolio.tank.jp/responsive2/