【非推奨・廃止】CSSの音声プロパティ（volume・speak・pitch等）の概要と現在の扱い

ホームページのアクセシビリティ向上を考える上で、音声読み上げ機能への配慮は重要なテーマです。かつてCSSには、音声ブラウザやスクリーンリーダー向けに読み上げの音量や声の高さ、発音方法などを細かく制御するためのプロパティが多数用意されていました。しかし、これらは現在では非推奨、または廃止された扱いとなっています。この記事では、過去に使用されていたこれらの音声プロパティ（volume、speak、pitchなど）の概要と、現在のホームページ（ウェブサイト）制作においてどのように対応していくべきかについて解説します。現代のブラウザ環境や音声読み上げソフトの実情を踏まえ、事業のオンライン展開において適切な技術選択を行うための指標をお伝えします。

各音声プロパティの過去の役割と種類

これら廃止された音声プロパティ群が、過去にどのような目的で使われていたのかを振り返ります。かつては、視覚的なデザインをCSSで行うように、音声出力における細かなニュアンスもCSSで制御しようという試みがありました。より専門的には、ユーザー側の読み上げ環境が大きく進化し、制作者側で細かく制御する必要性が薄れたことも非推奨となった背景として挙げられます。それぞれのプロパティが担当していた役割を見ていきます。

volume・voice-family・richness（音量・声質制御）

テキストを読み上げる際の音量を調整するための「volume」や、声の種類を指定する「voice-family」、声の豊かさを設定する「richness」などがありました。現在のホームページ環境では、ユーザー自身が端末の音量設定やスクリーンリーダーの機能で個別に調整することが一般的となっています。

ホームページ（ウェブサイト）制作において、視覚的なデザインだけでなく、音声読み上げソフト（スクリーンリーダー）を利用するユーザーに対する配慮（Webアクセシビリティ）は非常に重要です。情報を音声で届ける際、その声の大きさや声質を制御するために定義されたのが、CSSの音声関連プロパティである「volume」「voice-family」「richness」です。

「volume」は、テキストを読み上げる際の音量（ボリューム）を指定するプロパティです。全体的な基本音量を設定したり、特定の要素だけ音を大きくしてユーザーの注意を引いたりする目的で設計されました。「voice-family」は、視覚デザインにおけるフォント指定（font-family）と同じように、男性の声、女性の声、あるいは特定の声種を指定するためのプロパティです。そして「richness」は、声の豊かさや響き（滑らかさ、鋭さなど）を数値で指定し、声のトーンを微調整する役割を持っています。

しかし、これらを含むCSS2の「Aural（聴覚）スタイルシート」の仕様は、主要な音声ブラウザやスクリーンリーダーでの実装がほとんど進みませんでした。ユーザーは自身が使い慣れた読み上げソフトの設定（好みの声や再生速度）を優先することが多く、制作者側がCSSで強制的に音声を変更することは、かえってユーザビリティを損なう可能性があると判断されました。現在では、CSS3の「Speech」モジュールとして仕様が再編され、「richness」などの一部プロパティは廃止または非推奨として扱われています。

speak・speech-rate・stress（読み上げ方・速度制御）

「speak」は、テキストを通常通り読み上げるか、アルファベットのつづりとして1文字ずつ読み上げるかなどを指定するプロパティでした。関連して、「header」「numeral」「punctuation」といった要素や記号ごとの細かな読み方指定も存在しました。また、読み上げ速度を調整する「speech-rate」や、アクセントを付ける「stress」など、発話に関する詳細な制御プロパティ群が含まれていました。

pitch・pause・空間的配置などの制御

読み上げる声の平均的な高さを指定する「pitch」やその幅を指定する「range」がありました。さらに、要素の前後で読み上げを一時停止する「pause」、背景音を再生する「play-during」、音声アイコンを挿入する「cue」などが定義されていました。また、音声の再生位置（空間的な配置）を指定する「elevation」や「azimuth」といった、立体音響のようなプロパティ群も存在しました。これらも現在では、ユーザー側の読み上げソフトの設定に委ねる形が主流です。

現在のホームページにおけるアクセシビリティ対応

これらの音声プロパティの廃止に伴い、現在のホームページ制作で気を付けるべき点について解説します。デザインなどの視覚情報と音声制御を分離し、より正しい情報伝達を目指すアプローチが重要です。

適切なHTMLマークアップの徹底

音声読み上げの制御を直接CSSで行うのではなく、適切なHTMLタグを用いて文書構造を明確にすることが推奨されています。見出しや段落、ナビゲーションなどを正しくマークアップすることで、最新のスクリーンリーダーは内容を正確に解釈し、ユーザーに最適な形で情報を伝えます。

WAI-ARIAの活用による情報補完

より複雑なインターフェースにおいては、WAI-ARIAを活用して要素の役割や状態をスクリーンリーダーに適切に伝えていきます。CSSによる強制的な音声制御を手放し、HTMLのセマンティクスとWAI-ARIAを組み合わせることで、ウェブ標準に準拠した使いやすいホームページ（ウェブサイト）の構築が可能になります。事業を適切にユーザーへ届けるためにも、現在の標準的な対応方法を取り入れていくことが大切です。

volume（ボリューム）

volume: ;

CSSプロパティのvolume（ボリューム）は、ホームページの音声再生にかかる音量（ボリューム）を指定します。このCSSはCSS2.1で削除されました。

volume : 数値

0（聞き取り可能な最低音量）～100の間の数値で指定

volume : %

親要素の音量に対する割合を%値で指定

volume : キーワード

medium

数値　50（初期値）

silent

消音

soft

数値　25

x-soft

数値　0

loud

数値　75

x-loud

数値　100

CSS2.1で削除。

volume: ;

廃止されたプロパティと現代の音声制御のあり方

