株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • CSS|deta属性の使用方法①[タイトルに仮名を付ける方法]
2023年6月6日
CSS|deta属性の使用方法①[タイトルに仮名を付ける方法]

deta属性とは

deta属性は、タグに対して指定できる属性です。

deta属性の指定は簡単です。任意のHTMLタグにdata-○○を指定します。○○の箇所は以下ルールを守れば自由に指定できます。

要素[data-任意の名称=”任意の値”]

属性名に使用できる文字

  1. 数字
  2. 文字
  3. -(ハイフン)
  4. .(ドット)
  5. _(アンダースコア)

「xml」「XML」から始めてはいけないのと、セミコロン[;]と大文字は使えないので注意です。

deta属性を使うメリット

deta属性を使うメリットは、これにより他のクラスと衝突せず、デザインが崩れることがない点です。

例として、以下のように文字の上に仮名をつける指定をしてみます。

HTML

<h1 data-text="ブログ">blog</h1>

CSS

h1{
font-size: 30PX;
margin-top: 20px;
display: table;
margin: 0 auto;
}

h1::before{
content: attr(data-text);
display: table;
margin: 0 auto;
font-size: 16px;
margin: 0 0 0 0.4rem;
}
  1. h1 タグに 「data-text=”ブログ」を設定します。
  2. CSSのcontentプロパティに対してattr関数を指定します。()の中にhtmlで作成したdata-textを入れます。
    ※attr() 関数で属性値を取得することができます。そして、擬似要素で指定することで、元になった要素(今回はh1)の属性値を取得することができます。

これで、それぞれスタイルをあてればOKです。

次回は、deta属性を使用してラベルを作成し、文言や色を指定する方法を紹介します。