attr()

メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 content 以外のプロパティでの対応は実験的です。

blockquote {
 margin: 1em 0;
}
blockquote::after {
 display: block;
 content: " (ソース: " attr(cite) ") ";
 color: hotpink;
}

<blockquote cite="https://mozilla.org/en-US/about/">
 Mozilla is working to put control of the internet back in the hands of the
 people using it.
</blockquote>
<blockquote cite="https://web.dev/about/">
 Build beautiful, accessible, fast, and secure websites that work
 cross-browser.
</blockquote>

/* 単純な使用法 */
attr(data-count)
attr(href)
/* 型付き */
attr(data-width px)
attr(data-size rem)
attr(data-name raw-string)
attr(id type(<custom-ident>))
attr(data-count type(<number>))
attr(data-size type(<length> | <percentage>))
/* 代替値付き */
attr(data-count type(<number>), 0)
attr(data-width px, inherit)
attr(data-something, "default")

<!-- これは動作しません -->
<span data-icon="https://example.org/icons/question-mark.svg">help</span>

span[data-icon] {
 background-image: url(attr(data-icon));
}

span[data-icon] {
 background: image-set(attr(data-icon));
}

<div text="Hello"></div>

div::before {
 content: attr(text) " World";
}
div::before {
 content: attr(text) 1px;
}

<div id="parent"><div id="child" data-attr="foo"></div></div>

#parent {
 --x: attr(data-attr);
}
#child::before {
 content: var(--x);
}

@supports (x: attr(x type(*))) {
 /* ブラウザ-は現行の attr() に対応している */
}
@supports not (x: attr(x type(*))) {
 /* ブラウザーは現行の attr() に対応していない */
}

if (CSS.supports("x: attr(x type(*))")) {
 /* ブラウザ-は現行の attr() に対応している */
}
if (!CSS.supports("x: attr(x type(*))")) {
 /* ブラウザーは現行の attr() に対応していない */
}

<p data-foo="hello">world</p>

[data-foo]::before {
 content: attr(data-foo) " ";
}

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

<p data-browser="Firefox">私の好きなブラウザー:</p>
<p>あなたの好きなブラウザー:</p>

p::after {
 content: " " attr(data-browser, "不明");
 color: tomato;
}

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

<div class="background" data-background="lime">
 ブラウザーが attr() の高度な使い方に 対応していない場合、背景は赤になるはずです。
</div>

.background {
 height: 100vh;
}

.background {
 background-color: red;
}
.background[data-background] {
 background-color: attr(data-background type(<color>), red);
}

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

<div data-rotation="-3">これは -3 度回転しています</div>
<div data-rotation="2">これ 2 度回転しています</div>
<div>これは、代替値である 1.5deg の値を使用しています</div>

body {
 min-height: 100svh;
 display: grid;
 place-content: center;
 gap: 1em;
}
div {
 margin: 0 auto;
 border: 1px solid;
 border-radius: 0.25em;
 padding: 0.5em;
}

div {
 width: fit-content;
 transform-origin: 50% 50%;
 rotate: attr(data-rotation deg, 1.5deg);
}

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

<div class="cards">
 <div class="card" id="card-1">1</div>
 <div class="card" id="card-2">2</div>
 <div class="card" id="card-3">3</div>
 <div class="card" id="card-4">4</div>
</div>
<button>カードを切る</button>

<div class="warning">
 <p>
 お使いのブラウザーは高度な <code>attr()</code> に対応していません。そのため、このデモは何も動作しません。
 </p>
</div>

.cards {
 display: flex;
 flex-direction: row;
 gap: 1em;
 padding: 1em;
}

:root {
 view-transition-name: none;
}
::view-transition {
 pointer-events: none;
}
@supports (x: attr(x type(*))) {
 .warning {
 display: none;
 }
}
@layer layout {
 .card {
 border-radius: 0.25em;
 width: 20vw;
 max-width: 5em;
 aspect-ratio: 1 / 1.6;
 background: lightgrey;
 display: grid;
 place-content: center;
 font-size: 2em;
 }
 * {
 box-sizing: border-box;
 }
 body {
 min-height: 100svh;
 display: grid;
 place-content: center;
 }
 button {
 justify-self: center;
 }
}
@layer warning {
 .warning {
 padding: 1em;
 border: 1px solid #cccccc;
 background: rgb(255 255 205 / 0.8);
 text-align: center;
 order: -1;
 margin: 1em;
 }
 .warning > :first-child {
 margin-top: 0;
 }
 .warning > :last-child {
 margin-bottom: 0;
 }
}

.card {
 view-transition-name: attr(id type(<custom-ident>), none);
 view-transition-class: card;
}

const shuffle = (array) => {
 for (let i = array.length - 1; i >= 0; i--) {
 const j = Math.floor(Math.random() * (i + 1));
 [array[i], array[j]] = [array[j], array[i]];
 }
};
document.querySelector("button").addEventListener("click", (e) => {
 const $cards = Array.from(document.querySelectorAll(".card"));
 shuffle($cards);
 document.startViewTransition(() => {
 $cards.forEach(($card, i) => {
 $card.style.setProperty("order", i);
 });
 });
});

MDN の改良に協力

このページは MDN の貢献者によって 2026年2月12日 に最終更新されました。