CSSのvolumeプロパティは、かつて音声ブラウザや読み上げソフト向けに、スタイルシート側から音量を制御しようという意図で設計されました。しかし、現在ではより専門的には「見た目（装飾）はCSS、構造はHTML、機能（動作や制御）はJavaScript」という役割分担が明確になっています。そのため、音声のボリューム調整という機能的な役割はCSSの領域ではないと判断され、CSS2.1の段階で正式に仕様から削除されました。

現在は、HTMLのaudioタグやvideoタグを使用し、細かな調整が必要な場面ではJavaScriptを組み合わせて実装することが一般的です。過去の仕様であるvolumeプロパティを記述してもブラウザには認識されず、他の装飾プロパティの動作に悪影響を及ぼす可能性もあるため、使用は避けることが重要です。

UX（ユーザー体験）と直帰率への影響

Webマーケティングの観点から見ると、ホームページにアクセスした瞬間にユーザーの意図しない音声が突然再生される仕組みは、非常にリスクが高い設計と言えます。スマートフォンが普及した現代では、電車内や静かなオフィスなど、音を出せない環境で事業のホームページを閲覧しているユーザーが数多く存在します。

そうした状況で突然音が鳴ってしまうと、ユーザーは驚いてすぐにページを閉じてしまいます。結果としてホームページの直帰率が急増し、ユーザーの利便性を損なうだけでなく、検索エンジンからの評価も下がってしまうかもしれません。

もし事業のプロモーションなどで動画や音声を活用する場合は、初期状態をミュート（消音）に設定しておき、ユーザー自身の自発的な操作によって音を出せるように設計することが求められます。単に仕様として音を鳴らすだけでなく、閲覧環境に配慮した細やかな設計を行うことが、ユーザーとの信頼関係を築き、最終的な集客や成果へと繋がっていきます。

ホームページ制作・Webデザインの1ポイント

HTMLと同様にCSSでもvolumeなど廃止されたプロパティがあります。廃止されたプロパティを使うとブラウザによっては機能しないため、Webデザインに崩れが生じることもあるため注意が必要です。現在ではホームページ制作で使用することのできない、廃止されたCSSの多くは、音声関連です。視覚と聴覚の二つの知覚から表現できるようにと配慮されていたと想定されますが、ホームページ閲覧中の音声再生は、時と場合によって問題があるケースが多く、需要がなくなっていったと考えることができます。

voice-family 声の種類を指定

voice-family: ;

voice-family（ボイスファミリー）は、ページ読み込み時の声の種類を指定します。ボイスファミリー。

, で区切って複数の声の種類の候補を指定可能。

voice-family : ボイスファミリー名

voice-family の後に、以下のタイプのボイスファミリー名を指定することで、テキストを読み上げる声のタイプを指定することができます。

male

男性の声

ホームページのテキスト読み上げ音声を男性の声に指定します。

female

女性の声

ホームページのテキスト読み上げ音声を女性の声に指定します。

child

子供の声

ホームページのテキスト読み上げ音声を子供の声に指定します。

CSS2.1で削除。

voice-family: ;

音声読み上げにおけるvoice-familyの現状とアクセシビリティ

CSSのvoice-familyプロパティは、テキストを表示する際のfont-familyと同じように、文章を音声で読み上げる際の声の種類（男性、女性、子供の声、あるいは特定の音声合成エンジン名など）を指定するために考案されました。しかし、現代のホームページ（ウェブサイト）制作の現場において、このプロパティが実際に使用されるケースはほとんどありません。

視覚障害を持つ方や高齢者の方が利用するスクリーンリーダー（音声読み上げソフト）は、ユーザー自身が聞き取りやすいように、手元の端末であらかじめ声の種類や再生速度をカスタマイズしていることが一般的です。そのため、CSS側で特定の声を強制してしまうと、かえってユーザーを混乱させ、ホームページの使い勝手を著しく下げてしまう危険性があります。現在では、音声の出力方法はブラウザやOS、そしてユーザー自身の環境設定に完全に委ねるアプローチが主流となっています。

ホームページ制作・Webデザインの1ポイント

voice-familyなど音声読み上げに関するCSSはたくさん廃止されました。現在ではホームページ制作で使用することのできない廃止済みのCSSはほとんどが音声関連です。

Webデザインを微調整する際には、ブラウザの開発者用ツールを使うと、変更後の表示のされ方をチェックすることができます。ただしモバイルデバイスでの表示テストなどは、使用フォントなどの関係で実際の表記とは若干の違いがあることがありますので注意が必要です。

richness 声の豊かさを指定

richness: ;

richness（リッチネス）は、声の豊かさを指定します。指定する値が大きいほど快活になります。

richness : 数値

0～100の間の数値で指定（初期値　50）

CSS2.1で削除。

現代の音声読み上げとアクセシビリティ

「richness」は、音声ブラウザなどでテキストを読み上げる際の「声の豊かさ（明るさや滑らかさ）」を指定するために考案されたプロパティです。しかし、現在の主要なブラウザ環境において、こうした音声用CSS（Aural CSS）が直接的にサポートされているケースはほとんどありません。現代のホームページ（ウェブサイト）制作においては、個別のCSSプロパティに頼るのではなく、より汎用的なアクセシビリティ対応へと手法が変化しています。

最新のブラウザ環境での音声制御と代替アプローチ

Google ChromeやSafari、Edgeなどを利用するユーザーに対して音声の読み上げを最適化する場合、現在ではCSSで直接声質を制御するのではなく、Web Speech APIなどのJavaScriptを用いたアプローチや、ユーザーが利用するスクリーンリーダー側の自動設定に委ねる形が主流です。

より専門的には、無理にCSSで読み上げのトーンを操作するよりも、HTMLのタグを意味的（セマンティック）に正しく記述していくことが重要です。見出しや段落、ナビゲーションといった役割をブラウザへ正確に伝えることで、どのような環境の音声読み上げソフトであっても、自然な抑揚や間合いでコンテンツが再生されていきます。サポートが終了している古いコードを整理し、正しいHTML構造を保つことは、検索エンジン最適化（SEO）の評価を高める上でも有意義な対応です。

