すごいぞHTML5!!意外と何でもできるぞ

どうも、こんにちは。Web屋なのにWebのこと何も知らないおじさんです。

ブログで遊んでると、imgタグにsrcset属性なんかが追加されていることを発見したり、Speech Synthesis apiなるものを発見したり、知らないことだらけなことに気づきました。

とう言うことで、実はHTMLタグってかなり進化してるんじゃね？っと思って調べてみると、案の定僕の知らない便利機能がいっぱいだったので、雑に記事にします。

元ネタはこちらですので↓。お急ぎの方はこちらを。

10 useful HTML5 features, you may not be using - DEV Community 👩‍💻👨‍💻

とりあえず動くやつ

実際のコード

detailsタグ

こいつは、jsなしでアコーディオンメニューを作ってくれます!!すごい!!

    <details>
      <summary>クリックすると開くよ</summary>
      <ul>
        <li>リスト</li>
        <li>リスト２</li>
        <li>リスト3</li>
        <li>リスト4</li>
      </ul>
    </details>

contenteditable属性

個人的にかなりお気に入りなのが、contenteditable属性。なんとこいつをtrueにするといろんなものが編集可能になります。（もちろん保存はされませんが） 使い所がいまいちわからないところが、お気に入りです。

    <ul class="content-editable" contenteditable="true">
      <li>1. 編集できるリストです</li>
      <li>2. よかったら試しに編集してください</li>
      <li>3. しないんですか？</li>
    </ul>
    <button contenteditable="true">このボタンも編集できます</button>

markタグ

ハイライトしてくれます。

    <p>
      検索機能とかつくるときに<mark>ハイライト</mark>してくれるタグがあると便利ですね
    </p>

progressバー

プログレスバーです。

<progress value="50" max="100"> ５０% </progress>

カラーピッカー

なんとinputタグってカラーピッカーにできるんですね!!!知らなんだ。 もちろん、選択された値とかの読み取りにはjsが必要ですが、便利。

<input type="color" />

webassemblyとか今流行りのイケイケの技術を勉強する前に、cssとかhtmlとかをちゃんと勉強し直す必要があることを再確認しました。

ホイジャーまたー。