ITコース HTML基礎 015_HTML5の新機能

HTML5の新機能

HTML5 は HTML の最新バージョンで、多くの新しいタグ、属性、機能を導入し、Web の機能とインタラクティブ性を大幅に向上させました。

HTML5 のいくつかの興味深い新機能：

• 描画用の canvas 要素
• メディア再生用の video と audio 要素
• ローカルオフラインストレージのより良いサポート
• article、footer、header、nav、section などの新しい特殊コンテンツ要素
• calendar、date、time、email、url、search などの新しいフォームコントロール

<canvas>

HTML5 <canvas> 要素は、ウェブページにグラフィックを描画するために使用されます。<canvas> 要素は JavaScript の描画 API に基づいており、チャート、グラフィック、アニメーションなど、さまざまなグラフィックを作成するために使用できます。

例：

1
<canvas width="500" height="500">
2
    お使いのブラウザは HTML5 canvas タグをサポートしていません。
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // 描画コンテキストを取得
7
    const ctx = canvas.getContext("2d");
8
    // 円を描画
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

効果：

<svg>

HTML5 SVG 要素は、ウェブページに SVG グラフィックを作成するために使用されます。SVG グラフィックは XML ベースのベクターグラフィックで、劣化なしで拡大縮小でき、さまざまな目的に適しています：

SVG 要素には以下が含まれます：

• <svg> 要素：SVG グラフィックのルート要素を定義します。
• <path> 要素：パス形状を定義します。
• <rect> 要素：矩形形状を定義します。
• <circle> 要素：円形形状を定義します。
• <ellipse> 要素：楕円形形状を定義します。
• <line> 要素：直線を定義します。
• <polygon> 要素：多角形を定義します。
• <polyline> 要素：折れ線を定義します。
• <text> 要素：テキストを定義します。
• <g> 要素：SVG 要素をグループ化するためのグループを定義します。
• <defs> 要素：複数の SVG 要素に適用できるグローバル属性を定義します。

例：

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

効果：

SVG と Canvas は両方とも、ウェブページにグラフィックを作成するためのツールです。それぞれに長所と短所があり、異なるシナリオに適しています。

SVG は XML ベースのベクターグラフィックで、劣化なしで拡大縮小できます。これは、SVG グラフィックは品質を失うことなく任意のサイズで表示できることを意味します。SVG グラフィックは CSS と JavaScript を使用して操作やアニメーション化することもできます。

Canvas は JavaScript ベースの描画 API で、ビットマップグラフィックを作成できます。これは、Canvas グラフィックは劣化なしで拡大縮小できませんが、JavaScript を使用してより複雑なグラフィックを作成できることを意味します。Canvas グラフィックも JavaScript を使用して操作やアニメーション化できます。

SVG と Canvas の具体的な違い：

• SVG が適しているシナリオ：

  • 劣化なしで拡大縮小が必要なグラフィック、例えばアイコン、ロゴ、イラスト
  • CSS と JavaScript を使用して操作やアニメーション化が必要なグラフィック

• Canvas が適しているシナリオ：

  • 複雑なグラフィックの作成が必要なシナリオ、例えばゲーム、アニメーション
  • JavaScript を使用して複雑な操作が必要なシナリオ

HTML5フォーム

HTML5 は、フォームの機能と使いやすさを向上させるために、いくつかの新しい入力タイプと属性を導入しました。

新しいフォーム要素：

• <datalist> 要素：<input> 要素の事前定義オプションリストに使用します。

例：

1
<label for="browser">ブラウザを選択：</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

効果：

新しいフォーム属性：

• <form> / <input> autocomplete 属性：フォームまたは入力フィールドがオートコンプリート機能を持つべきかどうかを指定します。ユーザーがオートコンプリートフィールドで入力を開始すると、ブラウザはそのフィールドに入力済みのオプションを表示します。

例：

1
<form action="demo-form.php" autocomplete="on">
2
  名字：<input type="text" name="fname"><br>
3
  名前：<input type="text" name="lname"><br>
4
  メール：<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

効果：

新しい input タイプ：

1
<form action="/submit" method="post">
2
  <label for="name">名前：</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">メールアドレス：</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">生年月日：</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">電話番号：</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="送信" />
15
</form>

効果：

[!まとめ]