【CSS】text-transformでアルファベットを大文字・小文字に

どうも、くまだです。

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文字全てを小文字に

なお、文字先頭だけ大文字でも正しく読んでくれます。

ここまで読んでくださりありがとうございます。

この記事を書いた人