Articles
HTML入門
HTMLの最近の動向

HTMLの最近の動向

この記事ではHTMLの最近の動向について説明します。

HTML5において比較的最近追加されたタグなどについて説明しています。

YouTube Video

HTMLの最近の動向

<template>タグ 

 1<template id="myTemplate">
 2    <div>
 3        <p>Hello, this is a reusable template!</p>
 4    </div>
 5</template>
 6<button onclick="useTemplate()">Use Template</button>
 7<div id="container"></div>
 8<script>
 9    function useTemplate() {
10        const template = document.getElementById('myTemplate');
11        const clone = template.content.cloneNode(true);
12        document.getElementById('container').appendChild(clone);
13    }
14</script>

  • <template>タグは、再利用可能なHTMLフラグメントを定義し、JavaScriptを通じてアクティブ化するまで非表示にしておくために使用されます。

  • <template>タグを利用することで、再利用可能な UI コンポーネント（例えば、カードやリストアイテムなど）を動的に作成することができます。また、大規模なアプリケーションでコードの重複を減らし、メンテナンス性を向上させることができます。

  • この例では、「Use Template」ボタンがクリックされると<template>タグの内容が表示されます。

<slot>タグ

Header Content

Footer Content

 
 1<template id="myElementTemplate">
 2    <slot name="header">Default Header</slot>
 3    <main>Default Content</main>
 4    <slot name="footer">Default Footer</slot>
 5</template>
 6<my-element>
 7    <p slot="header">Header Content</p>
 8    <p slot="footer">Footer Content</p>
 9</my-element>
10<script>
11    class MyElement extends HTMLElement {
12        constructor() {
13        super();
14        const shadow = this.attachShadow({ mode: 'open' });
15        shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16        }
17    }
18    customElements.define('my-element', MyElement);
19</script>
  • <slot>タグは、Webコンポーネント内で親要素から渡されたコンテンツを表示するためのプレースホルダーとして機能します。
    • スロットに対応する内容が提供されない場合、フォールバックコンテンツ（<slot> タグ内に直接記述されたデフォルトの内容）が表示されます。
  • この例では、<template>要素内で、名前つきスロット(headerとfooter)を定義しています。
  • <my-element>はユーザーが定義したカスタムHTML要素です。この要素内の<p>タグのslot属性にスロット名を記述し、スロットに挿入するコンテンツを指定しています。

<dialog>タグ

This is a dialog box.

 
 1<dialog id="exampleDialog">
 2    <p>This is a dialog box.</p>
 3    <button id="closeButton">Close</button>
 4</dialog>
 5
 6<button id="openButton">Open Dialog</button>
 7
 8<script>
 9    const dialog = document.getElementById('exampleDialog');
10    const openButton = document.getElementById('openButton');
11    const closeButton = document.getElementById('closeButton');
12
13    openButton.addEventListener('click', () => dialog.showModal());
14    closeButton.addEventListener('click', () => dialog.close());
15</script>

  • <dialog>タグは、モーダルやポップアップなどの対話型ウィンドウを定義するために使用されます。JavaScriptを使うことで、開閉を制御できます。

  • この例では、「Open Dialog」ボタンがクリックされるとダイアログが表示されます。

<input>タグのinputmode属性 

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">
  • <input>タグのinputmode属性は、タッチデバイスで表示される仮想キーボードの種類を指定し、ユーザーエクスペリエンスを向上させます。たとえば、inputmode="tel"は電話番号入力用の数字キーボードを表示します。
  • inputmode 属性はあくまで仮想キーボードの表示を調整するためのもので、入力内容の検証は行いません。入力制限を行うには、type 属性や JavaScript での検証を行う必要があります。
  • すべてのブラウザやデバイスが完全にサポートしているわけではないため、適切なフォールバックを用意するのがベストです。
  • inputmode 属性には、次の値を指定できます。それぞれの値が特定の入力タイプや仮想キーボードを表示するために使われます。
値 説明
none noneは、仮想キーボードを非表示にします。
text textは、標準のテキスト入力用の仮想キーボードを表示します。
tel telは、電話番号入力用の数字キーボードを表示します。
url urlは、URL入力用の仮想キーボードを表示します。
email emailは、Eメールアドレス入力用の仮想キーボードを表示します。
numeric numericは、数字入力専用の仮想キーボードを表示します。
decimal decimalは、数値入力用の仮想キーボードを表示します。
search searchは、検索入力用の仮想キーボードを表示します。

<meta>タグのtheme-color属性 

1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
  • <meta>タグのtheme-color属性は、対応するモバイルブラウザでアドレスバーやUIの色をカスタマイズするために使用されます。
  • 例えば、ダークモードとライトモードに対応させる場合、media属性を使って切り替えられます。

これらのタグや属性は、HTML5以降の進化によるものであり、モダンなWeb開発における重要な要素となっています。特定のブラウザサポートや互換性を確認しながら使用することをお勧めします。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

メタ情報関連のタグ