CSS `speak-as` プロパティ

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

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

speak-as は CSS のプロパティで、HTML コンテンツの読み上げ方法を定義するために使用されます。1 つから 3 つまでの列挙型キーワードによって、スクリーンリーダーやデジタルアシスタントなどの音声技術による要素やテキストのレンダリング方法が決定されます。

このプロパティは、擬似要素を含むすべてのコンテンツに適用されますが、@counter-style にspeak-as 記述子を定義して構築された ::marker 擬似要素を除きます。これは、継承された speak-as プロパティ値よりも優先されます。

構文

css

/* 単一の値の構文 */
speak-as: normal;
speak-as: spell-out;
speak-as: literal-punctuation;
speak-as: digits;
speak-as: no-punctuation;

/* 複数の値の構文 */
speak-as: spell-out literal-punctuation;
speak-as: spell-out no-punctuation;
speak-as: digits literal-punctuation;
speak-as: digits no-punctuation;
speak-as: spell-out digits literal-punctuation;
speak-as: spell-out digits no-punctuation;

値

normal: 通常の発音規則に従い、句読点を休止に置き換えます。たとえば、"Hello, world!" は "Hello（休止）world（休止）" と発音されます。これがデフォルトの設定です。
spell-out: コンテンツは一文字ずつ読み上げられます。たとえば、"role" は "r" "o" "l" "e" と発音されます。
literal-punctuation: 句読点は文字通り読み上げます。たとえば、"Hello, world!" は "Hello カンマ world エクスクラメーションマーク" と発音されます。
digits: 数字は、それぞれの数字の読み方で発音します。例えば、"31" は "スリーワン" と発音します。
no-punctuation: コンテンツは、句読点を一切含まない通常の形で発音されます。たとえば、"Hello, world!" は "Hello" "world" と発音されます。

メモ: speak-as プロパティの対応状況は限定的であり、スクリーンリーダーや音声合成ソフトなどのさまざまな支援技術間で実装が統一されていません。発音に依存する重要な情報が、幅広いユーザーにとって使いやすく、アクセシブルな状態を維持するためには、この情報の音声による提示方法を定義する際、この CSS プロパティのみに依存しないようにしてください。

公式定義

初期値	`auto`
適用対象	すべての要素
継承	あり
計算値	specified value
アニメーションの種類	離散値

形式文法

speak-as = 
  normal                                              |
  spell-out || digits || [ literal-punctuation | no-punctuation ]

例

HTML

html

<p class="normal">Hello, world! I'm 25.</p>
<p class="spell-out">Hello, world! I'm 25.</p>
<p class="literal-punctuation">Hello, world! I'm 25.</p>
<p class="no-punctuation">Hello, world! I'm 25.</p>
<p class="digits">Hello, world! I'm 25.</p>
<p class="multi">Hello, world! I'm 25.</p>

CSS

css

.normal {
  speak-as: normal;
}

.spell-out {
  speak-as: spell-out;
}

.literal-punctuation {
  speak-as: literal-punctuation;
}

.no-punctuation {
  speak-as: no-punctuation;
}

.digits {
  speak-as: digits;
}
.multi {
  speak-as: literal-punctuation digits;
}

仕様書

仕様書
CSS Speech Module Level 1 # speaking-props-speak-as

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

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

GitHub でこのページを表示 • このコンテンツに関する問題を報告

CSS speak-as プロパティ

MDN の改良に協力

CSS `speak-as` プロパティ