Internet Explorerが終わって使えるHTMLタグ
TT
広報担当T.Tです。長らくWEBフロント周りを担当していますが、2022年6月16日を過ぎ、全て良い思い出に変わりました。あんなこと・・・こんなこと・・・あったでしょう。ねぇ皆さん。もう考えなくていいんですよ。
「さようなら。全てのInternetExplorer」
というわけでIEが終わり、気にせず使うことが出来るようになった便利なHTMLタグの一部をご紹介します。
1.<picture> 画面幅による画像切替もこれで一発
2.<details> <summary> 簡単に折りたたみメニューができてjsいらず
3.<input> においての最低文字数 バリデーションいらず
1.
<picture> <source srcset="big.jpg" media="(min-width: 800px)"> <<source srcset="middle.jpg 468w" > <img src="small.jpg" alt="画像切替もこれで一発"> </picture>
■ざっくり解説
2.
<details> <summary">メニュー</summary"> jsいらずでメニューがびろ～ん </details>
上記タグのサンプル↓
メニュー
jsいらずでメニューがびろ～ん■ざっくり解説
<details>属性でopenを指定すると最初から開いた状態に
<summary> 詳細情報の要約になります。
3.minlengthで最小文字数を設定してバリデーションいらず
<input> type="text" minlength="5">
CSSを使って4文字以下は
背景色でエラーであることを表現 ↓
■ざっくり解説
指定した文字数以上入力がないと有効になりません。
要素が有効かどうかをスタイルでも表現できるのでわかりやすい。
以上、簡単ながらHTMLタグのご紹介でした。今後の案件に十分使えそうです！
執筆者：TT