HTML5-CSS3-jQuery

構造の進化

• XHTML 1.0

  • <div id="header">

  • <div id="gNavi">

  • <div id="main">

  • <div id="side">

  • <div id="footer">

• HTML5

  • <header>

  • <nav>

  • <section>

  • <aside>

  • <footer>

header要素

サイトのロゴやナビゲーションなどが記述されているサイトヘッダー

            <header>
                <h1>h1にする見出し</h1>
                <ul>
                    <li>liにする内容</li>
                       ---略---
                </ul>
            </header>

nav要素

ページ内の主要なナビゲーション

            <nav>
                <ul id="global-navi">
                    <li><a href="top.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="access.html">Access</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>

section要素

文章の論理構造を表すための最も基本となる要素。 章や節といった一般的なセクションを表す。

            <section>
                <h1>h1にする見出し</h1>
                <p>内容</p>
                <section>
                    <h2>h2にする見出し</h2>
                    <p>内容</p>
                </section>
            </section>

• 「章・節」として意味がなりたつ
• スタイルシートやスクリプトの都合には使わないこと。それらにはdivを使うこと。
• article, aside, navが適切な場合には、そちらを使うこと。
• セクションの先頭に見出しが自然に存在してない場合には使わないこと。

article要素

それ自体で独立したコンテンツとして成り立つ自己完結したもの

RSSフィードで読み込んで1つの記事として成り立っているかを考える

            <article>
                <h1>h1にする見出し</h1>
                <p>内容</p>
                <ul>
                ---略---
                </ul>
            </article>

• 記事が自己完結している
• 内容的に（仮に）発行日を入れても不自然ではない
• 内容的に（仮に）著作者情報を入れても不自然ではない

• インタラクティブなウィジェットやガジェットとして扱える

  • 無印良品
  • adobe-html5

aside要素

メインコンテンツとは関連性が薄く、切り離すことができるコンテンツ

            <aside>
                <ul id="banner">
                    <li>バナー</li>
                    <li>バナー</li>
                </ul>
            </aside>

footer要素

そのセクションのフッターを表す

            <footer>
                <p class="copyright"><small>© Copyright 2001 – 2012
                -----. All Rights Reserved.</small></p>
            </footer>

hgroup要素

セクションの見出しを表し、見出し要素のh1～h6要素をグループ化

            <hgroup>
                <h1>h1にする見出し</h1>
                <h2>h2にする見出し</h2>
            </hgroup>

figure要素

図画・写真・コードリストなど、自己完結している

メイン・コンテンツから参照されるようなコンテンツ

            <figure>
                <img src="images/top/image1.png" alt="写真1">
                <figcaption>写真1</figcaption>
            </figure>

time要素

日付や24時間表記の時刻を正確に表す。

日付の書式は「YYYY-MM-DD」時刻は「MM:DD:SS」と記述する。

pubdate属性を指定すると親要素のarticle要素の公開日時を表す。

    <article>
        <time datetime="2012-05-2" pubdate="pubdate">2012.5.2</time>
        <p>内容</p>
    </article>

small要素

細目、注釈などを表す。免責事項や警告、法的規制、著作権表示なども。

            <footer>
                <p class="copyright"><small>© Copyright 2001 – 2012
                -----. All Rights Reserved.</small></p>
            </footer>

a要素

XHTMLではインライン要素として、必ずブロックレベル要素の中に入れる必要があったが HTML5からブロック的な要素を含めることができるようになった。

            <a href="index.html">
                <div>
                    <p>写真2</p>
                    <p><img src="image2.gif" alt="写真2" /></p>
                </div>
            </a>

audio要素

音声埋め込みタグ。mp3とogg形式でIE9とモダンブラウザをカバーできる

コントローラーのデザインは各ブラウザによるもので、 オリジナルに変更する場合はCSS3で指定する。

            <audio controls="controls">
                <source src="music.mp3">
                <source src="music.ogg">
            </audio>

SVG要素

図形や曲線を描画するためのマークアップ言語。HTML5ではSVG言語を混在できる。

ベクター形式なので画像サイズの拡大・縮小で滑らかに描画する。

※モダンブラウザとIE9以上

  <svg width="500" height="300">
      <circle cx="100" cy="100" r="50" fill="#3399ff" stroke="#ff3399"
      stroke-width="5 ">
      </circle>
  </svg>

video要素

動画埋め込みタグ。mp4とwebM形式でIE9とモダンブラウザをカバーできる

コントローラーのデザインは各ブラウザによるもので、 オリジナルに変更する場合はCSS3で指定する。

            <video width="640" height="368" controls="controls">
                <source src="videos.mp4">
                <source src="videos.webm">
            </video>

参照：

Firefogg

canvas要素

canvas要素はJavaScriptで生成された画像を表示するための要素。

HTMLでは枠の部分のみを提供する

• html

              <canvas width="640" height="400" id="cv"></canvas>

• javascript

          <script>
              window.onload = function(){
                  var canvas = document.getElementById("myCanvas");
                  var ctx = canvas.getContext('2d');
                  ctx.fillStyle = "#090";
                  ctx.fillRect(10, 20, 100, 200);
              }
          </script>

Internet Explorer8以下に新要素を対応させる

IE6からIE8にHTML5の新要素をブロックレベル適応とさせるライブラリ

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->