2017.01.05 Thu

HTML5.1が正式勧告されたことで知っておくと良さそうなこと

新年あけましておめでとうございます。
ジーニアスウェブの杉田です。

巷ではまだお休み中の方もいらっしゃると思いますが、
ジーニアスウェブは昨日より通常どおり営業をしております！

今年の私のお正月は、
自分へのお年玉として、カメラを買い替えました。
おもちゃを与えられた子供のように喜びはしゃぎ
常にシャッターを切りご機嫌な私です。

さて、早速本題に入りますが、
昨年2016年11月1日付でHTML5.1が正式勧告され、
新たに追加・廃止・変更された点があります。
その中から私が気になったものをほんの一部ですが紹介させていただきたいと思います。

<section>で階層化された時の<h1>のネストを廃止

HTML4からHTML5になった時の仕様変更のひとつでもある、
「<section>を入れ子することで階層がマークアップされている場合は
見出しタグのレベルは問わない」というものがありました。
これまでは下記のようなマークアップが可能でしたね。

【変更前】

<section>
<h1>大見出し</h1>
  <section>
    <h1>セクション見出し</h1>
  </section>
  <section>
    <h1>セクション見出し</h1>
    <section>
      <h1>セクション見出し</h1>
    </section>
  </section>
</section>

しかし、当初は<h1>の多用に私は衝撃をうけました。
気持ちが悪い…
<h1>～<h6>までの見出しタグがある意味がない…
私はどうしても受け入れられず、section階層に合わせて見出しタグ使う方法を続けました。

その思いが通じたのでしょうか…
変更前の仕様は廃止になったようです。
そして、下記のようになりました。

【変更後】

<section>
<h1>大見出し</h1>
  <section>
    <h2>セクション見出し</h2>
  </section>
  <section>
    <h2>セクション見出し</h2>
    <section>
      <h3>セクション見出し</h3>
    </section>
  </section>
</section>

やっぱり見出しタグはこうあって欲しいと私は思います。
各セクションごとの適した見出しタグを使うことで、非常に気持ちが良くなりました。

<details>と<summary>で簡単アコーディオン!?

新たに追加になった要素<details>と<summary>で、
今までjsを使用して実装していたアコーディオンのような動きがHTMLのみで出来るようになりました。
よろしければ下記サンプルで動作をご確認ください。

See the Pen MbMRwr by ジーニアスウェブ (@genius-web) on CodePen.0

ご確認いただけましたでしょうか？
今までjsなどで動きを制御していたものが
HTMLのみでこの機能が使えるようになったんです。
ただ、まだブラウザの対応が追いついていないようです。
Chrome, Firefoxは動作確認済みですが、
残念ながらIE,Edgeはまだ未対応なようです。
早々に対応してくれることを願いましょう。

画面サイズによって画像を切り替えることが可能に（CSS,js不要）

こちらもまた新しく追加になった要素<picture>と<source>。
<picture>に、<img>（1個）と<source>（複数可）を入れることで、
画面サイズや解像度で画像の切り替えが可能になりました。

<picture>
  <source media="(min-width: 1024px)" srcset="pc.jpg">
  <source media="(min-width: 768px)" srcset="tablet.jpg">
  <img src="sp.jpg" alt="サンプル画像">
</picture>

最近はレスポンシブサイト制作が増えてきているので、
PCでは横長の写真を使いたいけど、スマホでは正方形の写真を使いたい、
という時なんかにとても便利な記述ですね。