deta属性は、タグに対して指定できる属性です。
deta属性の指定は簡単です。任意のHTMLタグにdata-○○を指定します。○○の箇所は以下ルールを守れば自由に指定できます。
要素[data-任意の名称=”任意の値”]※「xml」「XML」から始めてはいけないのと、セミコロン［；］と大文字は使えないので注意です。
deta属性を使うメリットは、これにより他のクラスと衝突せず、デザインが崩れることがない点です。
例として、以下のように文字の上に仮名をつける指定をしてみます。
<h1 data-text="ブログ">blog</h1>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;
}これで、それぞれスタイルをあてればOKです。
次回は、deta属性を使用してラベルを作成し、文言や色を指定する方法を紹介します。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
