投稿日:2015年2月2日 更新日:2021年12月9日 CSS, HTML 759文字:約2分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/2156 HTML5から「独自データ属性」または「カスタムデータ属性」と呼ばれる新しい仕様が追加されました。 この機能により、任意のhtmlの要素に接頭語「data-」で始まる属性値を付与することで、プライベートな値を設定できるようになりました。 一例として以下のようなHTMLが記述できるようになっています。 <ul> <li data-list="first">第1のリスト</li> <li data-list="second">第2のリスト</li> <li data-list="third">第3のリスト</li> </ul> ここでは仮に「data-list」という独自データ属性を付与し、それぞ
![HTML5の独自データ属性にCSSを効かせる方法。](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7d4f284a1ff6410b1862ae7eb0b3ce34d31fce6/height=288;version=1;width=512/https%3A%2F%2Fon-ze.com%2Fwordpress%2Fwp-content%2Fthemes%2Fonze-2022%2Finc%2Fthumbnail%2F600x360x80-68bc9d2fdb4bf59ee759170ca0061871-badge_html5.png)