今回は、コーディングを効率的に進めることができる「data（カスタムデータ）属性」について紹介します。
data属性はHTMLのタグに設定できる属性で、HTML5から新たに使えるようになりました。data属性をうまく使い分けることによって、効率的にコーディングを進めることができるので、使い方を覚えておくと便利です。
効率的なコーディングを行うためのdata属性使用方法
data属性は主に下記のように記載します。
<p data-font="font10"></p>[data-font="font10"]{font-size:10px;line-height:14px;}上記のようにHTMLはタグの属性値として「data-〇〇」を記述します。○○の部分はclassと同じく任意の英数字となりますので、分かりやすいものを記載しましょう。ダブルクォーテーション内の値についても任意の英数字を指定してください。
※data属性を複数設定する場合、名称設定は例えば、文字装飾の場合は「data-font」、画像装飾場合は「data-img」など、わかりやすいものにしておくと管理がしやすくなります。
CSSについては、セレクタ（data属性）を半角括弧（ブラケット）で囲み、そのプロパティを通常のCSSと同じように記述します。これでCSSが反映されるので、上記の場合は、同じフォントサイズ10pxを指定したい要素に同じdata属性を設定すれば、反映されます。
data属性の基本的な使い方が分かったところで、効率的な使い方の説明をします。
コンテンツ幅、文字、画像サイズで使い分ける
<div data-img="1000"></div>Webデザインで様々なフォントサイズ、画像サイズ、コンテンツ幅が使われている場合、data属性をいくつか設定して使い分けるとかなり便利に使えます。
サイトを作り始めるときに、デザインを確認して先に設定しておけば、data属性を設定するだけで良いので便利です。※記述を優先させるためにCSSの最後に記述しましょう。
CSSを設定するとき、複数のセクションがあるページは毎回親要素からセレクタを記述するのは面倒なので、サイズが同じものが、サイト内に複数ある時は、このようなdata属性を用いた記述をしてみましょう。
<section class="main">
<h2>data属性の使い方</h2>
<p data-font="font15">属性の説明</p>/*font-size:15px;*/
<img data-img="img100" src="img/img01.jpg" alt="画像">/*width:100px;*/
</section>
<section class="sub">
<h2>data属性の記述</h2>
<p data-font="font15">属性の説明</p>/*font-size:15px;*/
<img data-img="img200" src="img/img03.jpg" alt="画像">/*width:200px;*/
<img data-img="img100" src="img/img02.jpg" alt="画像">/*width:100px;*/
</section>
<section class="bottom">
<h2>data属性の記述</h2>
<p data-font="font15">属性の説明</p>/*font-size:15px;*/
<img data-img="img200" src="img/img03.jpg" alt="画像">/*width:200px;*/
</section>[data-font="font15"]{font-size:15px;}
[data-img="img100"]{width:100px;}
[data-img="img200"]{width:200px;}疑似要素にdata属性を使う
上記のような見出しデザインはよくあると思いますが、上記のような見出しの場合は、日本語部分を見出しのテキストに、疑似要素として英語部分を記述すると思います。
セクションごとにこのようなタイトルがある場合、今回のような疑似要素の設定方法が便利です。この場合の記述は下記のようになります。
<section>
<h2 data-title="NEWS">新着情報</h2>
<p>コンテンツのテキスト</p>
</section>
<section>
<h2 data-title="NEWS">お問い合わせ</h2>
<p>コンテンツのテキスト</p>
</section>[data-title]::before {content:attr(data-title)"";}今回の記述は、最初のものと使い方が少し変わってきますが、HTMLの属性値を取得できるattr()メゾットをdata属性と組み合わせて使用することで、jQueryを使わなくても値を取得できるようになります。
使い方は、基本的な使い方と同じく、HTMLタグにdata属性を記述し、data属性のCSSプロパティをCSSに記述します。
一点異なるのがCSSプロパティの中身で、先ほど紹介したattr()メゾットを記述し、()内にdata属性名を入れます。
これで、CSSは一行のみでタグに設定したdata属性値が疑似要素として表示されます。CSSの記述も格段に減るのでおすすめです。
前へ
