attr()

アトリビュート（関数）

意味属性値を取得

attr()とは？

attr()関数は、選択した要素の特定の属性値を取得して、その値をプロパティ値として使用するために使われます。例えば、要素のdata属性やhref属性などの値をスタイルに反映させることができます。

attr()の具体的な使い方

属性値を擬似要素のコンテンツとして表示する例

<style>
    .attr-content::before {
        content: attr(data-name);
        padding: 20px;
        background-color: lightblue;
    }
</style>

<div class='attr-content' data-name='John'>
    data-name属性: 'John'
</div>

div要素に設定されているdata-name属性の値を、そのdiv要素のbefore疑似要素のコンテンツとして表示します。

attr()に関するよくある質問

Q. attr()はどんな時に使うの？

A. attr()は主にHTML要素の属性値をCSS内で使用したい場合に使います。例えば、data属性の値を表示したり、href属性の値をスタイルに反映させたりする際に便利です。

Q. attr()は全ての属性で使える？

A. 基本的には全ての属性で使えますが、ブラウザの対応状況によっては一部の属性で動作しない場合があります。最も一般的に使用されるのはdata-*属性です。

Q. attr()の値を数値として使える？

A. attr()の戻り値は常に文字列です。数値として使用したい場合は、calc()関数と組み合わせて単位を付加するなどの工夫が必要です。

attr()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのattr()やradial-gradient()、linear-gradient()、hsla()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。