HTML 5.1 学習: 14 の新機能とアプリケーション例

序文

ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である World Wide Web Consortium (W3C) に属しており、このようにして形成されたプロトコルは世界中で使用できます。 2016 年 11 月、W3C は長年使用されてきた HTML 5 標準を更新しました。これは 2 年ぶりのマイナー アップデートです。 HTML 5.1 に当初提案された機能の多くは、設計上の欠陥とブラウザ ベンダーからのサポート不足により削除されました。

HTML 5.1 にはいくつかの要素と機能の改善が取り入れられていますが、まだ小さなアップデートです。新しい要素には複合タグ (<dialog>、<details>、<summary>、<picture> など) が含まれており、開発者は創造性とコンテンツを表現するためのスペースをさらに広げることができます。

W3C は HTML 5.2 のドラフトの作成も開始しており、2017 年末までにリリースされる予定です。ここで紹介するのは、バージョン 5.1 で導入された新機能と機能改善です。これらの機能を利用するために JavaScript を使用する必要はありません。すべてのブラウザがこれらの機能をサポートしているわけではないので、実稼働環境で使用する前にブラウザのサポートを確認することをお勧めします。

14. フィッシング攻撃を防ぐ

target='_blank' を使用するほとんどの人は、興味深い事実を知りません。新しく開いたタブによって、window.opener.location がフィッシング ページに変更される可能性があるのです。開いているページで、ユーザーに代わって悪意のある JavaScript コードが実行されます。ユーザーは開いたページが安全であると信頼しているため、疑念を抱きません。

この問題を完全に排除するために、HTML 5.1 では、ブラウザ コンテキストを分離して rel="noopener" 属性の使用を標準化しました。 rel="noopener" は <a> タグと <area> タグで使用できます。

 <a href="#" target="_blank" rel="noopener">
  リンクはもう問題にならない
</a>

13. 画像タイトルの柔軟な処理

<figcaption> タグは、<figure> 要素に関連付けられたキャプションまたは凡例を表し、通常は画像、グラフ、イラストなどの視覚要素のコンテナーとして機能します。以前のバージョンの HTML では、<figcaption> は <figure> の最初または最後の子タグとしてのみ使用できました。 HTML5.1 ではこの制限が緩和され、<figure> コンテナー内の任意の場所で <figcaption> を使用できるようになりました。

 <記事>
  <h1>今日のニュースの見出し</h1>
  <図>
    <img src="petrolimage.jpeg" alt="ガソリン価格が下落">
    <figcaption>ガソリンスタンドで車に燃料を補給する男性</figcaption>
  </図>
  <p>これは2か月間で4回目のガソリン価格の値上げであり、ディーゼル価格の値上げは2週間で3回目となる。</p>
</記事>

12. スペルチェック

spellcheck は列挙属性であり、その値は空の文字列、true、または false になります。 true が指定されている場合、要素のスペルと文法がチェックされます。

element.forceSpellCheck() は、ユーザーがその要素にフォーカスを当てていない場合でも、テキスト要素で見つかったスペルや文法のエラーを報告するようにユーザーエージェントに強制します。

 <p スペルチェック="true">
 <label>名前: <input spellcheck=" false" id="textbox"></label>
</p>

11. 空のオプション

新しいバージョンの HTML では、空の <option> 要素を作成できます。これは、<optgroup>、<datalist>、または <select> 要素の子になることができます。この機能は、ユーザーフレンドリーなフォームを設計するときに役立ちます。

10. フレームのフルスクリーンをサポート

Frame 用に開発されたブール型の allowfullscreen プロパティを使用すると、requestFullscreen() メソッドを使用してコンテンツを全画面で表示できるかどうかを制御できます。 たとえば、YouTube のプレーヤーに埋め込まれた iframe を使用しましょう。 プレーヤーがビデオを全画面で表示できるようにするには、allowfullscreen プロパティを設定する必要があります。

 <記事>
  <ヘッダー>
  <p><img src="/usericons/16235"> <b>フレッド・フリントストーン</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">プライベート投稿</a></p>
  </ヘッダー>
  <メイン>
  <p>私の新しいビデオをチェックしてください!</p>
  <iframe title="ビデオ" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </メイン>
</記事>

9. ヘッダーとフッターの埋め込み

HTML5.1 では、ヘッダーとフッターを別のヘッダー内に埋め込むことができます。ヘッダーまたはフッターが段落コンテンツ内に含まれている場合は、ヘッダーまたはフッターをヘッド要素に追加できます。この機能は、セマンティック段落要素に <section> タグや <article> タグなどの詳細を追加する場合に非常に便利です。

