| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3LFi155ZMR6Ba-fFxkc9HIBN9OEx_4qCiYvTCPcrmLMP0PcbfCs2NihehKclaG72eos08dPWic
cache-control: public, max-age=3600
expires: Wed, 08 Oct 2025 21:58:32 GMT
last-modified: Wed, 08 Oct 2025 01:13:24 GMT
etag: W/"b673c8e1420b06404664377c0b5370cb"
x-goog-generation: 1759886004774255
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 276302
x-goog-meta-goog-reserved-file-mtime: 1759884128
x-goog-hash: crc32c=t8gS5w==, md5=tnPI4UILBkBGZDd8C1Nwyw==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 7b5e12e278fff44442f4bdf462cb9c7a
date: Wed, 08 Oct 2025 20:58:33 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
prefix - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
prefix
Baseline
2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
@counter-style ルールの prefix 記述子は、カウンターのマーカー表現の先頭に追加されるコンテンツを指定します。
カウンター値が負の場合、prefix は負の符号の前に、 negative 記述子によって追加されたその他の <symbol> の前に付きます。
構文
css
/* <symbol> 値 */
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);
値
prefix 記述子は、その値として単一の <symbol> を取ります。
<symbol>-
マーカーに先立って表示される
<symbol>を指定します。<string>,<image>,<custom-ident>の何れかです。
公式定義
| 関連するアット規則 | @counter-style |
|---|---|
| 初期値 | "" (空文字列) |
| 計算値 | 指定通り |
形式文法
prefix =
<symbol>
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
カウンターに接頭辞を追加
この例では、それぞれのカウンタ番号の前に "Book " （空白付き）が接頭辞として付加され、その後にコロン (:) が続きます。コロンは、suffix 記述子によって追加されます。
HTML
html
<ol class="books">
<li>Flamer, by Mike Curato</li>
<li>Gender Queer: A Memoir, by Maia Kobabe</li>
<li>Tricks, by Ellen Hopkins</li>
<li>The Handmaid's Tale: The Graphic Novel, by Margaret Atwood</li>
<li>Crank, by Ellen Hopkins</li>
</ol>
CSS
css
@counter-style books {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
prefix: "書籍 ";
suffix: ": ";
}
.books {
list-style: books;
padding-left: 15ch;
}
結果
仕様書
| Specification |
|---|
| CSS Counter Styles Level 3 # counter-style-prefix |
ブラウザーの互換性
Loading…
関連情報
@counter-style記述子:system,symbols,additive-symbols,negative,suffix,range,pad,speak-as,fallback- リストスタイルのプロパティ:
list-style,list-style-image,list-style-position symbols(), 無名のカウンタースタイルを生成する関数記法。- CSS カウンタースタイルモジュール
- CSS リストとカウンターモジュール