コンテンツにスキップ

HTML/HTML5

出典: フリー教科書『ウィキブックス（Wikibooks）』
ブラウザ HTML
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要素とvideo要素のマークアップ例
<!-- audio要素の場合 -->
<audio autoplay controls>
    <source src="example.ogg" type="audio/ogg">
    <source src="example.mp3" type="audio/mp3">
    （ここに未対応環境への代替コンテンツ）
</audio>

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


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引数は、終点の座標位置ではないので、混同しないように注意しましょう。）

CANVAS要素とJavaScriptを使ったアニメーション

[編集]

requestAnimationFrame は、ブラウザに次の再描画が行われるタイミングで指定したコードを実行するためのメソッドです。これはブラウザが持つ最適化されたアニメーション制御の仕組みを利用することができ、特にアニメーションや描画の際に使用されます。

一般的に、アニメーションを setInterval や setTimeout を使って実装すると、一定間隔でコードが実行されるため、描画フレームレートやブラウザの最適化に影響を与えることがあります。しかし、requestAnimationFrame を使うと、ブラウザが次の再描画を行う直前にコードを実行するため、フレームレートやパフォーマンスを向上させることができます。

requestAnimationFrame を使用した基本的なアニメーションの流れは以下のようになります：

  1. アニメーションの開始: requestAnimationFrame を最初に呼び出してアニメーションを開始します。
  2. 再帰的な処理: 毎フレームごとに実行される関数（通常は animate 関数など）を定義します。この関数内で、次の描画フレームの内容を記述します。
  3. 描画: 毎フレームごとに実行される関数内で、要素の描画を行います。通常は Canvas 要素などを操作して描画を更新します。
  4. 再帰的な呼び出し: 描画の内容を更新した後、再び requestAnimationFrame を使って次のフレームの描画を要求します。これにより、連続的なアニメーションが実現されます。

以下は、requestAnimationFrame を使ったCANVAS要素とJavaScriptを使ったアニメーションの例です：

簡単なCanvasアニメーション
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CANVAS要素とJavaScriptを使ったアニメーション</title>
  </head>
  <body>
    <!-- キャンバス要素 -->
    <canvas id="canvas" width="600" height="500"></canvas>
    <script>
      // 初期化関数
      function init() {
        // アニメーションを開始するため、最初のフレームを要求
        window.requestAnimationFrame(animate);
      }

      // キャンバス要素を取得
      const canvas = document.querySelector("#canvas");
      // 2D コンテキストを取得
      const ctx = canvas.getContext("2d");
      // アニメーション用のカウンター
      let count = 0;

      // アニメーションのための関数
      function animate() {
        // キャンバス全体をクリアして新しいフレームの準備
        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;

        // 次のフレームを要求してアニメーションを続行
        window.requestAnimationFrame(animate);
      }

      // 初期化関数を呼び出してアニメーションを開始
      init();
    </script>
  </body>
</html>

この方法を使うと、ブラウザが最適なタイミングでアニメーションを行うため、滑らかなアニメーションやパフォーマンスの向上が期待できます。

CSSを使ったアニメーション

[編集]

１つ前の例では、CANVAS要素とJavaScriptを使ってアニメーションを実現しましたが、CSSだけでもアニメーションを実現できます。

CSSを使ったアニメーション
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>CSSアニメーション</title>
  <style>
    /* キャンバスのスタイルを定義 */
    #canvas {
      width: 600px;
      height: 500px;
      background-color: #f0f0f0;
      position: relative;
    }

    /* 四角形のスタイルを定義 */
    #rectangle {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      /* 四角形のアニメーションを定義 */
      animation: animateRectAndColor 5s linear infinite;
    }

    /* アニメーションを定義 */
    @keyframes animateRectAndColor {
      0%, 100% {
        /* 0% と 100% の色と位置 */
        background-color: hsl(0, 100%, 50%);
        transform: translate(0, 0);
      }
      17% {
        /* 17% の色と位置 */
        background-color: hsl(60, 100%, 50%);
        transform: translate(60px, 60px);
      }
      33% {
        /* 33% の色と位置 */
        background-color: hsl(120, 100%, 50%);
        transform: translate(120px, 120px);
      }
      50% {
        /* 50% の色と位置 */
        background-color: hsl(180, 100%, 50%);
        transform: translate(180px, 180px);
      }
      67% {
        /* 67% の色と位置 */
        background-color: hsl(240, 100%, 50%);
        transform: translate(240px, 240px);
      }
      83% {
        /* 83% の色と位置 */
        background-color: hsl(300, 100%, 50%);
        transform: translate(300px, 300px);
      }
      100% {
        /* 100% の色と位置 */
        background-color: hsl(0, 100%, 50%);
        transform: translate(360px, 360px);
      }
    }
  </style>
</head>
<body>
  <div id="canvas">
    <div id="rectangle"></div>
  </div>
</body>
</html>

Canvas要素とJavaScriptを使用したアニメーションとCSSアニメーションのどちらが優れているかは、使用するケースや特定のニーズによって異なります。一般的には、それぞれの方法には特徴があります。

CanvasとJavaScriptを使用したアニメーションの利点：

  1. 柔軟性: JavaScriptを使用すると、アニメーションのフレームごとの制御や複雑な計算を行うことができます。これにより、細かい動きや独自のアニメーションを実装することができます。
  2. 動的な描画: Canvasは動的な描画に適しており、リアルタイムのインタラクションやゲームなど、リアルタイム性が重要な場合に有用です。

