CSSのspeak-punctuationプロパティとは?記号の読み上げ方法を指定する
speak-punctuationプロパティとは
speak-punctuationプロパティは、スクリーンリーダーなどの音声読み上げ機能において、セミコロンや波括弧(ブレース)などの記号・句読点をどのように読み上げるかを指定するためのCSSプロパティです。
指定できる値
- code − セミコロンや波括弧などの記号を、そのまま文字通りに読み上げます。コードの内容を正確に伝えたい場合に適しています。
- none − 記号を読み上げず、代わりに自然な間(ポーズ)として表現します。文章として聞き取りやすい読み上げが実現できます。
記述例
p {
speak-punctuation: none;
}注意点
このプロパティはかつてCSS Speechモジュールで定義されていましたが、主要なブラウザでは実装されず、現在では事実上使われていない非推奨のプロパティです。実際のWebアクセシビリティ対応では、aria-labelやaria-liveといったWAI-ARIA属性を活用するのが一般的です。
-
CSSのwhite-spaceプロパティとは?要素内の空白・改行の扱い方を徹底解説
CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>
-
CSSのwriting-modeプロパティ徹底解説!テキストを縦書き・横書きにする方法
writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示(初期値) vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し