この記事では「HTMLのdata属性」について解説します。
data属性はHTMLの属性の一つです。HTML5で登場した属性で、独自の名前をいれて使うことができます。例えば、独自の属性を設定してJavaScriptでその属性を取得したり更新したりできるようになります。
data属性の基礎知識と特徴について、いっしょに学習していきましょう。
- HTMLのdata属性の使い方と基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
HTMLのdata属性とは
data属性はHTMLのタグに設定できる属性の一つです。属性とは要素に設定を付与することができるものです。属性はdataの他にもidやstyle、classなどがあります。
data属性はカスタムデータ属性とも呼ばれていて、独自の属性を設定することができます。
基本書式は次のようになります。
基本書式
<div data-○○=”data”>テキスト</div>セレクタ[data-○○=”data”]{
プロパティ：値；
}data-○○ の○○の部分を自由に設定することができます。
基本書式にコードを当てはめると、次のようになります。
<div data-box="box-orange" class="box"></div>
<div data-color="box-red" class="box"></div>.box {
width: 200px;
height: 200px;
}
.box[data-box="box-orange"] {
background: orange;
}
.box[data-color="box-red"] {
background: red;
}出力結果
See the Pen html-data by ZeroPlus (@zeroplus-programming) on CodePen.
data属性にスタイルを設定する場合は、要素[data-○○××=”○○××”]の形式で指定します。data-の後ろの部分は、HTMLで設定したものと同じ名称を指定してください。
data-boxに値を設定しなくても、[data-box]の形式でスタイルの設定ができます。
<div data-box="box-orange" class="box">box1</div>
<div data-box class="box">box2</div>.box {
width: 200px;
height: 200px;
}
.box[data-box] {
background: orange;
}出力結果
See the Pen html-data2 by ZeroPlus (@zeroplus-programming) on CodePen.
data属性の使い道：JavaScriptと組み合わせて使う
data属性を使うと、例えば次のようにdata属性で設定したものを疑似要素でブラウザに表示することができます。
<h2 data-sub="サブタイトル">メインタイトル</h2>h2 {
position: relative;
display: inline-block;
}
h2:before {
position: absolute;
content: attr(data-sub);
top: -8px;
left: 50%;
font-size: 10px;
transform: translateX(-50%);
}出力結果
See the Pen html-data-title by ZeroPlus (@zeroplus-programming) on CodePen.
また、data属性はJavaScriptと組み合わせて使うことが多いです。
次のコードは、JavaScriptでdata属性にセットした値を変更する処理をする場合です。
<h2 id="text" data-sub="サブタイトル">メインタイトル</h2>
<script src="main.js"></script>h2 {
position: relative;
display: inline-block;
}
h2:before {
position: absolute;
content: attr(data-sub);
top: -8px;
left: 50%;
font-size: 10px;
transform: translateX(-50%);
}const el = document.getElementById('text');
el.dataset.sub='サブタイトル変更';出力結果
See the Pen html-data-title2 by ZeroPlus (@zeroplus-programming) on CodePen.
要素に設定したidを、変数elで取得しています。datasetでdata属性を更新することができます。datasetのあとのsubは、data属性で設定したdata-subの部分（data-の後ろの部分）を指定します。
このようにすると、JavaScriptでdata属性を取得して中身を変更することができます。
まとめ
HTMLのdata属性について解説しました。data属性はclass属性やid属性に比べて使用頻度は少ないかもしれませんが、使いこなすと便利な属性です。手を動かして学習していきましょう。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
HTMLのdata属性まとめ
- data属性は、独自で属性をカスタマイズできる
- data属性は属性でスタイルを指定できる
- data属性は、JavaScriptと組み合わせて使う
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
