知っておくと便利なHTML5の機能、要素や属性のまとめ

Post on:2020年10月6日

はじめに

HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つけたものに興味がありますか？あまり使用されていませんが、HTML5の便利な機能を紹介します。

この記事では、今まであまり使用されていなかったけど、現在では有用であるHTML5の機能を10個リストアップしました。また、実際に動作するデモをnetlify.appに作成しました。
あなたの参考になることを願っています。

HTML5 Feature Tips

それでは、それぞれの説明、コード、ちょっとしたアドバイスを始めましょう。今後の記事や情報は、@tapasadhikaryをフォローしてください。

details要素

<details>タグは、オンデマンドの詳細をユーザーに提供します。コンテンツをオンデマンドでユーザーに表示する必要がある場合は、このタグを使用します。デフォルトでウィジェットは閉じており、開くとウィジェットは展開され、中のコンテンツが表示されます。

<details>タグは<summary>タグと一緒に使用して、クリック・タップで表示されるコンテンツを簡単に実装できます。

コード

<details>
     <summary>Click Here to get the user details</summary>
         <table>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Job</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Adam</td>
                    <td>Huston</td>
                    <td>UI/UX</td>
                </tr>
          </table>
  </details>

<summary>Click Here to get the user details</summary>

<table>

<tr>

<th>Location</th>

</tr>

<tr>

<td>Huston</td>

</tr>

</table>

</details>

デモ

<summary>要素をクリック・タップすると、中のコンテンツが表示されます。

デモページ

ちょっとしたアドバイス

GitHubのReadmeで、詳細情報をオンデマンドに表示するために使用してみてください。私のReadmeでは、Reactコンポーネントのプロパティの膨大なリストを最初は非表示にしておき、オンデマンドでのみ表示しています。かっこいいでしょ？

contenteditable属性

contenteditable属性は、コンテンツを編集可能にするために要素に定義できる属性です。div, p, ulなどの要素で機能し、<element contenteditable="true|false">のように指定する必要があります。

注意:
contenteditable属性は、親要素から継承もできます。

コード

<h2> Shoppping List(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>

<h2> Shoppping List(Content Editable) </h2>

<li> 2. Bread </li>

<li> 3. Honey </li>

</ul>

デモ

ul要素にcontenteditable属性を加えると、リストが編集可能になります。

デモページ

ちょっとしたアドバイス

他にも、spanやdiv要素に加えて編集可能にし、CSSのスタイルを使用してリッチなコンテンツにすることもできます。これは入力フィールドで処理するよりもはるかに優れています。ぜひ試してみてください！

map要素

<map>タグは、イメージマップの定義に役立ちます。イメージマップとはその中に1つ以上のクリック可能な領域が含まれている画像です。mapタグはareaタグと一緒に使用し、クリック可能な領域を決定します。クリック可能な領域は、矩形・円・多角形のいずれかです。形状を指定しない場合は、画像全体が考慮されます。

コード

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67,114,207,254" href="elephant.htm">
        <area shape="rect" coords="222,141,318, 256" href="lion.htm">
        <area shape="rect" coords="343,111,455, 267" href="horse.htm">
        <area shape="rect" coords="35,328,143,500" href="clown.htm">
        <area shape="circle" coords="426,409,100" href="clown.htm">
    </map>
 </div>

<div>

</map>

</div>

デモ

画像の一部がクリック可能な領域になります。

デモページ

ちょっとしたアドバイス

HTML5ではクリック領域はarea要素で設定します（HTML4ではa要素も可）。
イメージマップには欠点がありますが、視覚的なプレゼンテーションに使用することができます。例えば、自分の集合写真で個人にクリック可能な領域を設定し、ドリルダウンしてみてはどうでしょうか。

mark要素

<mark>タグを使用して、テキストコンテンツを強調表示します。

コード

 <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>

1	<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>

デモ

テキストをマーカーで引いたように、ハイライト表示するのに便利です。

デモページ

ちょっとしたアドバイス

cssでハイライトのカラーを簡単に変更できます。

mark {
  background-color: green;
  color: #FFFFFF;
}

mark {

background-color: green;

color: #FFFFFF;

}

data属性

data属性は、ページやアプリにプライベートなカスタムデータを保存するために使用されます。保存されたデータはJavaScriptを使用して、さらにユーザーエクスペリエンスを作成できます。

data属性は2つの部分で構成されます。

属性名には大文字を含めないでください。接頭辞data-の後に少なくとも1文字が必要です。
属性の値は任意の文字列にすることができます。

コード

<h2> Know data attribute </h2>
 <div 
       class="data-attribute" 
       id="data-attr" 
       data-custom-attr="You are just Awesome!"> 
   I have a hidden secret!
  </div>

 <button onclick="reveal()">Reveal</button>

<h2> Know data attribute </h2>

<div

class="data-attribute"

id="data-attr"

data-custom-attr="You are just Awesome!">

I have a hidden secret!

</div>

<button onclick="reveal()">Reveal</button>

次にJavaScriptで、

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}

function reveal() {

let dataDiv = document.getElementById('data-attr');

let value = dataDiv.dataset['customAttr'];

document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;

}

注意:
data属性の値をJavaScriptで読み取るには、完全なHTML名（つまりdata-custom-attr）でgetAttribute()を使用できますが、標準ではdatasetプロパティを使用するという簡単な方法が定義されています。

