カテゴリー: ウェブ制作

タグ:HTML5.1(1)  

HTML5.1で追加された新機能!JS・JQueryに頼らずここまでできる

2016年11月1日にW3Cより正式勧告があったHTML5.1

勧告から3ヶ月以上が経った現在でも、追加された機能のほとんどは主要ブラウザ全てに対応していません。

今後、現場ベースで使えるようになって行くことに期待をこめて、今回はHTML5.1で追加されたものの中から使える機能をピックアップして紹介していきます!

<picture>タグで画像を切り替える

今までJavaScriptやCSSでしか行えなかった画像の切り替えですが、<picture>の記述のみで可能になりました。例として以下の画像を用意してみました。

ウインドウサイズを狭めていき、1000px以下になった時に自動的に画像が切り替わっているのが確認できると思います。そして、これがそのために必要なソースです。

<picture>
<source media="(min-width: 1000px;)" srcset="min1000.jpg">
<img src="max999.jpg">
</picture>

たったこれだけのマークアップです!
PCサイズとSPサイズで表示する画像を切り替えるケースは頻繁に存在すると思いますが<picture>タグを使用すると、それらの作業が格段に短縮できます。

<details>タグと<summary>タグで詳細情報を開閉式に

<details>タグと<summary>タグを使用するだけで、アコーディオンメニューの様に詳細情報を収納することができます。実際に作成してみました。

ナビメニューにある天気予報は当たりますか?

Livedoorの天気予報データを呼び出しています。当たるかと聞かれると、わかりません。
天気予報とはそういうものです。

JSやJQueryを使用せずに、こんなメニューが作れました。こちらもマークアップはたったこれだけです。

<details>
<summary>ナビメニューにある天気予報は当たりますか?</summary>
<p>Livedoorの天気予報データを呼び出しています。当たるかと聞かれると、わかりません。</p>
<p>天気予報とはそういうものです。</p>
</details>

シンプルなソースでマークアップできるだけでなく詳細表示時には<details>にopen属性も付与してくれるので、CSSでスタイルも付けやすいと思います!
ちなみに、デフォルトで付いている矢印マークは『list-style-type:none;』で消すことができます。

まとめ

今回紹介した2つもHTML5.1の新機能の中でもごくごく一部に過ぎません。
HTML5からの変更点は下記の記載にまとめられています。
HTML 5.1: Changes – W3C

各要素の現在のブラウザ対応状況を調べることのできるサイトもあるので、HTML5.1の要素を使用する場合は参考にしてみてください。
HTML 5.1 Implementation report – W3C
Can I use… Support tables for HTML5, CSS3, etc

現時点ではまだ制作ベースでHTML5.1で追加されたタグをガンガン使っていくというのは難しい状態です。
しかし今後主要ブラウザで使うことができるようになれば、制作時間や手間が格段に省けるようになると思います。
しかし現在、すでに次のHTML5.2の勧告に向けて、草案も出されています。
今後のアップデートに期待していきましょう!

イベントのご案内

ウェブマーケティング系最大級のイベントが2019年11月23日(土)グランフロント大阪で開催!
10月11日(金)までのお申込みの方は早割の特別料金でご参加いただけます!
詳細はバナーをクリック

ウェブ解析士会議 in Osaka

2017.02.08

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: ツイート: 1

おすすめの記事

TOP