CSSでも大活躍！？data属性で、あなたのコーディングに+αを！

Author: T.K Category: CSS

フロントエンド
エンジニア

T.K

皆様お久しぶりです！フロントエンドエンジニアのT.Kです。

弊社マスコット
キャラクター

ロージー

久しぶりしゅこね！
T.Kの記事執筆は5ヶ月ぶりしゅこ！

フロントエンド
エンジニア

T.K

えっ！？もうそんなに書いてなかったっけ？？？

フロントエンド
エンジニア

T.K

しゅこ～

気づけば季節は春、だいぶ暖かくなってきたとはいえ
まだ肌を出すには早いそんなこの時期、皆様いかがお過ごしでしょうか。
私T.Kは早く夏服を着たくてウズウズしながら
メロディックパワーメタルを聴いて体を夏にする、そんな日々を送っております。

さて、今回のテーマはdata属性の使い方。

あなたのコーディングがもっと楽になる、data属性の便利な使い方を大公開！

data属性とは？

data属性とは、HTML5から追加された属性の一つ。

下記のようにdata-hoge(hogeは任意に設定可能です)と記述するだけで、data属性を設定できます。

<div data-color="red">

どう使うの？

それではdata属性を使うと便利になるシーンを、紹介していきたいと思います。

ワシまだHTML初心者やし、
まだdata属性はやらんでもええか…

弊社
マスコット
キャラクター

カール

フロントエンド
エンジニア

T.K

カール、そんなことは決してないしゅこよ。
むしろ俺はもっと早く知りたかったしゅこ。

CSSの属性セレクタで、外見を出し分ける

例えばジャンル毎にラベルをつけて、色と文言を変えたい場合。

data属性を設定し、CSSに属性セレクタを記述することで、簡単に外見を出し分けることが可能です。

See the Pen GRNwOgB by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

クラスで出し分けてもいいのでは？

さて、外見の出し分けという点で、必然的に出てくるであろうこの疑問。

確かにそのとおりですが、data属性を使うと

他のクラスと衝突しない

というメリットが得られます。

私がコーディング初心者の頃、

他人のコーディングを引き継いだとき、CSS名が衝突して変な見た目になる

ということが非常によくありました。

data属性を用いることで、特に意識せずとも他のクラスと衝突せずに済むのです。

(なお私は、他のクラスと衝突しないようなCSS名をつけるようにしています)

CSSの属性セレクタで、状態を出し分ける

  • ハンバーガーメニュー
  • 開閉メニュー
  • トースト表示

というように、JavaScriptにより表示が切り替わる系のものを作る際

このdata属性が非常に役立ちます。

data属性を使って開閉メニューを実装したものを下記に示します。

See the Pen VwmEwRJ by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

従来ではdata-is-openの代わりに.is-openといったクラス名をつけて実装していましたが

data-is-openという名前のdata属性を用いると、状態が分かりやすくなったのではないでしょうか？

<!-- クラスで実装する場合 -->
<div class="tab is-open"></div>

<!-- data属性で実装する場合 -->
<div class="tab" data-is-open="true"></div>

加えてCSSも衝突しないので、より便利にCSSを記述することができます。

私は状態切り替えを実装する際は必ずdata属性を使っています。

すごく便利なので皆様も一度お試しあれ

JSで値を取得・利用できる

ここまではdata属性を使わんでもクラスでまぁなんとかなるわ、というものでしたが

真にdata属性が活躍するシーンはこれ！

まずは下記をご覧ください。

See the Pen JjbmoGV by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

aタグをクリックした際、そのクリックされた箇所についているdata-color属性の値を取得し、利用しています。

このように要素にデータを持たせて、それをJavaScript中で使用したい場合

data属性は非常に大きな力を発揮します。

疑似要素のcontentにdata属性の内容を適用

皆様は、

疑似要素のcontentに属性値を挿入できる

というのをご存じでしょうか？

私は最近知りました。

当然ながらdata属性も属性の一つ。

独自に設定したdata属性の値を、content内で使用することができます！

See the Pen mdOzdqZ by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.

こうすると、beforeやafter要素に対し1個ずつcontentを記述しなくてもいいので、記述が少なくて済みます。

特にCMSなどでは活躍しそうです。CSSを動的に出力しようと頑張るのは大変ですしね。

おわりに

いろんな使い方ができる、このdata属性。

皆様もぜひこのdata属性を使いこなして、幸せになってください！

ところで

私達ロジカルスタジオは、フロントエンドエンジニアを募集しております！

data-strong-pointを生かして働きたいそこのあなた！ぜひ以下からご応募くださいませ！