CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcue-beforeプロパティとは？音声読み上げ前のサウンド指定方法

cue-before プロパティは、スクリーンリーダーなどの音声読み上げ環境において、ある要素の内容を読み上げる直前に再生するサウンドを指定するためのプロパティです。音による合図で要素の始まりを明確にし、他の要素との区切りをつける役割を果たします。

cue-beforeプロパティに指定できる値

  • url：読み上げ前に再生する音声ファイルのURLを指定します。例えば「bell.aiff」や「pop.au」などのファイルを指定できます。
  • none：何も音を再生しません。これがデフォルトの動作です。

記述例

以下のコードは、リンク（a要素）と見出し（h1要素）に対して、読み上げ前に異なるサウンドを再生させる例です。

<style>
<!--
a  { cue-before: url("bell.aiff"); }
h1 { cue-before: url("pop.au");   }
-->
</style>

補足

このプロパティはCSS Speech（音声）モジュールに関連するもので、主に視覚に障害のあるユーザー向けの音声ブラウジング環境で活用されます。対応していない環境では単に無視されるため、通常のWebページの表示には影響しません。なお、対になるプロパティとして、要素の内容を読み上げた後にサウンドを再生する cue-after もあります。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し