HTMLでカスタム属性（data属性）を使う方法をわかりやすく解説

HTMLでは、独自のカスタム属性を作成できます。作成したカスタム属性は、CSSでスタイリングしたり、JavaScriptで動作を制御したりするために活用できます。

カスタム属性の名前は自由に決められますが、必ず data- という接頭辞（プレフィックス）を付ける必要があります。基本の書式は以下のとおりです。

<tag data-custom-attribute-name="value">コンテンツ</tag>

カスタム属性の実例：クリックすると食品の種類を表示する

具体例として、「りんご（Apple）」という食品要素を考えてみましょう。ユーザーがこの要素をクリックしたときに、それがどんな種類の食品なのかをポップアップダイアログで表示したいとします。

そのために、food-type というカスタム属性を作成し（data- 接頭辞を忘れずに！）、中身に「Apple」というテキストを持つ <div> 要素に追加します。

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

この機能を動かすためのJavaScriptコードは次のとおりです。

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

HTMLコードの仕組み

• まず、<div> 要素に onclick 属性を追加しました。これはイベント属性の一つで、クリックを検知するイベントリスナーを要素に紐づけます。
• 次に、onclick 属性の値として showDetailsBox(this) を指定しています。
• showDetailsBox() は、「Apple」テキスト要素がクリックされた瞬間に呼び出されるJavaScript関数の名前です。
• (this) の this は、そのオブジェクト自身（この場合は div 要素）を参照する引数です。初心者には少し難しい概念なので、今は完全に理解できなくても問題ありません。
• id はHTMLに組み込みの属性で、要素に一意のIDを割り当てるために使います。ここでは apple というIDを設定しています。

JavaScriptコードの仕組み

JavaScriptの詳細な解説は本チュートリアル（HTML入門）の範囲外なので、ここでは簡潔に説明します。

onclick イベント属性によって showDetailsBox() 関数が呼び出されると、関数内のコードブロック { ... } の内容が順番に実行されます。

function showDetailsBox(food) {
  ...
}

1行目： カスタム属性 data-food-type を持つHTML要素を取得し、その属性値を foodType という変数に代入しています。

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

2行目： 組み込みの alert() メソッドを実行し、ポップアップダイアログに foodType の値（この例では fruit）を表示します。

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

上記のコード例をすべて完璧に理解できなくても心配いりません。特に初心者のうちは、覚えるべきことが多くて当然です。練習を重ねれば、きっと自然と理解できるようになりますよ。

HTML属性についてさらに詳しく学びたい方は、MDN Web Docs のHTML属性リファレンスを読んでみることをおすすめします。

注意点：data属性に重要なコンテンツを入れないこと

重要： ユーザーに見えていてアクセス可能であるべき重要なコンテンツを、data属性の中に格納しないでください。支援技術（スクリーンリーダーなど）がdata属性の値にアクセスできない場合があるためです。また、検索エンジンのクローラーもdata属性の値をインデックスしない可能性があります。SEOに関わる重要なコンテンツは、data属性ではなく通常のHTML要素内に記述しましょう。