2021-05-06初めにcssやjavascriptでカスタムデータ属性が使われている。カスタムデータ属性とは何か、そして使い方について備忘録として残します。※内容に間違いなどがある場合はご指摘をよろしくお願いします。#カスタムデータ属性とはhtmlのタグに固有の値を付与してcssやjavascriptでその値を取得して利用できるようにしたもの。#書き方htmlでカスタムデータ属性を付与したいタグにdata-*という形式で指定。divタグだと以下のようになる。data-属性名=値></div>属性名と値は任意のものであり、自由に指定できる。例として以下のようにdata-hogeというカスタムデータ属性を指定したとします。</section>#cssで利用する場合まずhtmlのdivタグにdata-hogeというカスタムデータ属性を付与します。1セレクターとして使う[data-属性名]という書き方でセレクターとして使います。red;}2擬似要素として使う擬似要素afterやbeforeの中身としてcontentプロパティにattr()関数を使ってカスタムデータ属性の値を渡します。purple;}data-hogeの値"text"が画面に表示されました。値」で新しいカスタムデータ属性を設定できます。20;コンソールで確認すると「data-huga」というカスタムダータ属性ができました。値として"20"と表示されます。「test.dataset.属性名」で簡単に取得できます。変更する値」で値の変更ができます。"hello";console.log(test);コンソールで確認するとtextからhelloに変わっていることがわかります。