richness: ;

ホームページ制作・Webデザインの1ポイント

richnessなど音声に関するCSSの設定項目はほとんどが削除され、HTMLからの移行などによって、CSSはWebデザインに関するものが多くなりました。

音声スタイルシートの変遷と現在のアクセシビリティ対応

かつてのCSS仕様では、視覚的なレイアウトと同様に、聴覚的な情報も細かく制御することが目指されていました。ここでは、音声関連プロパティがたどった歴史的背景と、現代のWeb標準に基づいた適切な音声読み上げ対応について解説します。

volumeとvoice-familyの役割とブラウザの対応状況

「volume」や「voice-family」は、特定の警告メッセージを大きな声で読み上げさせたり、対話形式のコンテンツで男性と女性の声を切り替えたりする、といった表現を想定して定義されました。しかし、現状では多くのスクリーンリーダーがOSの標準機能やユーザー独自の細かな設定に依存しています。そのため、CSSによる音声指定が意図した通りに機能する環境は限定的です。無理にCSSで音声をコントロールしようとするのではなく、まずはHTMLタグの意味づけを正しく行うことが優先されます。

richnessプロパティの廃止とCSS3 Speechモジュール

声の響きや鋭さを指定する「richness」プロパティは、CSS2で定義されたものの、実際にサポートする環境が普及しないまま、CSS3への移行に伴い廃止（仕様からの削除）の扱いとなりました。現在ではCSS3 Speechモジュールにおいて、「voice-pitch（声の高さ）」や「voice-rate（話す速度）」といった新しいプロパティに整理されています。技術的な知識としてこれらの仕様を把握することは有意義ですが、実務のホームページ（ウェブサイト）制作において多用する機会は多くありません。

speak 読み上げ方法を指定

speak: ;

speakは、ホームページのページ読み上げ方法を指定します。テキストの読み上げの際に有効になります。スピーク。

normal

言語に応じて読み上げる（初期値）

spell-out

スペルを1文字ずつ読み上げる スペルアウト

none

指定箇所を読み飛ばす

CSS2.1で削除。

speak: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用する、読み上げ音声に関するCSSの設定項目は、speakなど細かく設定できるものがたくさんありましたが、そのほとんどはCSS2.1で削除されています。ページをデザインする時に、画像をふんだんに使う時もありますが、コンピュータは画像の中身がどのようなものであるかをそのまま理解することはできません。同時に視覚障害のあるユーザーにとっては、画像に代替テキストが設定されていないと、テキストの読み上げも実行できないため、どのような情報が掲載されているのかも認識することができません。Webデザイン性を高めるために見出しやテキストを画像化した場合は、必ず代替テキストを設定するように心がけましょう。

speak-header 表見出しの読み上げ方法を指定

speak-header: ;

ホームページ制作（ウェブサイト制作）の際に使用するCSSプロパティ「speak-header」についてのご説明です。

speak-header（スピークヘッダー）は、ページの読み上げ時の「表見出しの読み上げ方法」を指定します。

once

データセルのまとまりを読む時に一度だけヘッダセルを読む（初期値）

always

1つのデータセルを読むたびに毎回ヘッダセルを読む

CSS2.1で削除。

表組み（テーブル）の音声読み上げと仕様の変遷

CSSのspeak-headerプロパティは、ホームページ（ウェブサイト）上に設置された表（テーブル）を音声読み上げソフトが処理する際、見出しのセルをどのように読み上げるかを指定するために考案されました。例えば、データが連続するセルを読み上げるたびに毎回見出しを読み上げるか、あるいは見出しが変わった時だけ読み上げるかといった制御を意図したものです。

しかし、他の音声関連のCSSプロパティと同様に、現在ではこのプロパティが実際のブラウザや読み上げソフトでサポートされることはほとんどありません。視覚的なデザインを調整するためのCSSで、データの読み上げ規則という機能的な部分まで操作しようとするアプローチは、現在のウェブ標準の考え方から外れています。そのため、事業用のホームページを制作する上で、このプロパティを記述する必要は基本的にありません。

HTMLの構造化（scope属性）による正確な情報伝達

では、料金表やスペック比較表といった複雑なテーブルを、音声ブラウザのユーザーや検索エンジンに対して正確に伝えるにはどうすればよいのでしょうか。現代のウェブ制作における答えは、CSSの装飾に頼るのではなく、土台となるHTMLのタグを正しく設定することにあります。

具体的には、表の見出しとなるセルには通常のtdタグではなくthタグを使用し、さらにその見出しが縦の列に対するものなのか、横の行に対するものなのかを「scope=”col”」や「scope=”row”」といった属性を使って明示します。この情報を付与しておくだけで、現代の音声読み上げソフトは表の構造を正確に理解し、ユーザーにとって最もわかりやすいタイミングで見出しを補足しながら読み上げてくれます。

speak-header: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用する、音声に関するCSSの設定項目は、speak-headerによる表見出しに関する設定など、細かく設定できるものがたくさんありましたが、そのほとんどはCSS2.1で削除されています。HTMLの見出し項目は、SEOなどのためだけでなく、ユーザーがページの内容を理解しやすいように設定する項目です。見た目は同じでもフォントサイズによる見出し的なWebデザインの設定ではなく、なるべく論理構造を示してページを作成しましょう。

speak-numeral 数字の読み方を指定

speak-numeral: ;

speak-numeral（スピークニューメラル）は、ページ読み上げ時の「数字の読み方」を指定します。テキスト読み上げ時に有効になります。

continuous

数字を数値として読む（初期値）

digits

数字を1文字ずつ読み上げる

CSS2.1で削除。

