以前から知ってはいたけどいまいち有効な利用方法が分からなかったdata属性。使わなくてもwebサイトは作ることができるので、必要性を感じずこれまで使わずにいましたが、調べてみると結構色々とできるようなのでサンプルをまとめてみました。SAMPLE1.attr()を使ったcssでの値の読み込みタグに付与したdata属性値はcssのattr({data名})で読み込めます。現状疑似要素のcontent内でしか使えないようですが、拡張されてcolorやurlなどでも使えるようになると用途が増えそうですね。ホバー時の色変化HTML[crayon-5e59e40c699b3465123875/]CSS[crayon-5e59e40c699bb333502766/]疑似要素に色違いの文字を配置して、時間経過で色付き文字をスライド表示させるサンプルです。日本語と英語のメニューHTML[crayon-5e59e40c699be934385897/]CSS[crayon-5e59e40c699c0628830839/]通常2段組にタグを書かなければならないところを、data属性を擬似要素から出力することで一行のタグで2段組のメニューが作れます。これらのサンプルは下記サイトを参考にさせていただきました。data属性を利用したナビゲーションの実装サンプル2.SCSSと連携した記述SCSSを使いだしてすっかりBEMベースの命名規則に慣れてしまって、マルチクラスなどで肥大化する一方のclass。一つのフォーマットでいくつかのカテゴリや状態などのバリエーションへの対応をdata属性に振り分けたほうがソースの可読性が良くなります。BEMで言うところのmodifierをdata属性に置き換える感じです。カテゴリの色分けHTML[crayon-5e59e40c699c2796811445/]SCSS(complass)[crayon-5e59e40c699c4479756397/]よくある更新情報に付くタグをカテゴリ別色に分け。SCSSの連想配列を組んでkeyにカテゴリ名(スラッグ)、valueに色を記述して@eachで回しています。「カテゴリ名:色」の配列で管理するので変更もカンタンですね。タグ内の文字列も配列にしようと思ったのですが、よく考えたらwordpressのカテゴリ情報から引っ張るほうが楽だし利便性も良いですよね。ちなみにデフォの色を該当セレクタに指定しておかないと、指定していないカテゴリが真っ白になってしまうので注意。カテゴリ別にアイコンをつける次は色付きタグではなく、タイトルの前にアイコンを付けます。Awesomeのユニコードを記述します。それを上と同じ要領で@eachで回して疑似要素::beforeのcontentにあてるだけ。FontAwesome;」を入れないと表示されない点です。ポストイット風(?)記事一覧の色分け少し発展させて、今度はブロックごと色を変えてみます。HTML[crayon-5e59e40c699cb368343741/]SCSS(compass)[crayon-5e59e40c699ce591846139/]とは言ってもやってることはほぼ同じ。ターゲットになるブロックの親セレクタにdata属性を付与して、該当のdata属性を持つ子要素に対して色をつけています。&(アンパサンド)を使えば親要素から子要素の指定はもちろん、子要素を軸に親要素の属性判定もできます。難点を言えば子要素を軸にした場合、親要素のセレクタは固定になってしまうことでしょうか。javascriptみたいに親要素のセレクタを呼び出せるともっと楽なんですけどね。3.jqueryで値を取得する最後はjqueryでdata属性の値を取得する方法です。jqueryでは値を取得するメソッドがdataとattrと2つ存在します。それぞれ仕様が違い、またjquery側で属性の消去する方法などやや煩雑なります。そのあたりは下記サイトで詳しく説明されていますので参照してください。簡易ライトボックスjqueryを使ったライトボックスです。HTML[crayon-5e59e40c699d0225608307/]CSS[crayon-5e59e40c699d2876640028/]jquery[crayon-5e59e40c699d4205084423/]サムネイル画像には縮小サイズの画像、data属性にはフルサイズの画像ファイル名を入れておきます。src内のdata属性からファイル名を読み込み、拡大表示する方法です。原理としてはライトボックス系プラグインではよくある手法じゃないでしょうか。スクリプトは簡易的なものなので実際の運用には表示位置やサイズなど、少々手を加える必要があります。まとめ以上、data属性を使用したサンプルでした。phpからjqueryへの値の受け渡しでは時々使ったりしていましたが、アイディア次第で色々使えそうですね!特にこれまでclassに頼り切っていたバージョン違いや状態変化のフラグなんかでのSCSSとの連携は大いに有用かなと。TweetPocketこのカテゴリで良く読まれている記事CSSでフキダシやリボンを作る方法!疑似要素で利用するborderの基礎を理解する。レスポンシブで使える比率を固定したボックスCSS3のtransform:skewでナナメに変形した時の表示位置を制御するhtml5のdata属性をcss/scss/jsで利用するテクスチャ1枚とCSS3のbackground-blend-modeでグランジ表現をしてみる関連記事html5のdata属性をcss/scss/jsで利用するCSS3のtransform:skewでナナメに変形した時の表示位置を制御するレスポンシブで使える比率を固定したボックステクスチャ1枚とCSS3のbackground-blend-modeでグランジ表現をしてみるCSSでフキダシやリボンを作る方法!疑似要素で利用するborderの基礎を理解する。Cancel)次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。