Webページやアプリの実装に、知っておくと便利なHTMLの属性のまとめ
Post on:2022年2月17日
sponsors
Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。
24 Lesser-Known HTML Attributes You May Want to Use ✨📚
by Madza (@madzadev)
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。
この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。
HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペットを含めてレビューします。
accept属性
accept属性は、フォームが送信できるファイル形式を指定します。
|
1 |
<input type="file" accept=".jpg, .png"> |
<input>タグのfileタイプでのみ使用でき、カンマで区切られた1つ以上のファイルタイプのリストを記述します。特定のメディアタイプのファイルをすべて許可するには、accept="image/*"を使用します。
autofocus属性
autofocus属性は、ページのロード時に、指定した要素にフォーカスをあてるかどうかを指定します。
|
1 |
<input type="text" autofocus> |
autofocus属性は、ドキュメントまたはダイアログ内の1つの要素にのみ指定することができ、複数の要素に適用すると、最初の要素にフォーカスがあたります。
inputmode属性
inputmode属性は、要素またはそのコンテンツを編集する際に、ユーザが入力するデータの種類を示唆します。
|
1 2 3 |
<input type="text" inputmode="url"> <input type="text" inputmode="email"> <input type="text" inputmode="numeric"> |
主にスマホ向けの機能、入力に適した種類のソフトウェアキーボードを表示します。
pattern属性
pattern属性は、フォームの送信時に、<input>の値をチェックするための正規表現を指定します。
|
1 |
<input name="username" id="username" pattern="[A-Za-z0-9]+"> |
required属性
required属性は、フォームを送信する前に、その要素に入力する必要があることをブラウザに知らせます。いわゆる必須項目です。
|
1 2 3 4 |
<form action="/send_form.js"> Username: <input type="text" name="username" required> <input type="submit"> </form> |
autocomplete属性
autocomplete属性は、フォームでメールアドレスや電話番号などを入力する際に、ブラウザによる自動補完機能を使用します。
|
1 |
<input name="credit-card-number" id="credit-card-number" autocomplete="off"> |
autocomplete属性を使用する際には、nameまたはidを記述する必要があり、<input>のsubmit型も必要です。
multiple属性
multiple属性は、ユーザーがフォームで複数の値を選択できます。
|
1 |
<input type="file" multiple> |
<input>または<select>のfile型またはemail型で使用できます。
download属性
download属性は、ユーザーがリンクをクリックした時に、ターゲットがダウンロードされることを指定します。
|
1 |
<a href="document.pdf" download>Download PDF</a> |
contenteditable属性
contenteditable属性は、ユーザーが要素のコンテンツを編集できます。
|
1 2 3 |
<div contenteditable="true"> This text can be edited by the user. </div> |
readonly属性
readonly属性は、入力フィールドが読み取り専用であることを指定します。
|
1 |
<input type="text" id="sports" name="sports" value="golf" readonly> |
ユーザーは、タブで移動したり、選択してハイライトにしたり、テキストをコピーすることができます。これらのアクションを禁止するには、代わりにdisabled属性を使用します。
hidden属性
hidden属性は、要素を表示するかどうかを指定します。
|
1 |
<p hidden>This text is hidden</p> |
spellcheck属性
spellcheck属性は、要素のスペルミスをチェックするかどうかを定義します。
|
1 |
<p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p> |
通常、spellcheck属性がtrueに設定され、ブラウザがスペルチェックをサポートしている場合でも、編集不可能な要素はすべてチェックされません。
translate属性
translate属性は、ページがローカライズされる際に、その要素を翻訳するかどうかを指定します。
|
1 |
<footer><p translate="no">Printing Works, Inc</p></footer> |
Googleの翻訳機能で、人名や地名や会社名などをそのままの言語で表示させたい場合は、noを設定します。
loading属性
loading属性は、ブラウザが画像を直ちにロードするか、ユーザーが画像の近くまでスクロールするまでスクリーン外の画像のロードを延期するように指定します。
|
1 |
<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy"> |
eagerはデフォルトの動作で、lazyはロードを遅延させるために使用します。
参考: Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート
onerror属性
onerror属性は、文書や画像などがロードされなかった場合に、フォールバック画像を表示できるように設定できます。
|
1 |
<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"> |
this.onerror=nullは、フォールバック画像そのものがない場合に、ループを防ぐために使用されます。
poster属性
poster属性は、動画ファイルを読み込むまでの間、表示させる画像を設定します。
|
1 2 3 4 |
<video src="https://cdn.mysite.com/media/video.mp4" poster="image.png"> </video> |
poster属性を指定しなかった場合は、動画の最初のフレームが利用可能になるまで何も表示されず、その後最初のフレームがポスターフレームとして表示されます。
controls属性
controls属性は、音声ファイルや動画ファイルにコントロールできるインタフェースを表示します。
|
1 2 3 |
<audio controls source src="track11.mp3" type="audio/mpeg"> </audio> |
autoplay属性
autoplay属性は、音声ファイルや動画ファイルがロードされるとすぐに自動的に再生します。
|
1 2 3 4 |
<video autoplay src="https://cdn.mysite.com/media/myvideo.mp4" poster="image.png"> </video> |
loop属性
loop属性は、音声ファイルや動画ファイルの再生が終了するたびに再生します。
|
1 2 3 |
<audio loop source src="track323.mp3" type="audio/mpeg"> </audio> |
cite属性
cite属性は、コンテンツの引用元、または変更・削除の参照先を示します。
|
1 2 3 |
<blockquote cite="https://mysite.com/original-source-url"> <p>Some awesome quote</p> </blockquote> |
datetime属性
datetime属性は、テキストが削除（del）・追加（ins）された日時を示します。
|
1 2 3 4 5 6 |
<p> My plans for 2021 include visiting Thailand, <del datetime="2021-01-01T18:21">creating 6 courses,</del> <ins datetime="2021-02-02T14:07">writing 12 articles.</ins> </p> <p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p> |
<time>要素と一緒に使用すると、機械判読可能なデータ形式で日付や時刻を表します。
async属性
async属性は、スクリプトのダウンロードと非同期に実行されることを指定します。
|
1 |
<script src="script.js" async></script> |
async属性は、scriptタグで設定した外部スクリプトのみに影響します（src属性が必要です）。
defer属性
defer属性は、ページの解析が終了した時に、スクリプトが実行されることを指定します。
|
1 |
<script src="script.js" defer></script> |
defer属性は、scriptタグで設定した外部スクリプトのみに影響します（src属性が必要です）。
draggable属性
draggable属性は、要素をドラッグ可能かどうかを指定します。
|
1 2 3 4 5 6 7 8 9 10 |
<script> const allowDrop = (e) => e.preventDefault(); const drag = (e) => e.dataTransfer.setData("text", e.target.id); const drop = (e) => { var data = e.dataTransfer.getData("text"); e.target.appendChild(document.getElementById(data)); } </script> <div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div> <p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p> |
終わりに
書くことは私の情熱であり、人々を助け、刺激することは私の喜びでもあります。ご不明な点がありましたら、お気軽に@madzadevまでお問い合わせください。
私のブログではこういったHTMLの記事やReactなどのJavaScriptの解説記事、フロントエンドの開発に関した解説記事がたくさんあります。
sponsors