次のコードでは、<article> タグに <header> タグが含まれ、このタグには <aside> タグがあり、さらにそのタグに <header> タグが含まれています。

 <記事>
  <ヘッダー>
    <h2>レッスン: 鶏肉の調理方法</h2>
    <余談>
      <ヘッダー>
        <h2>著者について: トム・ハンク</h2>
        <p><a href="./tomhank/">彼に連絡してください!</a></p>
      </ヘッダー>
      <p>料理だけの専門家。料理本の余興。</p>
    </余談>
  </ヘッダー>
  <p><ins>マリネ液を鶏肉と一緒にジップトップバッグに注ぎ、密封します。
          袋の中の空気をできるだけ抜いて密封します。</ins></p>
</記事>

8. ゼロ幅画像

新しいバージョンの HTML では、幅ゼロの画像を追加できます。この機能は、画像をユーザーに表示する必要がない場合に使用できます。 img 要素を、単に画像を表示する以外の目的、たとえばページビューをカウントするサービスの一部として使用する場合は、width 属性と height 属性にゼロ値を使用します。幅がゼロの画像の場合は、空の属性を使用することをお勧めします。

 <img src="theimagefile.jpg" 幅="0" 高さ="0" alt="">

7. フォームを検証する

新しい reportValidity() メソッドを使用すると、フォームを検証して結果をリセットし、ブラウザの適切な場所でユーザーにエラーを報告できます。単一の要素で複数の問題が同時に発生した場合、ユーザーエージェントは複数の制限を報告することがあります。この場合、「パスワード」の入力が必須であるのに入力されていない場合は、エラーとしてマークされます。

 <h2>フォームの検証</h2>
<p>詳細を入力してください</p>
<フォーム>
  <ラベル>
    必須入力 <input type="password" name="password" required />
  </ラベル>
  <button type="submit">送信</button>
</フォーム>
<スクリプト>
  document.querySelector('form').reportValidity()
</スクリプト>

6. ブラウザのコンテキストメニュー

HTML 5.1 では、1 つ以上の <menuitem> 要素を含む <menu> タグを使用してメニューを定義し、contextmenu 属性を使用して任意の要素にバインドできます。 <menu> 要素の id 値は、コンテキスト メニューを追加する要素の contextmenu 属性の値と一致する必要があります。

各 <menuitem> には、次の 3 つの形式のいずれかを指定できます。

1. ラジオ – グループからオプションを取得します。
   
2. チェックボックス – オプションを選択または選択解除します。
   
3. コマンド – クリックするとアクションを実行します。
   

 <h2 コンテキストメニュー="ポップアップメニュー">
  右クリックするとコンテキスト メニューのデモが表示されます。
</h2>
 
<メニュータイプ="コンテキスト" id="ポップアップメニュー">
  <menuitem type="checkbox" checked="true">チェックボックス 1 </menuitem>
  <menuitem type="command" label="コマンド" onclick="alert('WARNING')">チェックボックス 2</menuitem> 
  <menuitem type="radio" name="group1">ラジオボタン a</menuitem>
  <menuitem type="radio" name="group1" checked="true">ラジオボタン b</menuitem>
  <menuitem type="checkbox" disabled>無効なメニュー項目</menuitem>
</メニュー>

5. スクリプトやスタイルで暗号化乱数を使用する

暗号化 nonce はランダムに生成された数値であり、一度だけ使用でき、ページ要求ごとに生成する必要があります。 nonce 属性は、<script> 要素と <style> 要素で使用できます。

これは通常、Web サイトのコンテンツ セキュリティ ポリシー内で使用され、特定のスタイル シートまたはスクリプトをページに実装する必要があるかどうかを決定します。以下に示すコードでは、この値はハードコードされていますが、実際の使用シナリオでは、この値はランダムに生成されます。

 <スクリプト nonce='d3ne7uWP43Bhr0e'>
  JavaScript コード 
</スクリプト>

4. 逆リンク関係

rev 属性は HTML4 で定義されていましたが、HTML5 には表示されません。 W3C は、<a> 要素と <link> 要素に rev 属性を再度含めることを決定しました。 rev 属性は、現在のドキュメントと逆リンクされたドキュメント間の関係を識別します。これは、広く使用されているデータ構造マークアップ形式である RDFa をサポートするために追加されました。

それぞれにコースが含まれる 2 つのドキュメントの例を見てみましょう。それらの間のリンクは、次のように rel 属性と rev 属性を使用して定義できます。

 //URLが「chapter1.html」のドキュメント
 
<link href="Lesson2.html" rel="next" rev="prev">
 
 
//URLが「chapter2.html」のドキュメント
 
<link href="Lesson1.html" rel="前へ" rev="次へ">
<link href="Lesson3.html" rel="next" rev="prev">

3. 情報の表示/非表示

