HTML5の10の新機能 あなたは知ってますか？

はじめに

本記事はTapas Adhikaryさんより許可を得て、『10 useful HTML5 features, you may not be using』をやっすんが日本語にまとめたものです。

完全訳ではないので、ご興味をもたれた方は、ぜひオリジナルもご確認していただければと思います。
10 useful HTML5 features, you may not be using

動画も用意しているので、動画でさらっとみたい方はこちらをどうぞ！

【YouTube動画】 あなたの知らない HTML5 10の機能

Detailタグ

では早速やっていきます！
Detailsタグを使うと、文字の折りたたみができます！

See the Pen Detail Tag by yassun-youtube (@yassun-youtube) on CodePen.

実はQiitaでも使えます。
以下のように、クリックすると折りたたんだ文章を展開できます！

クリックしてみると...

Hello World # Hello World

hello world!!!

こんな感じで書いてます。

<detail>
<summary>クリックしてみると...</summary>

<div>
<!-- 
表示したい内容
マークダウンも使えます
-->
</div>
</detail>

Content Editable

属性にcontenteditable="true"を追加すると、コンテンツの編集が可能になります。

See the Pen Content Editable by yassun-youtube (@yassun-youtube) on CodePen.

Map

(このタグはHTML4から使えた気がしますが、細かいことは忘れましょう！)

mapタグを設定して、coordsでリンク場所を指定することができます。
codepenで再現すると、戻れなくなるので、本家からお試しください！
https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0#map

<div>
  <img src="https://html5-tips.netlify.app/map/circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
  <map name="circusmap">
    <area shape="rect" coords="67,114,207,254" href="https://html5-tips.netlify.app/map/elephant.htm">
    <area shape="rect" coords="222,141,318, 256" href="https://html5-tips.netlify.app/map/lion.htm">
    <area shape="rect" coords="343,111,455, 267" href="https://html5-tips.netlify.app/map/horse.htm">
    <area shape="rect" coords="35,328,143,500" href="https://html5-tips.netlify.app/map/clown.htm">
    <area shape="circle" coords="426,409,100" href="https://html5-tips.netlify.app/map/clown.htm">
  </map>
 </div>

Mark

markタグを使うと、文字の背景にハイライトをつけることができます。

See the Pen Mark by yassun-youtube (@yassun-youtube) on CodePen.

data-* attribute

任意に設定した値にJS側でアクセスできるようになります。

See the Pen data-* attribute by yassun-youtube (@yassun-youtube) on CodePen.

Output

data-* attributeで入力値をJS側で計算して出力しなくても、HTMLだけで完結できます。

See the Pen Output Tag by yassun-youtube (@yassun-youtube) on CodePen.

oninputの部分を以下のように、textContentにすれば、outputタグ以外でも同じような使い方ができます。

oninput="x.textContent=parseInt(a.value) * parseInt(b.value)"

See the Pen ZEOMZrE by yassun-youtube (@yassun-youtube) on CodePen.

Datalist

datalistとoptionを組み合わせることで、データを選ぶことができます。
また、存在しない単語を入力すると、その単語が追加されます。

codepenで実行すると、警告画面がでますが、右下のRerunで元の画面に戻ります。
戻ると、先ほど入力した値が入っているのが確認できますね。

See the Pen Datalist by yassun-youtube (@yassun-youtube) on CodePen.

Range

HTMLだけでRangeバーが作れます。

See the Pen Range by yassun-youtube (@yassun-youtube) on CodePen.

Meter

今何%入力が終わりました... みたいな使い方ができます。

See the Pen Meter(Progress) by yassun-youtube (@yassun-youtube) on CodePen.

Pattern

pattern属性で正規表現を設定すると、HTMLだけでバリデーション付きの入力フォームを作成できます。

See the Pen Inputs by yassun-youtube (@yassun-youtube) on CodePen.

color picker

input type='color'で、カラーピッカーも使えます！

See the Pen Color Picker by yassun-youtube (@yassun-youtube) on CodePen.

まとめ

知っている、使ったことがあるHTMLの機能はいくつありましたか？

実際のプロダクトで使うのは難しそうですが、簡単なサイトで使えると楽しいですね。

興味をもった方はぜひ、本家もご確認ください！
10 useful HTML5 features, you may not be using