コーディング課題【中級Ex編】取組み中のメモ。
今回はdata属性について調べたことを簡単にメモしておきます。
data属性はタグの中に「data-**=”****”」(**は自由につけられる)と記述して使用↓
|
1 2 |
<div date-column="3"></div> <div data-color= "blue"></div> |
このdata属性ですが、「特定の要素に関連づける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されている」(MDNより参照)とのこと。
また、javascriptからもCSSからもアクセスできるので、CSSのクラス名などと役割をハッキリ分けて使えば、保守の面でも、メリットがありそうです。
クローラーがインデックスを付けない場合があることや、ブラウザによってはサポートしていないなど、問題点もありますが、data属性を使えるようになるといろいろと便利に実装していけそうです。
【参考サイト】
CSSでも大活躍！？data属性で、あなたのコーディングに+αを！ | Logical Studio Blog
フロントエンド エンジニア T.K 皆様お久しぶりです！フロントエンドエンジニアのT.Kです。 弊社マスコット キャラクター ロージー 久しぶりしゅこね！ T.Kの記事執筆は5ヶ月ぶりしゅこ！ フロントエンド エンジニア T.K えっ！？も...
logical-studio.com
