知っておくと便利なHTML5の機能、要素や属性のまとめ

今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。

知っておくと便利なHTML5の機能、要素や属性のまとめ

10 useful HTML5 features, you may not be using
by Tapas Adhikary

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

HTML5は、新しいものではありません。すでにわたし達は最初のリリース(2008年1月)からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つけたものに興味がありますか? あまり使用されていませんが、HTML5の便利な機能を紹介します。

この記事では、今まであまり使用されていなかったけど、現在では有用であるHTML5の機能を10個リストアップしました。また、実際に動作するデモをnetlify.appに作成しました。
あなたの参考になることを願っています。

それでは、それぞれの説明、コード、ちょっとしたアドバイスを始めましょう。今後の記事や情報は、@tapasadhikaryをフォローしてください。

details要素

<details>タグは、オンデマンドの詳細をユーザーに提供します。コンテンツをオンデマンドでユーザーに表示する必要がある場合は、このタグを使用します。デフォルトでウィジェットは閉じており、開くとウィジェットは展開され、中のコンテンツが表示されます。

<details>タグは<summary>タグと一緒に使用して、クリック・タップで表示されるコンテンツを簡単に実装できます。

コード

デモ

<summary>要素をクリック・タップすると、中のコンテンツが表示されます。

デモ

デモページ

ちょっとしたアドバイス

GitHubのReadmeで、詳細情報をオンデマンドに表示するために使用してみてください。私のReadmeでは、Reactコンポーネントのプロパティの膨大なリストを最初は非表示にしておき、オンデマンドでのみ表示しています。かっこいいでしょ?

contenteditable属性

contenteditable属性は、コンテンツを編集可能にするために要素に定義できる属性です。div, p, ulなどの要素で機能し、<element contenteditable="true|false">のように指定する必要があります。

注意:
contenteditable属性は、親要素から継承もできます。

コード

デモ

ul要素にcontenteditable属性を加えると、リストが編集可能になります。

デモ

デモページ

ちょっとしたアドバイス

他にも、spandiv要素に加えて編集可能にし、CSSのスタイルを使用してリッチなコンテンツにすることもできます。これは入力フィールドで処理するよりもはるかに優れています。ぜひ試してみてください!

map要素

<map>タグは、イメージマップの定義に役立ちます。イメージマップとはその中に1つ以上のクリック可能な領域が含まれている画像です。mapタグはareaタグと一緒に使用し、クリック可能な領域を決定します。クリック可能な領域は、矩形・円・多角形のいずれかです。形状を指定しない場合は、画像全体が考慮されます。

コード

デモ

画像の一部がクリック可能な領域になります。

デモ

デモページ

ちょっとしたアドバイス

HTML5ではクリック領域はarea要素で設定します(HTML4ではa要素も可)。
イメージマップには欠点がありますが、視覚的なプレゼンテーションに使用することができます。例えば、自分の集合写真で個人にクリック可能な領域を設定し、ドリルダウンしてみてはどうでしょうか。

mark要素

<mark>タグを使用して、テキストコンテンツを強調表示します。

コード

デモ

テキストをマーカーで引いたように、ハイライト表示するのに便利です。

デモ

デモページ

ちょっとしたアドバイス

cssでハイライトのカラーを簡単に変更できます。

data属性

data属性は、ページやアプリにプライベートなカスタムデータを保存するために使用されます。保存されたデータはJavaScriptを使用して、さらにユーザーエクスペリエンスを作成できます。

data属性は2つの部分で構成されます。

  • 属性名には大文字を含めないでください。接頭辞data-の後に少なくとも1文字が必要です。
  • 属性の値は任意の文字列にすることができます。

コード

次にJavaScriptで、

注意:
data属性の値をJavaScriptで読み取るには、完全なHTML名(つまりdata-custom-attr)でgetAttribute()を使用できますが、標準ではdatasetプロパティを使用するという簡単な方法が定義されています。

デモ

ボタンをクリックすると、data属性の値を表示します。

デモ

デモページ

ちょっとしたアドバイス

data属性を使用してページにデータを保存し、RESTコールでサーバーに渡すことができます。別の使用例としては、通知メッセージの数を表示することもできます。

output要素

<output>タグは計算結果を表示します。通常、この要素は計算結果のテキストを出力するために使用される領域を定義します。

コード

デモ

input要素の数値を変更すると、それに合わせて計算結果を出力します。

デモ

デモページ

ちょっとしたアドバイス

クライアントサイドのJavaScriptで計算を行い、その結果をページに反映させたい場合は<output>タグを使用してください。getElementById()で要素を取得するという余分なステップを踏む必要はありません。

datalist要素

<datalist>タグはあらかじめ定義されたオプションのリストを指定し、ユーザーがそれに追加できるようにします。オートコンプリート機能を提供しており、ユーザーは簡単に目的のオプションを取得できます。

コード

デモ

オートコンプリート機能を備えた入力フォーム。

デモ

デモページ

ちょっとしたアドバイス

従来のselectoptionタグとの違いは、selectタグはオプションから1つ以上のアイテムを選択するものですが、datalistはオートコンプリートをサポートする高度な機能です。

値range

input要素のtype属性の値rangeは、範囲セレクタのようなスライダーを実装できます。

コード

デモ

定義された範囲内で動作するスライダー。

デモ

デモページ

ちょっとしたアドバイス

HTML5にはsliderという要素はありません!

meter要素

<datalist>タグで、指定された範囲内のデータを測定します。

コード

デモ

デモ

デモページ

ちょっとしたアドバイス

<datalist>タグは、プログレスバーのようなユーザーエクスペリエンスのために使用しないでください。HTML5ではそれ用に<progress>タグが用意されています。

デモ

プログレスバーは<progress>タグで実装する

input要素

<input>タグは、テキストやパスワードなどの入力としてよく知られています。しかし、いくつか特別な使い方があります。

required

入力欄を必須としてマークアップします。

デモ

autofocus

input要素にカーソルを置くことで、自動的にフォーカスを提供します。

正規表現による検証

正規表現を使用してパターンを指定し、入力を検証できます。

カラーピッカー

簡単にカラーピッカーを実装できます。

デモ

次に学ぶべきこと

私はいくつか便利なものを残しました。あなたもリストを完成させてみませんか? この記事について、またHTML5について学んだことなど、コメントをお願いします。次回の記事でお会いしましょう。

この記事で使用されているすべてのコードは、下記のgitリポジトリにあります。気に入ったら、スターを付けてください。

もしあなたの役に立ったのなら、シェアをお願いします。そうすれば、他の人にも届きます。私はUIとUXに情熱を傾けており、記事を通じて知識を共有するのが大好きです。詳しくは私のブログをご覧ください。

質問やコメントがありましたら、@tapasadhikaryまでお願いします。

sponsors

top of page

©2020 coliss