デモ

ボタンをクリックすると、data属性の値を表示します。

デモページ

ちょっとしたアドバイス

data属性を使用してページにデータを保存し、RESTコールでサーバーに渡すことができます。別の使用例としては、通知メッセージの数を表示することもできます。

output要素

<output>タグは計算結果を表示します。通常、この要素は計算結果のテキストを出力するために使用される領域を定義します。

コード

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
   <input type="number" id="a" value="0">
          * <input type="number" id="b" value="0">
                = <output name="x" for="a b"></output>
</form>

* <input type="number" id="b" value="0">

= <output name="x" for="a b"></output>

</form>

デモ

input要素の数値を変更すると、それに合わせて計算結果を出力します。

デモページ

ちょっとしたアドバイス

クライアントサイドのJavaScriptで計算を行い、その結果をページに反映させたい場合は<output>タグを使用してください。getElementById()で要素を取得するという余分なステップを踏む必要はありません。

datalist要素

<datalist>タグはあらかじめ定義されたオプションのリストを指定し、ユーザーがそれに追加できるようにします。オートコンプリート機能を提供しており、ユーザーは簡単に目的のオプションを取得できます。

コード

<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form>

<label for="fruit">Choose your fruit from the list:</label>

</datalist>

</form>

デモ

オートコンプリート機能を備えた入力フォーム。

デモページ

ちょっとしたアドバイス

従来のselectとoptionタグとの違いは、selectタグはオプションから1つ以上のアイテムを選択するものですが、datalistはオートコンプリートをサポートする高度な機能です。

値range

input要素のtype属性の値rangeは、範囲セレクタのようなスライダーを実装できます。

コード

<form method="post">
    <input 
         type="range" 
         name="range" 
         min="0" 
         max="100" 
         step="1" 
         value=""
         onchange="changeValue(event)"/>
 </form>
 <div class="range">
      <output id="output" name="result">  </output>
 </div>

<input

type="range"

name="range"

min="0"

max="100"

step="1"

value=""

onchange="changeValue(event)"/>

</form>

</div>

デモ

定義された範囲内で動作するスライダー。

デモページ

ちょっとしたアドバイス

HTML5にはsliderという要素はありません！

Slider... Incidentally refreshing my knowledge on html5 😁.. This quiz is so timely.. We have input type range for it..

— Tapas Adhikary (@tapasadhikary) August 14, 2020

meter要素

<datalist>タグで、指定された範囲内のデータを測定します。

コード

<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>

<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>

<label for="home">/home/atapas</label>

デモ

デモページ

ちょっとしたアドバイス

<datalist>タグは、プログレスバーのようなユーザーエクスペリエンスのために使用しないでください。HTML5ではそれ用に<progress>タグが用意されています。

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

1 2	<label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress>

プログレスバーは<progress>タグで実装する

input要素

<input>タグは、テキストやパスワードなどの入力としてよく知られています。しかし、いくつか特別な使い方があります。

required

入力欄を必須としてマークアップします。

<input type="text" id="username1" name="username" required>

1	<input type="text" id="username1" name="username" required>

autofocus

input要素にカーソルを置くことで、自動的にフォーカスを提供します。

<input type="text" id="username2" name="username" required autofocus>

1	<input type="text" id="username2" name="username" required autofocus>

正規表現による検証

正規表現を使用してパターンを指定し、入力を検証できます。

<input type="password" 
            name="password" 
            id="password" 
            placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" 
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>

<input type="password"

name="password"

id="password"

placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"

pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>

カラーピッカー

簡単にカラーピッカーを実装できます。

<input type="color" onchange="showColor(event)">
<p id="colorMe">Color Me!</p>

1 2	<input type="color" onchange="showColor(event)"> <p id="colorMe">Color Me!</p>

次に学ぶべきこと

私はいくつか便利なものを残しました。あなたもリストを完成させてみませんか？この記事について、またHTML5について学んだことなど、コメントをお願いします。次回の記事でお会いしましょう。

この記事で使用されているすべてのコードは、下記のgitリポジトリにあります。気に入ったら、スターを付けてください。

HTML Tips Tricks -GitHub

もしあなたの役に立ったのなら、シェアをお願いします。そうすれば、他の人にも届きます。私はUIとUXに情熱を傾けており、記事を通じて知識を共有するのが大好きです。詳しくは私のブログをご覧ください。

質問やコメントがありましたら、@tapasadhikaryまでお願いします。

知っておくと便利なHTML5の機能、要素や属性のまとめ

はじめに

details要素

コード

デモ

ちょっとしたアドバイス

contenteditable属性

コード

デモ

ちょっとしたアドバイス

map要素

コード

デモ

ちょっとしたアドバイス

mark要素

コード

デモ

ちょっとしたアドバイス

data属性

コード

デモ

ちょっとしたアドバイス

output要素

コード

デモ

ちょっとしたアドバイス

datalist要素

コード

デモ

ちょっとしたアドバイス

値range

コード

デモ

ちょっとしたアドバイス

meter要素

コード

デモ

ちょっとしたアドバイス

input要素

required

autofocus

正規表現による検証

カラーピッカー

次に学ぶべきこと

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info