CSSのpause-beforeプロパティとは？使い方と指定できる値を解説

CSSのpause-beforeプロパティとは

pause-beforeプロパティは、音声読み上げ（スピーチ合成）において、要素の内容を読み上げる前に挿入される一時停止（ポーズ）の長さを指定するためのCSSプロパティです。文章の区切りや強調したい箇所の前に間を設けることで、より自然で聞き取りやすい音声出力を実現できます。

指定できる値

• 時間（time）：秒（s）やミリ秒（ms）といった絶対時間単位で、ポーズの長さを直接指定します。
• パーセンテージ（percentage）：speech-rateプロパティの値の逆数をもとに、ポーズの長さが自動的に算出されます。

パーセンテージ指定の計算例

たとえば、speech-rateが「毎分120語」に設定されている場合、1語あたりの読み上げにかかる時間は0.5秒（500ミリ秒）です。この条件では以下のように動作します。

• pause-beforeが100%の場合 → 500ミリ秒のポーズが挿入される
• pause-beforeが20%の場合 → 100ミリ秒のポーズが挿入される

このように、パーセンテージ指定を利用すると、読み上げ速度に応じてポーズの長さが相対的に変化するため、速度設定を変更しても自然な間隔を保つことができます。

記述例

段落の読み上げ前に0.5秒のポーズを設ける場合は、次のように記述します。

p { pause-before: 500ms; }

まとめ

pause-beforeプロパティは、音声ブラウザやスクリーンリーダー向けのコンテンツで読み上げのテンポを制御するために便利なプロパティです。絶対時間での細かい制御が必要な場合は「time」を、読み上げ速度に連動させたい場合は「percentage」を使い分けると効果的です。