数字の読み上げ制御とアクセシビリティの現状

CSSのspeak-numeralプロパティは、かつて音声読み上げソフト（スクリーンリーダー）が数字に直面した際の読み方を指定するために定義されました。例えば、「123」というテキストを「ひゃくにじゅうさん」と一つのまとまった数値として読み上げるか、それとも電話番号のように「いち、に、さん」と一文字ずつ区切って読み上げるかを、CSSからコントロールしようという試みです。

しかし、より専門的には、表示の装飾を担うCSSで音声の細かい読み上げルールまで縛り付けてしまうことは、ウェブの標準仕様の考え方に合致しないと判断されました。その結果、このプロパティはCSS2.1の段階で仕様から削除されており、現在主流となっているモダンブラウザで指定しても機能することはありません。事業のホームページ（ウェブサイト）を新しく制作する上で、このプロパティを使用する必要は全くないと言えます。

情報構造による確実な読み上げの実現

では、どうしても「いち、に、さん」と一文字ずつ区切って数字を読み上げてほしい場合、どのように対応すべきでしょうか。現在のウェブ制作においては、CSSではなくHTMLの構造やテキストそのものの記述方法で解決するのが基本です。

例えば、電話番号などの場合は、数字と数字の間にハイフン（-）を入れることで、多くの読み上げソフトは自動的に区切って発音してくれます。さらに高度な対応が必要な場合は、HTMLのWAI-ARIA（ウェイ・アリア）と呼ばれるアクセシビリティ専用の属性（aria-labelなど）を使用して、スクリーンリーダー向けに正しい読み方を直接指定する手法が用いられます。

speak-numeral: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用する、音声に関するCSSの設定項目は、speak-numeralなど細かく設定できるものがたくさんありましたが、そのほとんどはCSS2.1で削除されています。ただ、こうしたテキストの読み上げに関する設定があったように、ホームページを作成する時は、アクセシビリティを考え、テキストベースで制作する、もしくは画像も代替テキストの指定をするといった工夫が必要になります。

speak-punctuation 句読点・記号を読み上げるかどうかを指定

speak-punctuation: ;

speak-punctuation（スピークパンクチュエーション）は、ページ読み込み時に句読点やカッコなどの記号を読み上げるかどうかを指定します。

none

句読点・記号を読み上げない（初期値）

code

句読点・記号を読み上げる

CSS2.1で削除。

音声読み上げ時の句読点制御と現在の仕様

CSSのspeak-punctuationプロパティは、音声読み上げソフト（スクリーンリーダー）がテキストを読み上げる際に、句読点（カンマやピリオドなど）や記号を「記号の名前として文字通りに発音する」か、あるいは「自然な間や息継ぎとして扱う」かを制御するために考案されました。

しかし、現在ではこのプロパティをサポートしているモダンブラウザや読み上げソフトはほとんど存在しません。視覚的な装飾を担うCSSで音声の細かい出力を制御するというアプローチ自体が過去のものとなっており、現在ではユーザーが使用している端末やソフト側の環境設定に完全に委ねる形が主流です。そのため、事業用のホームページ（ウェブサイト）を新しく制作したりリニューアルしたりする場面において、このプロパティを記述する必要は基本的にありません。

記号を正確に伝えるためのHTML構造の重要性

とはいえ、記号を省略せずに正確に読み上げてほしい場面は存在します。例えば、プログラミングのソースコード、数式、あるいは特殊な製品の型番などを掲載する際、カッコやハイフンといった記号が読み飛ばされてしまうと、ユーザーに間違った情報が伝わってしまいます。

このような場合、CSSの機能に頼って読み上げ方を強制するのではなく、土台となるHTMLのタグを適切に使い分けることが重要です。プログラムの記述であれば、codeタグやpreタグでテキストを囲むことで、読み上げソフトに対して「ここは通常の文章ではなく、記号も含めて正確に扱うべきデータである」という文脈を提示できます。

speak-punctuation: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用する、音声に関するCSSの設定項目は、speak-punctuationなど細かく設定できるものがたくさんありましたが、そのほとんどはCSS2.1で削除されています。音声による情報はYouTubeなどに役目が切り替わったことが影響していると考えることができます。ホームページ制作ではテキストベースでページ作成を検討する必要がありますが、読み上げ機能の細かな設定が無くなった分、重要な部分に関しては動画を用意しておくなどの工夫が良いかもしれません。

speech-rate 読み上げる速さを指定

speech-rate: ;

speech-rate（スピーチレート）は、ページ読み込み時の「読み上げる速さ」を指定します。スピーチレート。

数値

1分間に読み上げる単語数（速さ）指定

medium

単語数＝180～200/1 minute（初期値）

slow

単語数＝120/1 minute

x-slow

単語数＝80/1 minute

fast

単語数＝300/1 minute

x-fast

単語数＝500/1 minute

slower

単語数を40/1 minuteだけ少なく（遅く）する

faster

40/1 minuteだけ多く（速く）する

CSS2.1で削除。

読み上げ速度の強制とユーザー主導のアクセシビリティ

CSSのspeech-rateプロパティは、音声読み上げソフト（スクリーンリーダー）がテキストを読み上げる際のスピード（速度）を指定するために考案されたものです。特定の文章をゆっくり読ませて内容を強調したり、逆に重要度の低い注釈などを素早く読み飛ばさせたりする意図で設計されました。しかし、現代のホームページ（ウェブサイト）制作において、このプロパティが実際に使われる場面はほぼありません。

音声ブラウザを日常的に利用しているユーザーは、自分が最も聞き取りやすい独自の読み上げスピードを、OSやソフト側の環境設定ですでに決めています。中には、目で文字を追うよりもはるかに速いスピードで音声を再生し、画面を見ずに効率よく情報を取得している方も数多く存在します。そのため、CSSによって制作者側から一方的に読み上げ速度を強制（上書き）してしまうと、ユーザーの閲覧ペースを大きく乱すことになり、かえってホームページの使い勝手を悪くする原因につながります。現在では、音声の再生速度は完全にユーザー側の環境に委ねるアプローチが基本です。

