どうも、くまだです。
text-transformプロパティを使ってアルファベットの大文字・小文字調整。
text-transform
Webサイトの見出しやタイトル、ナビメニューなどでアルファベットの大文字で書かれているものがありますが、これを以下のようにコーディングするとします。
<a href="">ABOUT</a>
これを音声読み上げソフトを使って読み上げると、「エービーオーユーティー」と読み上げられます(こちらの意図としては「アバウト」と読ませたい)。HTML側に大文字で記述すると、正しく読み上げされません。
この場合、HTML側は以下のように小文字で記述し、
<a href="">about</a>
CSSには、以下のスタイルを指定します。
a {
text-transform: uppercase;
}
これでブラウザの画面上では大文字で表示されます。音声読み上げソフトを使っても「アバウト」と読み上げられます。
このように、text-transformプロパティはアルファベットを大文字にしたり小文字にしたりするプロパティです。
text-transform:none | 初期値 |
text-transform:capitalize | 文字先頭を大文字に |
text-transform:uppercase | 文字全てを大文字に |
text-transform:lowercase | 文字全てを小文字に |
なお、文字先頭だけ大文字でも正しく読んでくれます。
ここまで読んでくださりありがとうございます。