dataset(カスタムdata属性)の活用

この記事はjavascript（やjQuery）等のプログラム以外で「カスタムdata属性」の使用例を見たことが無い、デザイナーさんやフロントエンドエンジニアさん向けに書いています。

カスタムdata属性はjavascriptでいろいろやる時にスクリプトをシンプルで簡単にする時に重宝する仕様なのですが、それだけではなく、cssのみでいろいろ作る時にも活用できる便利なものとなっています。
このページのサンプルのような演出が装飾用のdivやspanを使用せずに、たった1個の「div(span)タグ」と「dataset属性」と「CSSの疑似要素」で作ることができる、というネタを紹介します。

カスタムdata属性とは

一応、紹介しますと、HTML5で追加された dataset仕様(カスタムdata属性)は、HTMLファイルの任意のタグに[data-test="datavalue"]のように
[data-] + [好きな文字列] の記述でオリジナルの属性を書けるというものです。
ググってみると、「jQueryのプラグイン」の使用方法などで、設定部分を data-xxx などに書くようにしているものが多いので、javascriptやjQuery専用の仕様と勘違いしてしまう場合も、もしかするとあるかもしれません。
javascriptの場合は属性値を参照するだけでなく、変更したり、今までなかった属性値を追加することもできますので、cssとは違い、プログラム動作を制御するために使われていたりします。

疑似要素 before (after) に content:attr(属性名)で値取得して表示させる

CSSのみでの活用方法としては、[content:attr(属性名)]で値を取得し、表示させる、という仕様と[hover] [transition効果] [animation]をいろいろ組み合わせる、という感じになります。

サンプル1 余計なタグを増やさず、演出で表示する文字列を属性で指定

サンプル1のようなマウスホバーした時に文字が浮かび上がるボタン演出の場合、（まだHTML5やCSS3にブラウザが完全対応していない頃の記事などで）下記のように重複する文言をspanに入れて並べているサンプルが紹介されているのをよく見かけます。

不要なタグが増えてしまうソース例として、
以下のようなhtmlやcssソースを書いていたり…。

<div class="xxx">
原森情報技術研究所
<span class="yyy">原森情報技術研究所</span>
</div>

.yyy{color:rgba(255,255,255,0);} or .yyy{opacity:0;}
.xxx:hover .yyy{color:rgba(255,255,255,1);} or .xxx:hover .yyy{opacity:1;}
※不要なタグを書いてしまう記述例なので、サンプル1のようにするためのソースではありません。

などのように、親divホバー時に、子spanの文字が見えるような設定にしているかと思います。
ですがHTML的には 原森情報技術研究所 原森情報技術研究所 という重複した文字情報になっています。

そこで、spanに書いている重複した文字情報を [data-***="文言"] のように divタグの属性にして
div の 疑似要素である before(又はafter) に　[content:attr(data-***)] で文字を表示させ、 マウスホバー時に before(又はafter) の文字色変化や透明度変化でみえるようにする、という感じにするとHTML記述をシンプルに書くことができるようになります。

サンプル1のHTMLソース

<div class="hm_btbox2 hm_wt_1" data-cntstr="原森情報技術研究所">原森情報技術研究所</div>

サンプル1の場合、HTMLタグのdata-cntstr属性の文字を疑似要素 after に表示させ、afterを回転させて配置しています。
※原森webでは普通は data-t などのように短く書いて使ってますが、紹介記事ではわざと意味ありげな名前にしています。

サンプル1のcssソース

■ divボックスのサイズ等の基本設定
※ベンダープレフィックスは省略しています。
[hm_btbox2] … ボタンのサイズや文字サイズ、文字装飾、余白等の設定
[hm_wt_1] … 文字色、背景色、ボタン配置、transition等の設定
[hm_wt_1:hover] … ボタンホバー時の文字色や装飾等の設定

■ divボックスのafterの設定
※ベンダープレフィックスは省略しています。
[hm_wt_1:after] … ボタンのafterの設定
[hm_wt_1:hover:after] … ボタンホバー時のafterの設定

.hm_btbox2{
width:160px;height:50px;line-height:50px;
text-align:center;font-weight:bold;
font-size:14px;cursor:pointer;
padding:0;margin:5px;
}
.hm_wt_1{
color:rgba(255,153,0,1);
background-color:rgba(0,51,0,1);
position:relative;top:0;left:0;
transition:all 0.5s linear;
perspective:1000px;
overflow:hidden;
}
.hm_wt_1:hover{
background-color:rgba(51,170,0,0.6);
color:rgba(255,255,255,1);
perspective:300px;
box-shadow:
inset 0px -25px 0px 0px rgba(40,40,200,0.9);
}