speech-rate: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用する、音声に関するCSSの設定項目は、speech-rateなど細かく設定できるものがたくさんありましたが、そのほとんどはCSS2.1で削除されています。音声を利用したWeb上での情報取得が、ホームページよりもYouTubeなどの動画共有サイト、ポッドキャストなどへと移行したことが影響しているかもしれません。

stress アクセントの強弱を指定

stress: ;

stress（ストレス）は、ホームページのテキストの読み上げ時におけるアクセントの強弱（声の強弱）を指定します。指定する値が大きいほど強い調子になります。

数値

0～100の間の数値で指定（初期値　50）

CSS2.1で削除。

音声ブラウザ向けプロパティの歴史と現在の扱い

CSSのstressプロパティは、かつて音声読み上げソフト（スクリーンリーダー）がテキストを読み上げる際の「抑揚」や「強調の度合い」を調整するために定義されたプロパティです。文章の中で特に目立たせたい部分の音声のピークを高くして、より感情豊かに読み上げさせるといった目的で設計されました。

しかし、現在では主要なブラウザや音声読み上げソフトにおいて、このプロパティが実際に機能することはほとんどありません。より専門的には、Web標準の進化に伴い、ホームページ（ウェブサイト）を読み上げる際の音量や声質、そして抑揚のコントロールは、CSSのような装飾のための言語ではなく、ユーザー自身の端末設定や読み上げソフト側の機能に完全に委ねるという考え方が主流になっています。そのため、新しく事業用のホームページを制作したり改修したりするにあたって、このプロパティを記述する必要はありません。

stress: ;

ホームページ制作・Webデザインの1ポイント

stressなど、ホームページ制作で使用する、音声に関するCSSの設定項目は、ほとんどCSS2.1で削除されています。ホームページ制作において、ユーザーのアクセシビリティを意図した項目はたくさんありましたが、その中の細かな設定はなくなっていきました。Webデザインとして、見栄えの美しさだけでなく、いかにメッセージがよりよく伝わるかという部分の設計をしっかりと行う必要があります。

pitch 声の高低を指定

pitch: ;

ホームページ制作・作成において、pitch（ピッチ）は、声の高低を指定します。ピッチ。

pitch : 周波数（数値）

周波数で声の高さを指定。単位はHz（ヘルツ）、KHz（キロヘルツ）

pitch : medium

普通（初期値）

pitch : low

低い

pitch : x-low

とても低い

pitch : high

高い

pitch : x-high

とても高い

CSS2.1で削除。

音声読み上げにおける「声の高さ」の制御と仕様の変遷

CSSの「pitch（ピッチ）」プロパティは、視覚障害を持つ方などが利用する音声読み上げソフト（スクリーンリーダー）がテキストを読み上げる際の「声の高さ（高低）」を指定するために考案されました。例えば、重要な警告文を高い声（high）で読み上げさせたり、補足説明を低い声（low）で読み上げさせたりすることで、音声だけでも情報のメリハリを伝えることを意図したものです。

しかし、より専門的な視点から補足すると、このプロパティはCSS2.1の段階で仕様から削除されています。（後のCSS3 Speechモジュールで再定義の動きもありましたが）現在主流となっているブラウザや音声読み上げソフトにおいて、このプロパティが実際に機能することはほぼありません。

「見た目の装飾」を担うCSSを用いて、ユーザーの閲覧環境（音声出力）に直接干渉しようとするアプローチ自体が、現在のウェブ標準の考え方に合致しないためです。音声を利用するユーザーは、自身が最も聞き取りやすい声の高さやスピードをOSやソフト側で既に設定しています。そのため、新しく事業用のホームページを制作・改修する際に、このpitchプロパティを記述する必要は全くありません。

情報構造による強調表現とSEOへの効果

では、特定のテキストを音声ブラウザのユーザーに対して「強調して」伝えたい場合、現代のウェブ制作ではどのように対応するべきでしょうか。その答えは、CSSで声の高さを操作するのではなく、土台となるHTMLの構造（タグ）を正しく設計することにあります。

本当に強調したいキーワードや重要なメッセージがある場合は、（強い重要性）や（強調）といった意味を持ったHTMLタグでテキストを囲みます。これにより、現代の音声読み上げソフトは自動的にその部分に適切な抑揚やトーンの変化をつけて読み上げてくれます。

pitch: ;

ホームページ制作・Webデザインの1ポイント

pitchなどCSSの中の音声や読み上げに関する項目は、ほとんどが削除されました。CSS3から基本的には外観面でのWebデザインに関する設定がほとんどです。

pitch-range 声の高低の幅を指定

pitch-range: ;

pitch-range（ピッチレンジ）は、声の高低の幅を指定します。指定する値が大きいほど高低の幅が広くなります。

pitch-range : 数値

0～100の間で指定

CSS2.1で削除。

音声読み上げ時の抑揚コントロールと現在の実装状況

かつて「pitch-range」は、音声ブラウザがテキストを読み上げる際の「声の抑揚（ピッチの変動幅）」を指定するために用意されたプロパティでした。数値を低くすれば平坦でロボットのような声になり、数値を高くすれば感情豊かな声になるとされていましたが、現在普及している多くのブラウザやスクリーンリーダーでは、こうした音声用CSSはほとんどサポートされていません。そのため、現在のホームページ（ウェブサイト）制作において、CSSから直接読み上げの抑揚をコントロールすることは推奨されていません。

pitch-range: ;

ホームページ制作・Webデザインの1ポイント

pitch-rangeなどCSSの中の音声に関する項目は、ほとんどが削除されました。CSS3から基本的にはホームページの外観面でのWebデザインに関する設定がほとんどです。

