【CSS】アルファベット英語を大文字・小文字にする【音声対策】

パソ君

・英文字ってCSSで大文字にできるの？

こんな疑問にお答えします。

実は英文字はCSSにて、大文字にしたり小文字にしたり指定が可能です。

音声読み取り対策として、英文字をすべてHTMLで大文字にするのはあまりよろしくありません。

アクセシビリティを考慮する場合、CSSで調節すべし！

ジト

簡単に実装できるよ！

ということで、この記事では「CSSでアルファベット英語を大文字・小文字にする」について解説していきます！

【音声対策】アルファベット英語をCSSで大文字にすべき理由

ここだけの話、英語を大文字で書くときHTMLでそのまま書くのはアクセシビリティ的によくないんですよね。

理由は「音声読み上げソフト」です。

これはテキストを音声で読み上げてくれるソフトのことですね。

例えば下記の英文字があったとします↓

<h2>WORKS</h2>

音声読み上げソフトではこの英文字を「W」「O」「R」「K」「S」と、1文字ずつ読んでしまいます。

そうなると文字の意味が伝わりません。つまりアクセシビリティ的によくありません。

本来「ワークス」と呼ばれたいですよね。

そのためには下記のように記述して↓

<h2>works</h2>

CSSですべて大文字にすることで対応できます。

先頭だけ大文字ならOKらしい

ちなみに先頭英文字だけ大文字なら、音声的にもちゃんと読んでくれるらしいです。

例として下記ですね↓

<h2>Works</h2>

この場合「ワークス」となります。そのためわざわざCSSで調整する必要はないです。

【CSS】アルファベット英語を大文字・小文字にする【音声対策】

結論：「text-transform」を使えば実装できます。

「uppercase」の値を使うことで、英文字をすべて大文字にすることができます。

これを使えばデザイン通り実装もでき、かつアクセシビリティ的に良くすることが可能です。

サンプル作成してみました！

「text-transform」にて、それぞれの値を指定した場合のサンプルを作成してみました。

今回は例として「Jito works」というテキストを使います。

See the Pen ➄テキスト縁取り by jito-coder (@jito-coder) on CodePen.

.txt01 {
  text-transform: none;
}

.txt02 {
  text-transform: capitalize;
}

.txt03 {
  text-transform: uppercase;
}

.txt04 {
  text-transform: lowercase;
}

英文字がCSSを使うことで、大文字や小文字に変わってますよね！

【CSS】アルファベット英語を大文字・小文字にする【音声対策】：まとめ

ジト

cssを使って英語を大文字にしてみよう！