フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

CSS

html5のdata属性をcss/scss/jsで利用する

2017年03月12日

2017年03月13日

Pocket

data属性のcss/jsでの読み込みとscssとの連携

以前から知ってはいたけどいまいち有効な利用方法が分からなかったdata属性。
使わなくてもwebサイトは作ることができるので、必要性を感じずこれまで使わずにいましたが、調べてみると結構色々とできるようなのでサンプルをまとめてみました。

SAMPLE

1.attr()を使ったcssでの値の読み込み

タグに付与したdata属性値はcssのattr({data名})で読み込めます。

現状疑似要素のcontent内でしか使えないようですが、拡張されてcolorやurlなどでも使えるようになると用途が増えそうですね。

ホバー時の色変化

HTML

CSS

疑似要素に色違いの文字を配置して、時間経過で色付き文字をスライド表示させるサンプルです。

日本語と英語のメニュー

HTML

CSS

通常2段組にタグを書かなければならないところを、data属性を擬似要素から出力することで一行のタグで2段組のメニューが作れます。

これらのサンプルは下記サイトを参考にさせていただきました。

data属性を利用したナビゲーションの実装サンプル

2.SCSSと連携した記述

SCSSを使いだしてすっかりBEMベースの命名規則に慣れてしまって、マルチクラスなどで肥大化する一方のclass。
一つのフォーマットでいくつかのカテゴリや状態などのバリエーションへの対応をdata属性に振り分けたほうがソースの可読性が良くなります。
BEMで言うところのmodifierをdata属性に置き換える感じです。

カテゴリの色分け

HTML

SCSS(complass)

よくある更新情報に付くタグをカテゴリ別色に分け。
SCSSの連想配列を組んでkeyにカテゴリ名(スラッグ)、valueに色を記述して@eachで回しています。
「カテゴリ名:色」の配列で管理するので変更もカンタンですね。

タグ内の文字列も配列にしようと思ったのですが、よく考えたらwordpressのカテゴリ情報から引っ張るほうが楽だし利便性も良いですよね。
ちなみにデフォの色を該当セレクタに指定しておかないと、指定していないカテゴリが真っ白になってしまうので注意。

カテゴリ別にアイコンをつける

次は色付きタグではなく、タイトルの前にアイコンを付けます。

HTML

SCSS(compass)

こちらも色付きタグと同様に連想配列にFont Awesomeのユニコードを記述します。
それを上と同じ要領で@eachで回して疑似要素::beforeのcontentにあてるだけ。

注意すべきはユニコードの前に「\(バックスラッシュ)」をつけることと、疑似要素内に「font-family: FontAwesome;」を入れないと表示されない点です。

ポストイット風(?)記事一覧の色分け

少し発展させて、今度はブロックごと色を変えてみます。

HTML

SCSS(compass)

とは言ってもやってることはほぼ同じ。
ターゲットになるブロックの親セレクタにdata属性を付与して、該当のdata属性を持つ子要素に対して色をつけています。
&(アンパサンド)を使えば親要素から子要素の指定はもちろん、子要素を軸に親要素の属性判定もできます。

難点を言えば子要素を軸にした場合、親要素のセレクタは固定になってしまうことでしょうか。
javascriptみたいに親要素のセレクタを呼び出せるともっと楽なんですけどね。

3.jqueryで値を取得する

最後はjqueryでdata属性の値を取得する方法です。
jqueryでは値を取得するメソッドがdataとattrと2つ存在します。

それぞれ仕様が違い、またjquery側で属性の消去する方法などやや煩雑なります。
そのあたりは下記サイトで詳しく説明されていますので参照してください。

HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法

簡易ライトボックス

jqueryを使ったライトボックスです。

HTML

CSS

jquery

サムネイル画像には縮小サイズの画像、data属性にはフルサイズの画像ファイル名を入れておきます。
サムネイルをクリックするとimg src内のdata属性からファイル名を読み込み、拡大表示する方法です。

原理としてはライトボックス系プラグインではよくある手法じゃないでしょうか。
尚、スクリプトは簡易的なものなので実際の運用には表示位置やサイズなど、少々手を加える必要があります。

まとめ

以上、data属性を使用したサンプルでした。
phpからjqueryへの値の受け渡しでは時々使ったりしていましたが、アイディア次第で色々使えそうですね!

特にこれまでclassに頼り切っていたバージョン違いや状態変化のフラグなんかでのSCSSとの連携は大いに有用かなと。

Pocket

このカテゴリで良く読まれている記事
関連記事

COMMENT