HTML5


html5では意味のあるタグしか使わない。例外としてdivがある。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>html5レイアウト</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
  <header>
    <h1>HTML5の使い所</h1>
    <p>W3Cの勧告までカウントダウン！さてIEは追従できるか否か！？</p>
  </header>
  <nav>
    <ul class="global">
      <li>1章：html5使い所</li>
      <li>2章：W3Cの勧告</li>
      <li>3章：DTD宣言</li>
      <li>4章：スマホサイト</li>
      <li>5章：Media Queries</li>
    </ul>
  </nav>
  <article>
    <section>
      <h2>【html5使い所】</h2>
      <p>「これからはHTML5だ！」といきり立たず、どんな場合にhtml5のタグを使用できるのかしっかり学ぼう。スマホのブラウザシェアーが凄い勢いで伸びているが、まだまだコア層はIE8と9だ。</p>
    </section>
    <section>
      <h2>【W3Cの勧告】</h2>
      <p>来年に迫るW3Cの勧告で、WHATWG、W3C、そしてブラウザごとにバラバラに開発されていたhtml5が統一されるのか否か。</p>
    </section>
    <section>
      <h2>【DTD宣言】</h2>
      <p>PCではhtml5に完全対応しているブラウザはモダンブラウザのみ。今はW3Cのhtml5勧告のための準備として、html5で記述する箇所はDTD宣言と、IE7〜8に支障の無いタグにとどめておこう。</p>
    </section>
    <section>
      <h2>【スマホサイト】</h2>
      <p>スマホに特化したサイトならほぼ全てのhtml5のタグを使用できる。PCサイトと別サイトをスマホ専用に作って同一アドレスでデバイスを振り分けよう。振り分けの方法は.htaccessを設置する方法、phpで記述する方法、JavaScriptを用いる方法がある。</p>
    </section>
    <section>
      <h2>【Media Queries】</h2>
      <p>Media Queriesを使用したマルチディバイスなサイト作りが今人気を得ている。しかしながら、Media Queriesは現在のIE8ではサポートされていない。IEに対応されるための様々な手法を紹介しよう。</p>
      <section>
        <h3>【Respond.js】</h3>
        <p>IE6〜8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするスクリプト</p>
        <section>
          <h4>【Respond.jsの問題点】</h4>
          <p>古いPCでページを読み込む時のロード時間が極端に長くなる。</p>
        </section>
        <!--３番目のセクション--> 
      </section>
      <!--２番目のセクション-->
      <section>
        <h3>【html5shiv】</h3>
        <p>Googleが用意しているIE8以下での崩れを防ぐJavaScript。</p>
      </section>
      <!--２番目のセクション-->
      <section class="last">
        <h3>【条件付きコメント】</h3>
        <p>IEの独自仕様をhead内に記述。</p>
      </section>
      <!--２番目のセクション--> 
    </section>
    <!--1番目のセクション--> 
  </article>
  <aside>
    <ul class="sidemenue">
      <li>用語解説</li>
      <li>索引</li>
      <li>画像出典</li>
      <li>リンク集</li>
    </ul>
  </aside>
  <footer> <small>COPYRIGHT (C) 1998-2013 Felica Technical Academy. ALL RIGHTS RESERVED.</small> </footer>
</div>
</body>
</html>

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

body {
  font-size: 16px;
  line-height:1.7;
  font-family:
  "Hiragino kaku "
}

div#container{
  width: 940px;
  margin: 0 auto;
  padding: 20px;
  background:#FFFFCC;
  overflow:hidden;
}

header,nav,article,aside{
  padding:10px;
  background:#fff;
  margin-bottom:20px;
}

article{
  float: left;
  width: 620px;
  margin-right: 20px;
}

aside{
  float: left;
  width: 260px;
}

footer{
  clear:both;
  text-align:center;
  background:#ffffff
}


ul {
  list-style:none;
  margin: 0;
  padding:0;
}

nav ul {
  overflow:hidden;
}

nav ul li {
  float:left;
  margin-right: 30px;
}

section {
  margin-bottom: 10px;
  padding: 10px;
  background:#FFCC66;
}

section > section{
  background:#ffffff;
}

section > section >section{
  margin-bottom:0;
   background:#FFCC66;
}

section.last {
  margin-bottom:0;
}

reset.cssはEric Meyer's "Reset CSS" 2.0を使用。
htmlではreset.cssを先にリンクさせ、次に個別のcssを読み込ませる。