play-during BGMを指定

play-during: ;

ホームページ（ウェブサイト）のBGM（バックグラウンドミュージック、背景音）を指定します。

初期値（repeatを指定していない場合）は1回のみ再生。

auto

親要素の背景音再の場合、そのまま再生（初期値）

none

背景音無しにする

URL

URLで音声ファイルを指定（この後に続けてmixやrepeatを指定可）

mix

親要素の背景音再生の場合、重ねて再生
URLの後につける値(半角スペース区切り)

repeat

リピート再生する
URLの後につける値(半角スペース区切り)

CSS2.1で削除。

音声読み上げ時の背景音制御と現在の対応状況

かつて「play-during」は、音声ブラウザがテキストを読み上げる際に、背後でBGMなどの別の環境音を鳴らすためのプロパティとして定義されていました。しかし、現在広く利用されている主要なブラウザやスクリーンリーダーにおいて、こうした音声用CSS（Aural CSS）はほとんどサポートされていません。そのため、実際に画面の裏側で意図した音が鳴ることを期待して記述しても、機能しないことが一般的です。

play-during: ;

ホームページ制作・Webデザインの1ポイント

play-duringなどCSSの中の音声に関する項目は、ほとんどが削除されました。CSS3から基本的には外観面でのWebデザインに関する設定がほとんどです。

pause 要素前後の音声一時停止を指定

pause: ;

pause（ポーズ）は、要素前後の音声一時停止をまとめて指定するプロパティです。

• 値1つ 要素の前後に適用
• 値2つ（半角スペースで区切る）　指定順で要素の前と後に適用

pause : 時間（数値）

単位はs（秒）、ms（ミリ秒）（初期値は0）

pause : %

speech-rateで指定された読み上げ速度対する割合を%値で指定

CSS2.1で削除。

pause: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用するCSSの中の音声や読み上げに関する項目は、pauseをはじめほとんどが削除されました。CSS3から基本的には外観面でのWebデザインに関する設定がほとんどです。

pause 要素前後の音声一時停止を個別指定

pause-before 要素前の音声一時停止を指定

pause-before: ;

pause-before（ポーズビフォー）は、要素前の音声一時停止を指定するプロパティです。

pause : 時間（数値）

単位はs（秒）、ms（ミリ秒）（初期値は0）

pause : %

speech-rateで指定された読み上げ速度対する割合を%値で指定

CSS2.1で削除。

pause-before: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用するCSSの中の音声や読み上げに関する項目は、pause-beforeなどほとんどがCSS2.1で削除されました。CSS3から基本的には外観面でのWebデザインに関する設定がほとんどです。

pause-after 要素後の音声一時停止を指定

pause-after: ;

pause-after（ポーズアフター）は、要素後の音声一時停止を指定するプロパティです。

pause : 時間（数値）

単位はs（秒）、ms（ミリ秒）（初期値は0）

pause : %

speech-rateで指定された読み上げ速度対する割合を%値で指定

CSS2.1で削除。

音声読み上げ時の間隔調整と現在の仕様

かつて「pause-after」は、音声ブラウザがテキストを読み上げた後に、どれくらいの長さの空白（ポーズ）を空けるかを指定するためのプロパティとして定義されていました。文章の区切りや要素の終わりに適切な「間」を持たせることで、聞き手に内容を理解する時間を与える役割を持っています。しかし、現在広く利用されている主要なブラウザやスクリーンリーダーにおいて、こうした音声用CSSはほとんどサポートされていません。

pause-after: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用するCSSの中の音声や読み上げに関する項目は、pause-afterなどほとんどが削除されました。CSS3から基本的には外観面でのWebデザインに関する設定がほとんどです。

elevation 音声が聞こえてくる垂直角度（高さ）を指定

elevation : ;

elevation（エレベーション）は、音声が聞こえてくる垂直角度（高さ）を指定する場合に使用します。

elevation : 角度

数値

単位

deg（度）、grad（グラジアン）、rad（ラジアン）

above

90deg（上）

level

0deg（前、初期値）

below

-90deg（下）

higher

現在の角度に+10deg（上方向に移動）

lower

現在の角度に-10deg（下方向に移動）

CSS2.1で削除。

聴覚特性プロパティの歴史と現代のウェブアクセシビリティ

かつてCSS2の「アウラル（聴覚）メディア」仕様の一部として策定されていたelevationプロパティは、スクリーンリーダーなどの音声合成出力において、音が聞こえてくる垂直方向の角度（高さ）を立体的に指定するためのユニークなプロパティでした。しかし、より専門的には、現在の多様な閲覧環境においてすべての訪問者に安定した情報を提供し、同時に検索エンジンに適切に評価されるホームページを構築するためには、標準化された現代のアクセシビリティ仕様に完全に準拠することが重要です。

アウラルCSSの削除とWeb Speech APIへの移行

ホームページ（ウェブサイト）制作の歴史において、elevationやazimuth（水平角度）といった聴覚プロパティは、ブラウザや音声読み上げソフト側での実装がほとんど進まなかったことから、W3Cの標準仕様（CSS2.1以降）において事実上削除されました。現代のホームページにおいて、より高度でインタラクティブな音声合成や音声認識機能を実装したい場合には、CSSではなくJavaScriptの標準規格である「Web Speech API（SpeechSynthesis）」を使用するのが世界的な標準アプローチです。

Web Speech APIを活用することで、言語や音声の種類、速度（rate）、ピッチ（pitch）、音量（volume）などをデバイス環境に合わせて確実に制御できるようになります。標準化されたJavaScriptのAPIは最新の主要なブラウザで安定して動作するため、環境ごとの動作不良を防ぎ、事業の信頼性を高めるアクセシビリティ対応を安全に実現できます。

WAI-ARIAの正しいマークアップと表示速度の最適化によるSEO効果

