CSSのpauseプロパティとは？読み上げ時のポーズを指定するショートハンドの使い方

pauseプロパティは、pause-beforeとpause-afterをまとめて設定できるショートハンド（省略記法）です。主に音声読み上げ（スピーチ合成）の際に、要素の前後に挿入される「間（ポーズ）」の長さを制御するために使われます。

値の指定ルール

pauseプロパティには、1つまたは2つの値を指定できます。値の解釈は以下のとおりです。

• 値が1つの場合： 要素の前後両方に同じポーズ時間が適用されます。
• 値が2つの場合： 1つ目の値がpause-before（要素の前）、2つ目の値がpause-after(要素の後)として解釈されます。

記述例

CSSのpauseプロパティを使った具体的なコード例を見てみましょう。

<style>
    <!--
        /* pause-before: 20ms; pause-after: 20ms */
        h1 { pause : 20ms }

        /* pause-before: 30ms; pause-after: 40ms */
        h2 { pause : 30ms 40ms }

        /* pause-before: ?; pause-after: 10ms */
        h3 { pause-after : 10ms }
    -->
</style>

コードの解説

• h1 { pause : 20ms } … h1要素の前後にそれぞれ20ミリ秒のポーズが挿入されます。
• h2 { pause : 30ms 40ms } … 値が2つあるため、h2要素の前に30ミリ秒、後に40ミリ秒のポーズが挿入されます。
• h3 { pause-after : 10ms } … ショートハンドではなく個別プロパティを使用し、h3要素の後にのみ10ミリ秒のポーズを挿入します。

補足：対応ブラウザについて

pauseプロパティはCSS Speech Moduleで定義されているプロパティですが、現在のところ主要ブラウザでの実装は限られています。実際に利用する場合は、対象環境での動作確認を行うことをおすすめします。