tanatiyo コーディング課題【中級Ex編】取組み中のメモ。
今回はdata属性について調べたことを簡単にメモしておきます。
data属性はタグの中に「data-**=”****”」(**は自由につけられる)と記述して使用↓
<div date-column="3"></div>
<div data-color= "blue"></div>このdata属性ですが、「特定の要素に関連づける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されている」(MDNより参照)とのこと。
また、javascriptからもCSSからもアクセスできるので、CSSのクラス名などと役割をハッキリ分けて使えば、保守の面でも、メリットがありそうです。
クローラーがインデックスを付けない場合があることや、ブラウザによってはサポートしていないなど、問題点もありますが、data属性を使えるようになるといろいろと便利に実装していけそうです。
【参考サイト】
https://logical-studio.com/develop/web/20210312-the-uses-of-data-property/
