HTML5から追加された「カスタムデータ属性」。data-hoge
といった形式で独自の属性を作れます。これを使うと、これまでCSSやJSの中に直接書いていたテキスト情報をHTMLに集中させて、CSSやJSはカスタムデータ属性からテキストを読み込む形にできます。テキストの修正が1ファイルで完結して便利だと思います!実際に触ってみた。
カスタムデータ属性をCSSで読み込む
通常の擬似要素によるツールチップ
擬似要素を使った通常のツールチップの例
See the Pen custom data 1 by イイダリョウ (@i_ryo) on CodePen.
HTMLコード
<section> <h1>ガンダム大地に立つ</h1> <p>アムロは<span>ガンダム</span>のコクピットに飛び乗り、機器メーターを見て「こいつ、動くぞ!」と言った。</p> </section>
- ツールチップを出したい「ガンダム」というワードをspanタグで囲む。
span:before { content: "RX-78-2"; display: none; } span:hover:before { display: block; }
- spanの擬似要素の
content
にツールチップとして表示したいテキスト「RX-78-2」を入れる。初期のdisplay
はnone
に。 - ホバー(
hover
)するとdisplay
がblock
になる。
これだと、テキストを修正したいときに毎回CSSを開かなければならない。
カスタムデータ属性をCSSで読み込んだツールチップ
カスタムデータ属性を使う。
See the Pen custom data 2 by イイダリョウ (@i_ryo) on CodePen.
見た目は変わらない。
<section> <h1>ガンダム大地に立つ</h1> <p>アムロは<span data-text="RX-78-2">ガンダム</span>のコクピットに飛び乗り、機器メーターを見て「こいつ、動くぞ!」と言った。</p> </section>
- spanタグにカスタムデータ属性
data-text
を追加。値は「RX-78-2」
カスタムデータ属性は頭にdata-
を付けることで自作できる属性。今回はdata-text
を作った。
span:before { content: attr(data-text); display: none; } span:hover:before { display: block; }
content
をCSS関数attr()
に。属性のを取得。引数はカスタムデータ属性のdata-text
※参考:attr() - CSS: カスケーディングスタイルシート | MDN
これで、ツールチップのテキストもHTMLで修正できる。
カスタムデータ属性をJSで読み込む
次に、ツールチップじゃなくてアラートを設定する。
通常のアラート
See the Pen custom data 3 by イイダリョウ (@i_ryo) on CodePen.
「ガンダム」をクリックすると先ほどのツールチップより長いテキストがアラートで出る(テキストはwikipediaより拝借)
JSコード
//DOM const span = document.querySelector("span"); span.addEventListener('click', function () { alert('ガンダム(GUNDAM)は、「ガンダムシリーズ」に登場する架空の兵器。有人操縦式の人型ロボット兵器「モビルスーツ」(MS)の一つ。初出は、1979年放送のテレビアニメ『機動戦士ガンダム』。作中の軍事勢力の一つ「地球連邦軍」が開発した試作機の1機で、主人公「アムロ・レイ」の搭乗機。額のV字型ブレードアンテナと、人間の目を模した複眼式のセンサーカメラが特徴で、ほかのMSに比べ人間に近い形状を持つ。これらの特徴は、以降のシリーズ作品に登場する「ガンダムタイプ」の基本となった。敵対勢力である「ジオン公国軍」のMSの多くを凌駕する性能を持ち、パイロットのアムロの成長と相まって「一年戦争」で伝説的な戦果を上げる。(※Wikipediaより)'); }, false);
- 変数
span
でDOM要素のspanタグを取得 span
のクリックイベントでアラートを設定。
CSSのツールチップと同様、こちらもアラートのテキストを修正するときにJSファイルを開かなければならない。
カスタムデータJSで読み込んだアラート
こちらもカスタムデータ属性を使う。
See the Pen custom data 3 by イイダリョウ (@i_ryo) on CodePen.
見た目は変わらない。
JSコード
//DOM const span = document.querySelector("span"); const dataText = span.getAttribute("data-text"); span.addEventListener('click', function () { alert(dataText); }, false);
- 変数
dataText
でspan
にgetAttribute()
関数で属性を取得する。引数はカスタムデータ属性のdata-text
- クリックイベントのアラートは
dataText
を読み込む。
カスタムデータ属性名しか出てこないのでグッとコンパクトになった。書き方が違うだけで、やっていることはCSSと同じ。
最後に
カスタムデータ属性を使うことでHTMLはコンテンツ、CSSはスタイル、JSは動き、という役割分担がより明確になり、メンテナンス性が上がると思います!普段忘れがちですが、こういう方法もあるということを頭に入れて作っていきたく思います。それではまた!
※参考:ネイティブHTML & CSSやってみたシリーズ
qiita.com