一方、CSSアニメーションの利点：

  1. 簡潔さと効率性: CSSアニメーションはプロパティの変更を簡単に行え、ブラウザによってハードウェアアクセラレーションが行われるため、パフォーマンスが向上することがあります。
  2. シンプルなアニメーションに適している: CSSアニメーションはシンプルなトランジションや基本的なアニメーションに適しています。例えば、ボタンのホバーエフェクトや基本的な要素の移動など。

選択は、プロジェクトの目的や要件、そして実装するアニメーションの複雑さによって変わります。複雑なアニメーションや動的な描画を行う場合はCanvasとJavaScriptを使うことが適していますが、単純なアニメーションや基本的なトランジションの場合はCSSアニメーションが手軽かもしれません。

HTML5で廃止された要素と属性

[編集]

HTML4.01にあった要素と属性が、HTML5ではいくつか廃止されました[5]。

HTML5で廃止された要素

[編集]

HTML5では、タイプフェース・グリフ・斜体などのスタイル・色や各種描線などの物理修飾を意味する要素が廃止されました。 廃止された機能は、スタイル シートやスクリプトなどを使って、ドキュメント構造の外で定義することになります。

HTML5で廃止された要素
要素 説明 代替
acronym 頭字語の定義 abbr要素
applet Javaアプレットの埋込み object要素
basefont ページの基本フォント サイズの定義 CSSの font-size プロパティ
big 大きなフォントでテキストを表示 CSSの font-size プロパティに、large, x-large, xx-largeやxxx-largeなどを指定
center 中央寄せでテキストを表示 CSSのmarginプロパティ
dir ディレクトリー リストを表示 ul要素
font テキストをフォントの大きさ(size)と色(color)を指定して表示 CSSのfontプロパティ
frame フレームの定義 代替方法はありません。
frameset フレーム セットを定義 代替方法はありません。
isindex １行入力フィールドを表示 form要素とinput要素
noframes noframes セクションを定義 代替方法はありません。
strike テキストに打消し線を引く 意味が通るならdel要素、そうでなければ s要素
tt テキストをテレタイプ風に表示 CSSで font-family: monospace
u テキストに下線を引く 意味が通るならins要素、そうでなければCSSで text-decoration:underline
s 要素は、廃止が取り沙汰されましたが、類似機能の strike 要素は廃止され、s 要素は存続となりました。


HTML5で廃止された属性

[編集]

HTML5では、いくつかの要素に対する属性が廃止されました。

HTML5で廃止された属性
廃止属性 対象要素
rev link と a
charset link と a
shape a
coords a
longdesc img と iframe.
target link
nohref area
profile head
version html
name img
scheme meta
archive object
classid object
codebase object
codetype object
declare object
standby object
valuetype param
type param
axis td と th
abbr td と th
scope td
align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead と tr.
alink body
link body
vlink body
text body
background body
bgcolor table, tr, td, th と body.
border table と object.
cellpadding table
cellspacing table
char col, colgroup, tbody, td, tfoot, th, thead と tr.
charoff col, colgroup, tbody, td, tfoot, th, thead と tr.
clear br
compact dl, menu, ol と ul.
frame table
frameborder iframe
hspace img と object.
vspace img と object.
marginheight iframe
marginwidth iframe
noshade hr
nowrap td と thh
rules table
scrolling iframe
size hr
type li, ol と ul.
valign col, colgroup, tbody, td, tfoot, th, thead と tr
width hr, table, td, th, col, colgroup と pre.

HTML5で追加された要素と属性

[編集]

HTML5では、さまざまな新しい属性が追加されました。その中には、<detail>要素や<a>要素のdownload属性などがあります。

  1. <detail>要素： <detail>要素は、詳細情報を含むコンテンツを作成するために使用されます。通常、折りたたまれた状態で表示され、ユーザーがクリックすると詳細を表示できます。
    例：
    <details>
  <summary>詳細を見る</summary>
  <p>ここに詳細な情報が入ります。</p>
</details>
  2. <a>要素のdownload属性： <a>要素のdownload属性は、リンク先のリソースをダウンロードする際のファイル名を指定するために使用されます。通常、この属性を使用すると、リンクをクリックしたときにブラウザがファイルをダウンロードします。
    例：
    <a href="path/to/file.pdf" download="myfile.pdf">PDFファイルをダウンロード</a>

これらの属性は、ウェブページをよりインタラクティブにしたり、ユーザーエクスペリエンスを向上させるために使用されます。

文章構造を表す要素

[編集]

header要素

[編集]

ヘッダー（ページ上部に表示される部分・rtlの場合はページの右）を構成する文章要素。

footer要素

[編集]

footer要素はフッタ（ページ下部に表示される部分・rtlの場合はページの左）を構成する文章要素。

aside

[編集]

コラムやサイドバーなど、主要なテーマを構成しなし文章要素。

main

[編集]

主要な文章要素。

article

[編集]

その内容だけで独立できる内容

section

[編集]

複数の記事で構成されるところに使う。

[編集]

nav要素は、他のページやページ内の一部にリンクする、ナビゲーションリンクを持つセクションを表します。

figure

[編集]

図表。

figcaption

[編集]

figure要素のキャプション。

[編集]

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

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

脚註

[編集]
  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
  5. ^ HTML Living Standard — Last Updated 22 July 2022(access-date: 2022-07-26)

外部リンク

[編集]
Wikipedia
Wikipedia
 ウィキペディアにHTML5の記事があります。


ブラウザ HTML
HTML5 		外部リンク
"https://ja.wikibooks.org/w/index.php?title=HTML/HTML5&oldid=251484" より作成