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

CSSのcueプロパティとは？cue-before・cue-afterの一括指定方法を解説

cueプロパティは、cue-beforeとcue-afterをまとめて指定できるショートハンド（一括指定）プロパティです。主に音声読み上げなどのスピーチメディア向けに使用され、要素の前後に再生するサウンド（キュー音）を設定します。

値の指定ルール

cueプロパティに値を指定する際は、以下のルールに従います。

  • 2つの値を指定した場合： 1つ目の値がcue-beforeに、2つ目の値がcue-afterに適用されます。
  • 1つの値のみ指定した場合： その値がcue-beforeとcue-afterの両方に適用されます。

記述例

たとえば、以下の2つのルールはどちらも同じ意味になります。

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

上記の例では、h1要素の前後どちらにも「pop.au」というサウンドファイルが再生されるよう設定しています。個別に指定する場合と比べ、cueプロパティを使うことでコードを簡潔に記述できるのがメリットです。

  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 … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し