【HTML】「data属性」を使用してサブタイトルを付ける

というわけで今回は「data属性」を使用してサブタイトルを付ける方法を説明します。

「data属性」とは？

「data属性」とは、HTMLのタグに設定できる属性の一つです。classやstyle、idとかも属性なので仲間ですね。
早速使い方を見ていきましょう！

data属性の使い方

data属性の使い方を実際のコードを見て学んで行きましょう！！

See the Pen ブログ用　data属性 by そす (@Sosgoyo) on CodePen.

まずはHTMLの書き方を見て行きましょう！

HTMLの書き方

<h2 class="section-title" data-en="service">サービス</h2>

上記の様に「data-○○=” “」（○○には好きに設定可能。例文ではdata-enとしております）をタグの中に入れます。
” “の中は表示させたい文字を設定します。ここではサービスの英語表記をしたいのでserviceですね！

HTML側の設定はこれだけです。では次はCSS側の設定を見て行きましょう♪

CSSの書き方

.section-title {
　　font-size:32px;
  　position:relative;
  
  　&::before {
    　　position: absolute;
    　　content:attr(data-en);
    　　top:-20px;
    　　left:50%;
    　　transform:translatex(-50%);
    　　font-size:16px;
  　}
}

基本的には疑似要素を使う時と同じですね。

ここでのポイントはcontent: attr(data-en) ;ですね。
attr(data-en)で、HTMLで指定したdata-enの内容を呼び出します。
ちなみにattrとは、attribute（日本語で属性という意味）の略みたいです。

あとはCSSでフォントや場所を指定すれば完成です。

data属性の運用方法

一見、疑似要素と変わらない感じのdata属性ですが、どのように運用するのが良いのか？
調べてみるとJavaScriptと組み合わせて使うことが多いようです。
※参考サイト⇒https://zero-plus.io/media/html-data/

個人的には、今回のセクションタイトルのように使い回しするときに良いかなと思います。
HTML側のdata属性の文字を変更するだけで対応できるのが良いですよね。
CSS変えたい時も一箇所変更するだけで対応できるので保守性も良いです。

まとめ

というわけで今回は「data属性」を使用してサブタイトルを付ける方法を説明しました。
使ってみると意外と便利なので皆様も是非ご利用ください～。