.hm_wt_1:after{
color:rgba(255,255,255,0);
width:160px;height:50px;line-height:50px;
position:absolute;top:-38px;left:0px;
content:attr(data-cntstr);
transform-origin:center bottom;
transition:all 0.5s;
transform:matrix3d(1,0,0,0,0,-0.707107
,-0.707107,0,0,0.707107
,-0.707107,0,0,7.07107
,-7.07107,1);
}
.hm_wt_1:hover:after{
color:rgba(200,255,200,0.4);
}

サンプル1のホバー動作について

cssのみでは innerHTML を取得できないので、[data-***]を活用し、divタグに属性として「data-cntstr="原森情報技術研究所"」を記述しています。
div の after に「content : attr(data-cntstr);」で文字列を表示し、afterのボックスをtransformで反転させて配置。その文字色を color : rgba(255,255,255,0); で透明にしています。
マウスホバー時に、after の文字色を color : rgba(255,255,255,0.4); に transition させつつ、親div の perspective を 1000px から 300px にして微妙な動きも演出しています。
※水面っぽいイメージで水が湧く演出は親divの方で box-shadow の変化で作っています。

サンプル1のまとめ

サンプル1で紹介したネタは、余計な spanタグ を増やさずに、疑似要素に表示したい文字を dataset で指定する、という使い方の例となっています。

サンプル2 個別のcssクラスを増やさず、同じ演出を使いまわすために活用する

HTML に detaset を用意しなくても、css では、「content:"文字列";」のように、 css だけであらかじめ表示したい文字列を用意することもできます。
※ content が紹介されはじめた頃の webサイトの説明では、主に before で■や★等の文字列を div や span 文字の頭に付加したり、after で【 NEW ! 】などの新規記事を示す文字を表示する、というリストマーク的な使い方のみが書いてある場合もあったりします。
また、数値をカウントする仕様を活用して ol + li リストの代替的な使い方を紹介している場合もあります。（それは無理に div/span 等にせずに ol li でいいのではなどと思ったりもしてしまいますが…）
カウント仕様を使って上手い作り方をしているアイデアとしてはＱ＆Ａサイトの質問と回答での利用例などかと思ったりもしますが、結局これも、番号に意味があるのであれば、タイトルにＱ1、解答にＡ1などを普通に書けばいいだけかもしれない、などと思ったり…

そんな感じのマーク的な使い方の応用から派生して、表示したい文字を css クラスで大量に用意しておく、という使い方をされる場合もあるかと思います。

例えばサンプル2のようなマウスホバー時の演出するためにはこんな感じで…

■HTMLの記述例
<span class="boxd ct1">top</span>
<span class="boxd ct2">概要</span>
<span class="boxd ct3">サービス</span>

■CSSのcontentで疑似要素に表示する文字を指定する例
.ct1:before{content:"web";width,height,top.left:…等}
.ct1:after{content:"service";width,height,top.left:…等}
.ct2:before{content:"company";width,height,top.left:…等}
.ct2:after{content:"profile";width,height,top.left:…等}
.ct3:before{content:"policy";width,height,top.left:…等}
.ct3:after{content:"infomation";width,height,top.left:…等}

.ct1:hover:before{ホバー時のct1の疑似要素beforeの位置等}
.ct1:hover:after{ホバー時のct1の疑似要素afterの位置等}
…中略
.ct3:hover:after{…}

.boxd{spanのサイズ等の共通設定等}
.boxd:hover{共通のホバー設定等}

ですが、同じ演出なのに、違う文字を表示したいだけのために、個別にクラスを用意するのは面倒すぎる上に、文字列を修正する時の手間が大変なものとなってしまいます。
サンプルは3つですが、メニューの数が増えれば、それだけ css の記述も増殖する、ということになります。
そこで、[data-***]に書いた文字を表示、という作り方をすることで、サンプル2のように使いまわすことができるようになり、楽ができるかと思います。

サンプル2 HTMLソース

<span class="hm_btbox1 hm_wt_2" data-ustr="web" data-dstr="service">事業</span>
<span class="hm_btbox1 hm_wt_2" data-ustr="company" data-dstr="profile">概要</span>
<span class="hm_btbox1 hm_wt_2"  data-ustr="policy" data-dstr="infomation">情報</span>

