支援訓練 81日目 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>sample1</title>
<!--[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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>

<body>
<div id="stage">
<header id="header">
<h1>Media Queries</h1>
</header>
<nav id="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="contents_menu cf">
<section id="contents_menu1">
<h1>Contents Menu1</h1>
</section>
<section id="contents_menu2">
<h1>Contents Menu2</h1>
</section>
</aside>

<article class="main">

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

<footer id="footer">
<small>&copy;  2013 Webデザインの勉強</small>
</footer>
</div>
</body>
</html>

@charset "UTF-8";
/* CSS Document */

/* 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, 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;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
}

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

ins {
  background-color: #BBE3D7;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #BBE3D7;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], 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 #CCCCCC;
  margin: 1em 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.5em;
  background-color: #FFF;
}
header {
  text-align: center;
  padding-left: 6%;
  background-color:#333333;
}
header h1 {
  font-size:2.3em;
  padding: 0.4em 0 0.4em 0;
  margin: 0 0 0.2em;
  color: #FFF;
}
nav {
  margin: 0;
  background-color: #009966;
}
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;
}
#contents {
  width: 80%;
  margin: 1em auto 1em;
}
#contents h1 {
  font-weight: bold;
}
section {
  margin: 0 0 1em 0;
}
aside > section {
  height: 130px;
  background-color:#33CC00;
  padding: 15px 0 0 20px;
}
article > section {
  border-bottom: 1px solid #ccc;
}
footer {
  width: 100%;
  text-align: center;
}

/* Media Queriesによる切り替え */

/* タブレット向けのスタイル: 481px ～ 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:25%;
      margin: 0;
      text-align: center;
      line-height: 3.0em;
      border-left: 1px solid #fff;
      border-right: 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: 760px) {
    article.main {
      width:65%;
      float: right;
    }
    aside.contents_menu {
      width: 30%;
      float: left;
    }
    aside.contents_menu ul li {
      font-size: 1.1em;
    }
    #contents_menu1, #contents_menu2 {
      width:95%;
      float:none;
    }
}