イイダリョウのブログ。JSHTML5から追加された「カスタムデータ属性」。data-hogeといった形式で独自の属性を作れます。これを使うと、これまでCSSやJSの中に直接書いていたテキスト情報をHTMLに集中させて、CSSやJSはカスタムデータ属性からテキストを読み込む形にできます。テキストの修正が1ファイルで完結して便利だと思います!実際に触ってみた。<p>アムロは<span>ガンダム</span>のコクピットに飛び乗り、機器メーターを見て「こいつ、動くぞ!」と言った。</p></section>ツールチップを出したい「ガンダム」というワードをspanタグで囲む。block;}spanの擬似要素のcontentにツールチップとして表示したいテキスト「RX-78-2」を入れる。初期のdisplayはnoneに。ホバー(hover)するとdisplayがblockになる。これだと、テキストを修正したいときに毎回CSSを開かなければならない。カスタムデータ属性をCSSで読み込んだツールチップカスタムデータ属性を使う。CodePen.見た目は変わらない。data-text="RX-78-2">ガンダム</span>のコクピットに飛び乗り、機器メーターを見て「こいつ、動くぞ!」と言った。</p></section>spanタグにカスタムデータ属性data-textを追加。値は「RX-78-2」カスタムデータ属性は頭にdata-を付けることで自作できる属性。今回はdata-textを作った。block;}contentをCSS関数attr()に。MDNこれで、ツールチップのテキストもHTMLで修正できる。カスタムデータ属性をJSで読み込む次に、ツールチップじゃなくてアラートを設定する。alert('ガンダム(GUNDAM)は、「ガンダムシリーズ」に登場する架空の兵器。有人操縦式の人型ロボット兵器「モビルスーツ」(MS)の一つ。初出は、1979年放送のテレビアニメ『機動戦士ガンダム』。作中の軍事勢力の一つ「地球連邦軍」が開発した試作機の1機で、主人公「アムロ・レイ」の搭乗機。額のV字型ブレードアンテナと、人間の目を模した複眼式のセンサーカメラが特徴で、ほかのMSに比べ人間に近い形状を持つ。これらの特徴は、以降のシリーズ作品に登場する「ガンダムタイプ」の基本となった。敵対勢力である「ジオン公国軍」のMSの多くを凌駕する性能を持ち、パイロットのアムロの成長と相まって「一年戦争」で伝説的な戦果を上げる。false);変数spanでDOM要素のspanタグを取得spanのクリックイベントでアラートを設定。CSSのツールチップと同様、こちらもアラートのテキストを修正するときにJSファイルを開かなければならない。カスタムデータJSで読み込んだアラートこちらもカスタムデータ属性を使う。CodePen.見た目は変わらない。false);変数dataTextでspanにgetAttribute()関数で属性を取得する。引数はカスタムデータ属性のdata-textクリックイベントのアラートはdataTextを読み込む。カスタムデータ属性名しか出てこないのでグッとコンパクトになった。書き方が違うだけで、やっていることはCSSと同じ。最後にカスタムデータ属性を使うことでHTMLはコンテンツ、CSSはスタイル、JSは動き、という役割分担がより明確になり、メンテナンス性が上がると思います!普段忘れがちですが、こういう方法もあるということを頭に入れて作っていきたく思います。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。