【CSS】アルファベットの大文字・小文字での表示を指定する方法

  • 2018年4月5日
  • CSS

私の場合は、小文字が強制的に全て大文字になってしまったのがきっかけで調べたプロパティです。

使用するプロパティは「text-transform」です。
こちらは、アルファベットを大文字もしくは小文字で表示するかを指定できます。
指定できる値は下記のとおりです。

表示される文字の形式
none 初期値。大文字・小文字は記述した通りに表示されます
capitalize 単語の先頭文字を大文字で表示します
lowercase 全ての文字を小文字で表示します
uppercase 全ての文字を大文字で表示します

私は none を使いましたが、capitalize も便利そうですね。
が、たまに頭文字を大文字にしたくない時もあるので、そういうイレギュラーなときのことも考えると、none を使うのが無難かな。
で、今回すべての文字が大文字になった原因は、恐らく text-transform: uppercase; が body など結構上位の要素の方に指定されていたためだと思われるので、body で !important を使って強制的に上書きしました。
とりあえず、これで解決です。

 

以上、アルファベットの大文字・小文字での表示を指定する方法でした。
何故か小文字で書いたはずの英単語がすべて大文字になる!という場合は、こちらのプロパティが記述されていないか疑ってみてください。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG