IT, Web

Internet Explorerが終わって使えるHTMLタグ

広報担当T.Tです。長らくWEBフロント周りを担当していますが、2022年6月16日を過ぎ、全て良い思い出に変わりました。あんなこと・・・こんなこと・・・あったでしょう。ねぇ皆さん。もう考えなくていいんですよ。


「さようなら。全てのInternetExplorer」


というわけでIEが終わり、気にせず使うことが出来るようになった便利なHTMLタグの一部をご紹介します。

 

1.<picture> 画面幅による画像切替もこれで一発
2.<details> <summary> 簡単に折りたたみメニューができてjsいらず
3.<input> においての最低文字数 バリデーションいらず

 
 

1.<picture> 画面幅による画像切替もこれで一発

<picture>
    <source srcset="big.jpg" media="(min-width: 800px)">
    <source srcset="middle.jpg 468w">
    <img src="small.jpg" alt="画像切替もこれで一発">
</picture>


■ざっくり解説
<picture>タグ内は<source>要素を0個以上。<img>要素を1つ含めて様々な画面幅に対応することができます。

<source>
 ・media属性でメディアクエリを指定可能。
 ・srcset属性は寸法に基づいた画像切り替えが可能。

<img>
 ・画像の大きさ、属性情報
 ・<source>の画像が使用できなかった時の代替案



 

2.<details> <summary> 簡単に折りたたみメニューができてjsいらず

<details>
    <summary>メニュー</summary>
    jsいらずでメニューがびろ~ん
</details>

 

上記タグのサンプル↓

メニュー jsいらずでメニューがびろ~ん


■ざっくり解説

<details>   属性でopenを指定すると最初から開いた状態に
<summary>  詳細情報の要約になります。

 
 

 

3.minlengthで最小文字数を設定してバリデーションいらず

<input type="text" minlength="5">

CSSを使って4文字以下は
背景色でエラーであることを表現 ↓

 


■ざっくり解説

指定した文字数以上入力がないと有効になりません。
要素が有効かどうかをスタイルでも表現できるのでわかりやすい。

 

以上、簡単ながらHTMLタグのご紹介でした。今後の案件に十分使えそうです!