MENU

【CSS】アルファベットを全て大文字表示にする

アルファベット全てを大文字表示される

英語(アルファベット)をHTMLで書く場合、全部大文字にしない方が良いと聞いたのですが何ででしょう??

というわけで今回はCSSでアルファベットを全て大文字表示にする方法を説明します。
これを使うには色々理由がありますのでその辺りも合わせてご説明します。

目次

HTMLでアルファベットを全部大文字にしない方が良い理由

まずなぜHTMLでアルファベットを全部大文字にしない方が良いのでしょうか?
例えばこんな感じですね↓

<h3>BLOG</h3>

HTMLを上記のような全て大文字で書いてしまうと音声読み上げソフトで
「ブログ」ではなく「ビーエルオージー」と発音されてしまいます。

音声読み上げソフトとは?
目の不自由な方が、キーボードの操作などによってホームページを閲覧する手助けとなるソフトです。 音声読み上げソフトを利用すると、ホームページ上に掲載されている文字や画像を音声で読み上げることが可能になります。

なるほど!でもデザインカンプでは見出しは大文字のアルファベットになっているのですがどうしましょう!?

ここで使うのがCSSのプロパティ「text-transform」になります。
次項より説明していきます!!

text-transformの使い方

「text-transform」はCSSのプロパティはテキストを全て大文字にしたり、全て小文字にしたり、各単語の先頭を大文字にしたりすることを指定できます。
早速それぞれ使い方を見てみましょう。

See the Pen ブログ用 transform by そす (@Sosgoyo) on CodePen.

では順番に説明していきます!

アルファベットを全て大文字にする「uppercase」

まずは今回の主題、アルファベットを全て大文字にする「uppercase」です。

See the Pen ブログ用 transform by そす (@Sosgoyo) on CodePen.

HTMLでは先頭だけ大文字にしてあとは小文字で表記してます。
CSSで「text-transform: uppercase;」を指定するだけで表示は全て大文字になります。

アルファベットの先頭だけを大文字にする「capitalize」

「capitalize」はアルファベットの先頭だけを大文字にします。

See the Pen ブログ用 transform by そす (@Sosgoyo) on CodePen.

アルファベットを全て小文字にする「lowercase」

「lowercase」はアルファベットを全て小文字にします。

See the Pen ブログ用 transform by そす (@Sosgoyo) on CodePen.

HTMLでは全て大文字にしておりますが、表示は小文字になっております。

まとめ

というわけで今回はCSSでアルファベットを全て大文字表示にする方法を説明しました!
紹介した中でもuppercaseは良く使用しますので是非覚えておきましょう!!

よかったらフォローしてね!!
  • URLをコピーしました!
  • URLをコピーしました!
目次