カスタムデータ属性をCSSやJSで読み込む（テキストをHTMLに集中させる）

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より拝借）

※参考：ガンダム (架空の兵器) - 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);