サンプル2 cssソース

※ベンダープレフィックスは省略しています。
.hm_btbox1{
display:inline-block;
width:100px;height:50px;line-height:50px;
text-align:center;font-weight:bold;
font-size:14px;cursor:pointer;
padding:0;margin:0;
}
.hm_wt_2{
border-radius:5px;
color:rgba(255,153,0,1);
background-color:rgba(0,51,0,1);
position:relative;
top:0;left:0;
box-shadow:inset 0px -25px 0px 0px rgba(10,10,10,0.9);
transition:all 0.3s linear;
overflow:hidden;
}
.hm_wt_2:hover{
background-color:rgba(0,150,0,0.5);
color:rgba(10,10,10,0.8);
font-size:40px;
box-shadow:inset 0px -25px 0px 0px rgba(10,10,10,0.4);
line-height:60px;
}
.hm_wt_2:after{
color:rgba(255,255,255,1);
width:100px;height:50px;line-height:50px;
position:absolute;
top:10px;right:-200px;
content:attr(data-dstr);
font-size:14px;
transition:all 0.3s;
}
.hm_wt_2:before{
color:rgba(255,255,255,1);
width:100px;height:50px;line-height:50px;
position:absolute;
top:-10px;left:-200px;
content:attr(data-ustr);
font-size:14px;
transition:all 0.3s;
}
.hm_wt_2:hover:after{right:0px;}
.hm_wt_2:hover:before{left:0px;}

メニューが増えた場合、HTMLソースの記述が増えるだけで、css の修正等が不要になります。

※ウインドウサイズが 380px 以上の場合です。380px 以下の場合は少し数値等を調節して小さくしたりしています。

サンプル2のまとめ

サンプル2で紹介したネタは、css で疑似要素に content="文字列" で文字を指定するではなく、content : attr(data-dstr) で共通の指定にすることで、メニュー演出の文言を増やしたり修正したりが HTML のみでできるようになる、という使い方の例です。

少しだけプログラム関連の昔話と、特定の js を動かすキーとしての使い方の紹介

昔の parlCGI などの問い合わせフォームなどは、隠しデータとして<input type="hidden" value="隠しデータ">などを用意して、javascript で入力不備を注意するためのメッセージを書いていたり、確認画面表示時に入力されたデータを次のプログラムに渡すために入力値をそこに入れながら、画面には表示しない、などの方法を使っていました。（近年ではセキュリティ関連でhiddenに個人情報データを書くのは避ける傾向になっていますが、大昔はそれが一般的でした）
なので、昔ながらの webプログラマさんが作った webサイトで、普通に記事だけのページなのにソースを見ると form があったりする場合があり、その時は何らかの javascript を動かすために何かデータを入れたり消したりしてる可能性もあったりします。

innerHTML で一度書きだされたページのデータを js などで逐次変更するようなプログラムを作った時に、DOM へのブラウザ対応が完全ではなかった頃（IE が他と仕様がちがったりいろいろ）でも、hidden フォームの value を逐次変更することはブラウザ共通でちゃんと動作していたので、今でも現役でフォーム hidden テクニックを使いまくっている人もいるかと思ったりします。

ですがほとんどのブラウザが HTML5対応済となり、データを [data-***] などの属性で記述することができるようになったので、最近では、javascript や jQuery のサンプルなどで、○○させたいタグ要素に [data-***="★★★"] と書きます、などのような説明を目にする機会が増えてきたかと思います。

例えば、[jQuery] のプラグインなどでも、特定のタグに特定の [data-***] を記述する仕様がよくつかわれてたりしますが、
普通に自作で js プログラムする時に、不要なページでは動かさないようにする、などのチェックをさせたい時に、 ページ内でプログラムが指定する id のオブジェクトデータを取得し、その id がなければ動作しない、また id が発見できてもその [data-***] を調べ、 特定の記述があるかどうかでプログラムを動作を変化させる、等の使い方ができるかと思います。（原森のwebサイトでもよく使ってます）

まとめ

ということで、今後はサイト制作時には、HTML4.01 や XHTML1.0 ではなく、HTML5 で作ることが普通になるかと思いますので、独自データ属性を使えば、js だけでなく、css のみでもいろいろ面白いものが作れるのではないかと思ったりします。

次の記事では、dataset仕様を使って立体回転するボタン演出やかカウントダウンアニメなどを作る例を紹介しています。

以上、長い記事を最後まで読まれたみなさん、お疲れさまでした。

ページトップへ