CSS｜deta属性の使用方法①［タイトルに仮名を付ける方法］
deta属性とは
deta属性は、タグに対して指定できる属性です。
deta属性の指定は簡単です。任意のHTMLタグにdata-○○を指定します。○○の箇所は以下ルールを守れば自由に指定できます。
要素[data-任意の名称=”任意の値”]属性名に使用できる文字
- 数字
- 文字
- -（ハイフン）
- .（ドット）
- _（アンダースコア）
※「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;
}- h1 タグに 「data-text=”ブログ」を設定します。
- CSSのcontentプロパティに対してattr関数を指定します。（）の中にhtmlで作成したdata-textを入れます。
※attr() 関数で属性値を取得することができます。そして、擬似要素で指定することで、元になった要素（今回はh1）の属性値を取得することができます。
これで、それぞれスタイルをあてればOKです。
次回は、deta属性を使用してラベルを作成し、文言や色を指定する方法を紹介します。
Webデザイナー / コーダーのみなさまへ
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