より専門的には、視覚障害を持つユーザーや音声読み上げ環境を利用する訪問者に対して、ホームページ（ウェブサイト）の情報を正確に届けるためには、スタイルシートによる音声制御ではなく、HTML5の構造化と「WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）」属性の正しいマークアップが極めて重要です。例えば、重要な通知領域に「role=”alert”」を付与したり、支援技術に読み上げ順序を伝える構造を設計したりすることで、ページ全体の情報アクセシビリティが劇的に向上します。

こうしたセマンティック（意味論的）なマークアップを施すことは、検索エンジンのクローラーがページの構造やコンテンツの重要度を正確に理解・評価するための強力なSEO対策（検索エンジン最適化）に直結します。不要な装飾や古いコードを排除した軽量なデータ設計は、ページの読み込み速度を向上させ、スマートフォン環境でのユーザー離脱を防ぐ役割も果たすため、高いデザイン性と集客力を両立させた、日々の事業展開において成果を最大化できるホームページの構築へとつながっていきます。

elevation : ;

ホームページ制作の1ポイント

音声・読み上げに関するCSSもたくさんありますが、CSS3などでは、ほとんどそういったものは削除されています。

cue 要素の前後の合図音（サウンドアイコン）をまとめて指定

cue: ;

cueは、要素の前後の合図音（サウンドアイコン）をまとめて指定します。
値を1つ指定で、その要素の前後に適用します。
値を2つ指定で（半角スペースで区切る）、指定順に要素の前と後に適用します。

none

音声を指定しない（初期値）

ファイル（URL）

音声ファイルを指定（URL）

cue 要素の前後の個別指定

cue-after、cue-beforeで、要素の前後のの合図音に関する指定を個別指定することができます。

CSS2.1で削除。

cue: ;

cue-after 要素の後の合図音を指定

cue-after: ;

cue-afterは、要素の後の合図音（サウンドアイコン）を指定します。

none

音声を指定しない（初期値）

ファイル（URL）

音声ファイルを指定（URL）

cue-before 要素の前の合図音を指定

cue-before: ;

cue-beforeは、要素の前の合図音（サウンドアイコン）を指定します。

none

音声を指定しない（初期値）

ファイル（URL）

音声ファイルを指定（URL）

CSS2.1で削除。

cue-before: ;

音声再生制御の一括指定と現代のアクセシビリティ設計

かつてCSS2の「アウラル（聴覚）メディア」仕様の一部として策定されていたcue（キュー）プロパティは、スクリーンリーダーなどが要素のテキストを読み上げる「直前」と「直後」に挿入する特定の効果音や音声ファイル（オーディオアイコン）を一括して指定するためのプロパティでした。しかし、より専門的には、現在の多様な閲覧環境においてすべての訪問者に安定した情報を提供し、同時に検索エンジンに適切に評価されるホームページを構築するためには、標準化された現代のアクセシビリティ仕様に完全に準拠することが重要です。

アウラルCSSの削除とHTML5オーディオ・Web VTTへの完全移行

ホームページ制作の歴史において、cueやcue-before、cue-afterといった音声制御プロパティは、ブラウザや音声読み上げソフト側での実装がほとんど進まなかったことから、W3Cの標準仕様（CSS2.1以降）において事実上削除（非推奨化）されました。現代のホームページ（ウェブサイト）において、動画や音声コンテンツに対して適切な字幕やタイミングに合わせた音声ガイダンス、効果音の制御を行いたい場合には、CSSではなくHTML5標準の「<audio>」タグや「<video>」タグ、長文の読み上げ構造を制御する標準規格「WebVTT（.vttファイル）」を使用するのが世界的な標準アプローチです。

WebVTTを活用することで、テキストの読み上げや映像の進行に完全に同期した形で、前後の効果音や補足情報をデバイス環境に合わせて確実に制御できるようになります。標準化されたHTML5とJavaScriptのAPIは最新の主要なブラウザで安定して動作するため、環境ごとの動作不良を防ぎ、事業の信頼性を高めるアクセシビリティ対応を安全に実現できます。

ホームページ制作・Webデザインの1ポイント

2000年台前半から中盤あたりのホームページではフラッシュアニメーションを利用したり、こうしたCSSを利用して、ボタンにマウスカーソルが乗ると音が出る仕様のものがたくさんありました。

azimuth 音声が聞こえてくる水平角度を指定

azimuth : ;

azimuth（アジマス）は、ホームページ上で音声を流す場合の音声が聞こえてくる水平角度（方向）を指定します。アジマス。

azimuth : 数値

azimuth : 数値で、角度を指定。単位はdeg（度）、grad（グラジアン）、rad（ラジアン）

azimuth : キーワード

left-side

270deg（-90deg）、左

far-left

300deg（-60deg）

left

320deg（-40deg）

center-left

340deg（-20deg）

center

0deg（-360deg）、前（初期値）

center-right

20deg（-340deg）

right

40deg（-320deg）

far-right

60deg（-300deg）

right-side

90deg（-270deg）、右

far-right behind

120deg（-240deg）※背後の角度にはキーワード「behind」を付加

right behind

140deg（-220deg）

center-right behind

160deg（-200deg）

center behind

180deg（-180deg）、後ろ

center-left behind

200deg（-160deg）

left behind

220deg（-140deg）

far-left behind

240deg（-120deg）

rightwards

現在の角度に+20deg　右回りに移動

leftwards

現在の角度に-20deg　左回りに移動

CSS2.1で廃止。

音声読み上げ仕様の変遷と現代ホームページにおけるアクセシビリティのあり方

ホームページ（ウェブサイト）制作において、azimuth プロパティはかつて音声出力の方向性を制御するために定義された仕様です。より専門的には、視覚障害を持つユーザーへの情報伝達や、音声ブラウザを用いたコンテンツ再生の際に、サラウンド音声のように音の定位（聞こえる方向）を細かく配置するためのプロパティでした。現在のWeb標準からは除外されていますが、その背景にある「すべてのユーザーに情報を届ける」というアクセシビリティの精神は、現代の事業ホームページ（ウェブサイト）運営においても極めて重要です。

