HTML/HTML5

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動
Wikipedia
 ウィキペディアにHTML5の記事があります。

MediaWiki編集におけるhtml5対応については w:Help:ウィキテキストにおけるHTML を参照。 HTML5（エイチティーエムエルファイブ）とは、HTML 4.01の後継としてW3Cにより2014年に勧告された規格である[1]。

HTML4.01からの変更点[編集]

構造の改善[編集]

人が見てもコンピュータが見ても解読しやすい構造とするため、デザインに関係する部分はスタイルシートに記述し、要素や属性でデザインを指定することはしないという姿勢がより徹底された。そのためfont要素やcenter要素などいくつかの要素が廃止され、table要素におけるwidth属性やalign属性なども廃止された。HTML4.01で非推奨であったb要素やu要素などは復活している（非推奨が外された）が、要素の意味づけが変更されている。header, main, section, article, nav, aside, footerなどセクショニング要素が新たに追加され、文書構造をより簡潔に記述できるようになった。

マルチメディアへの対応[編集]

マルチメディアへの対応も目的の一つであり、audio, video, embedなどの要素が追加された。

HTML5ソースのサンプル[編集]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>簡単なページ</title>
    </head>
    <body>
        <header>
            <h1>簡単なページ</h1>
            <nav>
                <ul>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">このサイトについて</a></li>
                    <li><a href="#">実績</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section>
                <h2>はじめに</h2>
                <p>このサイトは簡単なページのサンプルです。</p>
                <article>
                    <h3>概要</h3>
                    <p>このページはサンプルです。</p>
                </article>
            </section>
            <aside>
                <h2>コラム</h2>
                <p>コラムのような余談はASIDE要素に記述します。</p>
            </aside>
        </main>
    </body>
</html>


DOCTYPE宣言について[編集]

DOCTYPE宣言は、ドキュメントの種類を宣言します。HTML4では、この要素内で「!DOCTYPE html」以降にDTDによるスキーマが参照する仕様でした[2]。しかしHTML5では <!DOCTYPE html> だけにするように決まりました[3]。


audio要素とvideo要素[編集]

audio要素はオーディオを再生、video要素は動画を再生する。embed要素やobject要素による埋め込みと異なり、この方法ではプラグインを介さずブラウザの機能で直接マルチメディアの再生を行うことが出来る。ただし、ブラウザにより対応フォーマットは異なる。 

<!-- audio要素の場合 -->
<audio autobuffer autoplay controls>
    <source src="example.ogg" type="audio/ogg">
    <source src="example.mp3" type="audio/mp3">
    （ここに未対応環境への代替コンテンツ）
</audio>

<!-- video要素の場合 -->
<video width="320" height="240" autobuffer autoplay controls>
   <source src="file.ogv" type="video/ogg">
   <source src="file.mp4" type="video/mp4">
    （ここに未対応環境への代替コンテンツ）
</audio>


canvas要素[編集]

詳細は「JavaScript/Canvas」を参照

概要[編集]

canvas要素はダイナミックなビットマップ（ベクター）画像を描画する。二次元コンピュータグラフィックスはCanvas APIにより実現され[4]、ハードウェアアクセラレーションされた二次元及び三次元コンピュータグラフィックスはWebGLを用いて実現される。

書式
<canvas id="canvas" width="320" height="240">
（ここに未対応環境への代替コンテンツ）
</canvas>


JavaScriptを使用するとcanvasに画像を描くことができる。

挿入するJavaScriptコード例
var ctx    = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,200)";
ctx.fillRect(100, 100, 200, 200);


JavaScriptは下記のようにcanvas要素と組み合わせて使用できます。

HTMLでのJavaScriptとcanvasの組み合わせの例
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>簡単なページ</title>
</head>
<body>

  <canvas id="canvas" width="320" height="240">
  </canvas>

  <script>
    var ctx    = canvas.getContext("2d");
    ctx.fillStyle = "rgb(0,0,200)";
    ctx.fillRect(100, 100, 200, 200);
  </script>

