CSSのvolumeプロパティとは？音量指定の値と使い方を解説

CSSのvolumeプロパティは、音声読み上げ時における音量（声の中央音量）を指定するためのプロパティです。スクリーンリーダーなどの音声合成環境でコンテンツを読み上げる際の音量レベルを制御できます。

このプロパティには、以下のような値を設定することができます。

volumeプロパティに指定できる値

• 数値：0〜100までの任意の数値を指定します。「0」は最小限に聞き取れる音量レベル、「100」は快適に聞こえる最大音量レベルに対応します。
• パーセンテージ：親要素から継承した値を基準として相対的に計算され、その結果が0〜100の範囲にクリップされます。
• silent：まったく音を出しません。なお、「0」を指定した場合と「silent」を指定した場合は意味が異なる点に注意してください。
• x-soft：「0」を指定した場合と同じです。
• soft：「25」を指定した場合と同じです。
• medium：「50」を指定した場合と同じです。初期値に相当します。
• loud：「75」を指定した場合と同じです。
• x-loud：「100」を指定した場合と同じです。

記述例

以下は、特定の段落に対して非常に小さい音量（x-soft）を指定する例です。

<style>
  <!--
    P.goat {
      volume: x-soft
    }
  -->
</style>

このようにクラス名「goat」が付いたp要素に対して、volumeプロパティでx-softを設定することで、該当するテキストが音声読み上げ時に最小レベルの音量で再生されるようになります。

注意点

volumeプロパティはCSS Speech Module（音声スタイルシート）に関連するプロパティであり、一般的なブラウザの視覚表示には影響しません。実際に利用できるかどうかは、使用する環境や支援技術の対応状況によって異なるため、実装時には注意が必要です。