新しい <details> 要素と <summary> 要素を使用すると、コンテンツに拡張情報を追加できます。要素をクリックすると、追加情報ブロックを表示または非表示にすることができます。 デフォルトでは、追加情報は非表示になっています。

コードでは、以下に示すように、<summary> タグを <details> タグ内に配置する必要があります。 <summary> タグの後に、非表示にする追加のコンテンツを追加できます。

 <セクション>
  <h3>エラーメッセージ</h3>
  <詳細>
  <summary>ネットワーク エラーのため、このファイルはダウンロードされませんでした。</summary>
  <ダウンロード>
    <dt>ファイル名:</dt><dd>Passcode.txt</dd>
    <dt>ファイルサイズ:</dt><dd>8 KB</dd>
    <dt>エラーコード:</dt><dd>342a</dd>
  </dl>
  </詳細>
</セクション>

2. 入力タイプの増加

HTML 入力要素は、週、月、日時ローカルの 3 つの入力タイプで拡張されています。

名前が示すように、最初の 2 つの要素では、ユーザーが曜日の値と月の値を選択できます。ブラウザのサポートに応じて、どちらもドロップダウン カレンダーとしてレンダリングされ、特定の週または月を選択できます。

datatime-local は、タイムゾーン設定のない日付と時刻の入力フィールドを表します。月や週の入力項目と同様にデータを選択でき、時間を別途入力することもできます。

 <セクション>
  <h2> 
    週、月、日時（ローカル） 
  </h2>
  <フォームアクション="action_page.php">
    週を選択してください:
    <input type="week" name="year_week">
    <入力タイプ="送信">
  </フォーム>
  <フォームアクション="action_page.php">
    誕生日（月と年）:
    <input type="month" name="誕生日月">
    <入力タイプ="送信">
  </フォーム>
  <フォームアクション="action_page.php">
    参加（日時）：
    <input type="datetime-local" name="bdaytime">
    <input type="submit" value="送信">
  </フォーム>
</セクション>

1. レスポンシブ画像

W3C は、CSS を使用せずにレスポンシブな画像を実現するためのいくつかの機能を導入しました。彼らです…

srcset 画像属性

srcset 属性を使用すると、異なるピクセル解像度に対応する 1 つ以上の代替画像ソースを指定できます。これにより、ブラウザはユーザーのデバイスに基づいて、表示に適した品質の実装を選択できるようになります。たとえば、接続速度が遅いモバイル デバイスのユーザーには、低解像度の画像を表示する方がよい場合があります。

srcset 属性を独自の x 修飾子とともに使用して、各画像のピクセル比を記述できます。ユーザーのピクセル比が 3 に等しい場合、高解像度の画像が表示されます。

 <img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 1倍、 
  clicks/medium-res.jpg 2倍、 
  clicks/high-res.jpg 3倍"
>

ピクセル比に加えて、w 修飾子を使用して画像の異なるサイズを指定することもできます。次の例では、高解像度画像が幅 1600 ピクセルで表示されるように定義されています。

 <img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 500w、 
  clicks/medium-res.jpg 1000w、 
  clicks/high-res.jpg 1600w"
>

サイズ画像属性

多くの場合、クリエイターは画面サイズに応じて異なる画像を表示したいと考えています。これは sizes 属性を使用して実行できます。表示する画像に割り当てられたスペースに基づいて幅を調整し、srcset 属性を使用して表示する適切な画像を選択できます。例えば…

 <img src="clicks/low-res.jpg" sizes="(最大幅: 25em) 60vw, 100vw" 
  srcset="clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w、 
  clicks/high-res.jpg 1600w"
>

ここで、sizes 属性は、ビューポートが 25 em より大きい場合は画像の幅がビューポート幅の 100% になり、25 em 以下の場合は画像の幅がビューポート幅の 60% になることを定義します。

画像の要素

picture 要素を使用すると、さまざまな画面サイズの画像を宣言できます。これは、<img> を <picture> 要素でラップし、複数の <source> 子要素を記述することで実現できます。

<picture> タグだけでは何も表示されません。以下に示すように、デフォルトの画像ソースを src 属性の値として宣言し、オプションの画像ソースを scrset 属性で宣言することが想定されています。

 <写真>
  <ソースメディア="(最大幅: 25em)" srcset="
    clicks/small/low-res.jpg 1倍、
    clicks/small/medium-res.jpg 2倍、 
    clicks/small/high-res.jpg 3倍
  ">
  <ソースメディア="(最大幅: 60em)" srcset="
    clicks/large/low-res.jpg 1倍、
    clicks/large/medium-res.jpg 2倍、 
    クリック/大/高解像度.jpg 3倍
  ">
 
  <img src="clicks/default/medium-res.jpg">
</画像>

要約する

上記がこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してコミュニケーションを取ることができます。