オーディオ関連仕様の廃止とモダンWebへの統合

azimuth や elevation（音の上下の角度を指定するプロパティ）といった、CSS2時代に設計された「聴覚メディア（Aural Media）」向けのプロパティは、当時のブラウザの対応状況や実装の複雑さから、広く普及することはありませんでした。結果として、CSS2.1の段階でこれらの多くは標準仕様から廃止される方向となりました。

しかし、ホームページ（ウェブサイト）における音の演出や制御そのものが不要になったわけではありません。現代のモダンWeb制作においては、CSSによる簡易的な制御ではなく、JavaScriptの「Web Audio API」などを活用することで、より高度で立体的な3Dオーディオ（立体音響）の構築が可能になっています。ゲームコンテンツやインタラクティブな事業プロモーションサイトなど、音響効果を重視する場合には、これら最新の動的APIを組み合わせて実装していく手法が現在の主流となっています。

azimuth : ;

ホームページ制作の1ポイント

azimuthなど音声や読み上げに関するCSSは、細かな設定のできるものも多くありましたが、時代とともに削除されていきました。

（初回投稿日 2012年6月9日）

音声関連CSSの衰退と現代のアクセシビリティ設計手法

ここまで、かつてCSSで策定されていた音声読み上げ・空間オーディオ制御プロパティについて解説しました。これらは理論上は非常に優れたアプローチでしたが、なぜ現代のホームページ（ウェブサイト）制作において廃止され、使われなくなってしまったのでしょうか。ここでは、その歴史的な背景と、現代の事業においてどのようにアクセシビリティ対応を実装すべきかという代替手段について詳しく解説します。

聴覚スタイルシート（Aural CSS）が普及しなかった背景

CSSで音声読み上げを制御するという構想が普及しなかった最大の理由は、視覚的なデザインと聴覚的な情報の制御を無理に統合しようとした点にあります。音声読み上げソフト（スクリーンリーダー）を利用するユーザーは、自身の聞き取りやすい声の高さ（pitch）や読み上げ速度を、ソフト側の設定で自分好みに固定して使用しています。そこにホームページ側がCSSで強制的に「ここは高い声で」「ここは右から聞こえるように」といった指示を出してしまうと、かえってユーザーの操作感を損ない、混乱を招く結果となってしまいます。

また、ブラウザとスクリーンリーダーという異なるソフトウェア間で、CSSの音声指示を正確に連携させる技術的なハードルも高く、主要なブラウザベンダーが実装を見送ったことも普及しなかった要因です。そのため、現代のWeb標準において、音声の制御はユーザー側の設定を尊重するという方向へ大きく舵を切りました。

現代の手法1：セマンティックHTMLによる構造の明示

現在、スクリーンリーダーに対して正しい抑揚や間（ポーズ）を与え、情報を正確に伝えるための最も確実な代替手段は「セマンティック（意味論的）なHTMLマークアップ」を徹底することです。

例えば、かつて「pause-before」や「pause-after」を使って文章の間に一時停止を意図的に作ろうとしていた部分は、HTMLの段落タグや見出しタグを正しく使用することで解決します。スクリーンリーダーは、見出しから次の段落に移る際や、箇条書き項目を読み上げる際に、プログラムとして自然な「間」を自動的に挿入してくれます。

また、強調したい言葉の前に「cue（合図音）」を鳴らすようなCSSの代わりに、HTMLの強調タグを適切に使用します。これにより、スクリーンリーダーは音声のトーンをわずかに変えたり、ユーザーに対して文章が強調されているという情報をテキストとして正確に伝えることができます。見た目だけの装飾ではなく、文書の構造を正しく定義することが、現代のアクセシビリティの基盤となります。

現代の手法2：WAI-ARIAを活用した動的な状態の伝達

より専門的には、WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）という仕様を活用します。これは、HTMLだけでは表現しきれない複雑なユーザーインターフェースの状態を、スクリーンリーダーに正しく伝えるための技術です。

事業用のホームページ（ウェブサイト）では、ポップアップウィンドウや、クリックすると展開するアコーディオンメニューなど、画面上で状態が動的に変化する要素が頻繁に使用されます。視覚的には変化が分かっても、音声だけで閲覧しているユーザーには伝わりません。

このような場合、WAI-ARIAの属性をHTMLに付与することで、「現在メニューが開いています」「エラーメッセージが表示されました」といった情報をスクリーンリーダーに読み上げさせることができます。CSSの「play-during」で背景音を鳴らして注意を引くのではなく、システム側から直接、言葉として情報を伝えるアプローチが現代の標準です。

音声読み上げを意識したコンテンツ作成の重要性

技術的なマークアップに加えて、ホームページ（ウェブサイト）に掲載する文章の書き方自体もアクセシビリティに直結します。画像を配置する際には、単なるファイル名ではなく、画像が持つ意味を正確に説明する代替テキストを必ず設定します。また、「こちらをクリック」というような指示語ではなく、リンク先のページ内容が具体的に分かるテキストを設定することが求められます。

アクセシビリティへの対応は、一部のユーザーのためだけの特殊な施策ではありません。検索エンジンのクローラーも、スクリーンリーダーと同様にHTMLの構造やテキスト情報を解析してページを評価しています。つまり、音声読み上げに最適化された整然とした構造を持つホームページは、結果としてSEOの評価向上にも直結します。

古いCSSプロパティに頼るのではなく、最新のHTML標準とWAI-ARIAを駆使し、誰にとっても利用しやすいホームページを構築することは、事業の社会的信頼性を高め、長期的な集客効果を生み出すための重要な戦略となります。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法