便利そうなHTMLのおはなし

2 min read読了の目安(約2200字

はじめに

なんとなーく雑談しながらコード書いてたときに、

「datalist めっちゃ楽ですよ」って言われて「何それ?」っていうのがきっかけ。

対応ブラウザだのなんだのの話はありますが、知ってるだけでいざというときに引き出せるのでHTMLとかCSS見直そうと思ったのがこの記事のきっかけ。

http://www.htmq.com/html5/

ここ(↑)を参考にざっと見て便利そうなの並べていきます。CSSはいつか書きます。

<datalist>

冒頭でお話ししたインクリメンタルサーチで使えるやつ。
こんな便利なもんあったんかいな!
(↓下記の例だと[y]だけ入力すると[tanaka yutaka]だけ出てくると思います)

api叩いてでっかいデータを整形して入れたりもできそう。
JS書けなくてもでっかいjsonとか書けばインタラクティブっぽいUIができそう。

http://www.htmq.com/html5/datalist.shtml

<details> + <summary>

いわゆるアコーディオン的なUIですね

だれかこれをいい感じにスタイル当てたやつ公開しろください。

http://www.htmq.com/html5/details.shtml

<pre> + <code>

プログラムのコードを表記するときに使うタグ。
マークダウンで書くとあんまり機会ないかな〜と思いつつもページ翻訳とかしたときに巻き込まれないのは素敵。

form 周りの話

validation(属性)

実はHTMLだけで結構validateできます。

<input required> …… 入力必須であることを示す
<input pattern> …… 正規表現で入力値のパターンを指定する
<input min max> …… 入力できる最小値と最大値を指定する

主に使うのはこの辺り。使い所としてはクローズドなアプリケーションとかが良さそう。
JSでがっつり書くのもな〜 みたいな時にサクッとかけます。

ちなみに以下のサイトがいい感じに使用例も載せてくれてました。敬礼

https://www.systemexpress.co.jp/htmlcss/validation.html

multiple(属性)

select box で複数選んだり、複数のファイルアップロードできるやつ。

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/multiple

<optgroup>

select box の中でグルーピングされてるやつですね。
こうやって作ってたんだ。初めて知った。

※こちらは参考サイトからそのままコード転用してます

勝手なイメージですが じゃらん とかでよく見るUIな気がする。

http://www.htmq.com/html5/optgroup.shtml

data -(属性)

tool tipをHTMLと簡単なCSSで表現できるやつ。
ぐらいに思ってたんですが、もっと色々できたんかいな。

(例)async validate

https://qiita.com/Nossa/items/20f10e7a4679b58985b7

(例)tool tip & カスタムの条件分岐でstyle付与

https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/

なんかサンプル作ろうかと思ったんですが、面倒すぎるのd(ry

というかここまでくると流石にJSに任せた方がいい気はします。
まぁでもこんなんまで出来るんやって衝撃はありました。

その他

数字の記号などで見られる下付き文字や上付き文字。
<sub> <sup>

メーター状に描画されるtag。
<progress> <meter>

まぁこれらはおまけみたいなもんですね。
両方使うところが限定的なんですが、「こんなこともできるんや」って知っとくぐらいでいいかと。

補足

冒頭でもお話しした通りこの件は、「HTML / CSS / JS」どれを使うべきか?は配慮していません。
その時々に応じて使用してください。

個人的には工数をかけたく無い時 & 想定ブラウザが対応している場合は使ってもいいかな〜と思います。
使うためには知っとかないとね。ということでざっとまとめました。

さいごに

IE対応という言葉が滅びますように。