Webページやアプリの実装に、知っておくと便利なHTMLの属性のまとめ

Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。

知っておくと便利なHTMLの属性

24 Lesser-Known HTML Attributes You May Want to Use ✨📚
by Madza (@madzadev)

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

はじめに

私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。

この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。

HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペットを含めてレビューします。

accept属性

accept属性は、フォームが送信できるファイル形式を指定します。

<input>タグのfileタイプでのみ使用でき、カンマで区切られた1つ以上のファイルタイプのリストを記述します。特定のメディアタイプのファイルをすべて許可するには、accept="image/*"を使用します。

autofocus属性

autofocus属性は、ページのロード時に、指定した要素にフォーカスをあてるかどうかを指定します。

autofocus属性は、ドキュメントまたはダイアログ内の1つの要素にのみ指定することができ、複数の要素に適用すると、最初の要素にフォーカスがあたります。

inputmode属性

inputmode属性は、要素またはそのコンテンツを編集する際に、ユーザが入力するデータの種類を示唆します。

主にスマホ向けの機能、入力に適した種類のソフトウェアキーボードを表示します。

pattern属性

pattern属性は、フォームの送信時に、<input>の値をチェックするための正規表現を指定します。

required属性

required属性は、フォームを送信する前に、その要素に入力する必要があることをブラウザに知らせます。いわゆる必須項目です。

autocomplete属性

autocomplete属性は、フォームでメールアドレスや電話番号などを入力する際に、ブラウザによる自動補完機能を使用します。

autocomplete属性を使用する際には、nameまたはidを記述する必要があり、<input>submit型も必要です。

multiple属性

multiple属性は、ユーザーがフォームで複数の値を選択できます。

<input>または<select>file型またはemail型で使用できます。

download属性

download属性は、ユーザーがリンクをクリックした時に、ターゲットがダウンロードされることを指定します。

contenteditable属性

contenteditable属性は、ユーザーが要素のコンテンツを編集できます。

readonly属性

readonly属性は、入力フィールドが読み取り専用であることを指定します。

ユーザーは、タブで移動したり、選択してハイライトにしたり、テキストをコピーすることができます。これらのアクションを禁止するには、代わりにdisabled属性を使用します。

hidden属性

hidden属性は、要素を表示するかどうかを指定します。

spellcheck属性

spellcheck属性は、要素のスペルミスをチェックするかどうかを定義します。

通常、spellcheck属性がtrueに設定され、ブラウザがスペルチェックをサポートしている場合でも、編集不可能な要素はすべてチェックされません。

translate属性

translate属性は、ページがローカライズされる際に、その要素を翻訳するかどうかを指定します。

Googleの翻訳機能で、人名や地名や会社名などをそのままの言語で表示させたい場合は、noを設定します。

loading属性

loading属性は、ブラウザが画像を直ちにロードするか、ユーザーが画像の近くまでスクロールするまでスクリーン外の画像のロードを延期するように指定します。

eagerはデフォルトの動作で、lazyはロードを遅延させるために使用します。
参考: Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート

onerror属性

onerror属性は、文書や画像などがロードされなかった場合に、フォールバック画像を表示できるように設定できます。

this.onerror=nullは、フォールバック画像そのものがない場合に、ループを防ぐために使用されます。

poster属性

poster属性は、動画ファイルを読み込むまでの間、表示させる画像を設定します。

poster属性を指定しなかった場合は、動画の最初のフレームが利用可能になるまで何も表示されず、その後最初のフレームがポスターフレームとして表示されます。

controls属性

controls属性は、音声ファイルや動画ファイルにコントロールできるインタフェースを表示します。

autoplay属性

autoplay属性は、音声ファイルや動画ファイルがロードされるとすぐに自動的に再生します。

loop属性

loop属性は、音声ファイルや動画ファイルの再生が終了するたびに再生します。

cite属性

cite属性は、コンテンツの引用元、または変更・削除の参照先を示します。

datetime属性

datetime属性は、テキストが削除(del)・追加(ins)された日時を示します。

<time>要素と一緒に使用すると、機械判読可能なデータ形式で日付や時刻を表します。

async属性

async属性は、スクリプトのダウンロードと非同期に実行されることを指定します。

async属性は、scriptタグで設定した外部スクリプトのみに影響します(src属性が必要です)。

defer属性

defer属性は、ページの解析が終了した時に、スクリプトが実行されることを指定します。

defer属性は、scriptタグで設定した外部スクリプトのみに影響します(src属性が必要です)。

draggable属性

draggable属性は、要素をドラッグ可能かどうかを指定します。

終わりに

書くことは私の情熱であり、人々を助け、刺激することは私の喜びでもあります。ご不明な点がありましたら、お気軽に@madzadevまでお問い合わせください。

私のブログではこういったHTMLの記事やReactなどのJavaScriptの解説記事、フロントエンドの開発に関した解説記事がたくさんあります。

sponsors

top of page

©2022 coliss