HTML5.1について

今回、HTML5.1について調べました。

少しだけですが、まとめてみました。

<picture>要素、<source>要素のsrcset属性が追加

要素の子要素に要素を配置し、srcset属性に画像を指定することで、レスポンシブに対応した画像の表示が可能になりました。

これにより、スマートフォンとPCで、違う画像を簡単に表示できるようになります。

注意しなければならないことは、<picture>要素の中にある<img>要素で画像を必ず指定しなければならないということです。

<img>要素で画像を指定していないと、srcset属性で画像を指定していても、画像は表示されません。

また、<picture>要素に対応していないブラウザで画像を表示した場合に、<img>要素で指定した画像が表示されます。

追加した情報を<details>要素で指定すると、ディスクロージャー・ウィジェット表示になります。

これにより、ユーザーが表示、非表示を切り替えられるコンテンツが簡単に配置できるようになります。

<header>要素と<footer>要素が、セクショニング要素内に配置されている場合、ネストすることが可能になりました。

これにより、<header>要素と<footer>要素は、常にセクショニング要素に関連づけられます。

余談になりますが、今回調べたことを

Meetup Kansai U30 #1 [フロントエンド]

で発表(LT)しました。

人前で話すことは苦手で、すごく緊張しました。

緊張してちゃんと喋れなかったけれど、とても良い経験になりました。

ありがとうございました。

LTで使用したスライド

参考サイト