その場で試せるHTMLタグメモ

HTMLには、JavaScriptや大きなUIライブラリを使わなくても、ちょっとした動きを作れるタグがいくつかある。この記事では、実際の挙動をその場で確認できる形でメモしておく。

details / summary

details と summary は、折りたたみUIを作れるタグ。FAQ、補足情報、長いログの開閉などに使いやすい。

summary をクリックすると開閉します。

dialog はネイティブのモーダルを作れるタグ。showModal() と close() を使うと、簡単な確認画面やメモ表示に使える。

ボタンを押すとモーダルが開きます。

meter は既知の範囲内の値やスコア、progress は進行状況を表す。数値を見せる記事やダッシュボード風のメモで便利。

値の意味をHTMLとして表現できます。

datalist は、input に候補リストを付けられるタグ。検索やタグ入力の軽い補助に使える。

入力欄にフォーカスすると候補が出ます。

こういうタグは、記事本文の説明だけだと地味に見える。ただ、実際に触れる状態にすると「これはJavaScriptなしで動く」「これは少しJSを足すと便利」という違いが分かりやすい。今後、CSSプロパティやWeb APIも同じ形式で小さく試せるようにすると、リサーチログとしてかなり使いやすそう。