</body>
</html>

なお、上記のコードは、実行するとブラウザ画面に青い長方形を描きます。 

ctx.fillStyle = "rgb(0,0,200)";

では色指定を行っています。0〜255の範囲で赤・緑・青の色見をそれぞれ指定しています。 

ctx.fillRect(100, 100, 200, 200);

の書式は、上記htmlコード例の設定なら、 

ctx.fillRect(始点x座標, 始点y座標, 横幅, 縦幅);

です。（第3引数と第4引数は、終点の座標位置ではないので、混同しないように注意しましょう。）

簡単な動画の例[編集]

アニメーション処理などをしたい場合、円や四角などの簡単な図形を動かすだけなら、JavaScriptと要素を連携させれば、ウェブブラウザで簡単な図形がアニメーションする動画を表示させられる。

詳しい解説は、たとえばモジラ公式サイト"Basic animations" などにある。もしかしたらブラウザの種類によって挙動が変わるかもしれないので､実用の際には都度、実機で確認のこと。

下記のコード中にあるsetInterval の書式と内容は 

setInterval(function, delay)
function で指定した関数を delay ミリ秒ごとに繰り返し実行、

である。

簡単なcanvasアニメ
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>簡単なアニメーション</title>
  </head>
  <body>
    <canvas id="canvas" width="600" height="500"></canvas>
    <script>
      let ctx = canvas.getContext("2d"),
        count = 0;

      setInterval(() => {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.fillStyle = `hsl(${360*count/255},100%,50%)`;
        ctx.fillRect(count, count, 40 + count/2, 40 + count/2);
        count++;
        count %= 256;
      }, 5);
    </script>
  </body>
</html>

ページ内がいくつかの文書に分割される場合[編集]

header要素[編集]

header要素はヘッダ（ページ上部に表示される部分）を書くために利用する。

footer要素[編集]

footer要素はフッタ（ページ下部に表示される部分）を書くために利用する。


aside[編集]

余談やサイドバーなど、メインでない要素であることを示す。


main[編集]

main要素は、そのページの主要な要素であることを示す。

main要素により、ヘッダやフッタ、サイドバーなどと区別することができる。

nav要素[編集]

nav要素は、その項目が目次や索引であることを知らせる。

パンくずリストを作るために用いることができる。

HTML4対応ファイルを改修する場合[編集]

HTML5で廃止された機能を使う場合（たとえば frameset などはhtml5で廃止された）、HTML4に準拠してHTMLファイルを書く場合があります。

このような場合にも、header要素やnav要素を使いたい場合、html4仕様と矛盾しないでhtml5を意識したコードを書く方法があります。


それは class 属性を利用してdiv要素で、 

<div class="header">


</div><!-- /header -->

のように書く方法です。


こうすることで、将来もし、html5のどんな要素に対応するかを説明できるので、集団作業では色々と便利です。

なお、 <!-- --> は非表示タグというもので、コメントを書くのに使われます。その非表示タグ内に書かれた文字はブラウザ画面には表示されません。

脚注[編集]

  1. ^ 2019年にW3CとWHATWGは「HTML Living StandardをHTMLとDOMの唯一の標準とし、W3Cは今後HTMLとDOMに関する標準の策定を行わない」旨合意したことを発表しました。この事により2021年6月現在のHTML5の（唯一の）標準は、HTML Living Standardのみとなっています。
  2. ^ DTDでスキーマを参照しているのでHTML4はSGMLに基づいていると言えます。
  3. ^ DTDをDOCTYPE宣言に含まなくなったことにより、HTML5は最早SGMLではなくなり。この事は使用できる文字列実体参照の相違などに影響します。
  4. ^ https://html.spec.whatwg.org/multipage/canvas.html#2dcontext

外部リンク[編集]

このページ「HTML/HTML5」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。
"https://ja.wikibooks.org/w/index.php?title=HTML/HTML5&oldid=190370" より作成