Written by Kasumi

CSSでテキストを大文字・小文字に自動変換する方法

CSSで英語などのテキストを大文字・小文字に自動変換するプロパティを知りたい。

本記事ではこのような悩みを解決。

text-transformプロパティを使って、大文字・小文字に自動変換する方法を解説します。

大文字に自動変換

/* 文字を小文字に変換 */
p {
  text-transform: lowercase;
}

大文字に自動変換するにはtext-transform: lowercase;を使います。

小文字に自動変換

/* 文字を大文字に変換 */
p {
  text-transform: uppercase;
}

小文字に自動変換するにはtext-transform: uppercase;を使います。

自動変換させない

/* 文字を自動変換させない */
p {
  text-transform: none;
}

逆に自動変換させない場合はtext-transform: none;を使います。

サイト修正などでベースのCSSが影響し、勝手に文字が大文字・小文字になる場合は検証してtext-transformプロパティが使われてないか確認してみましょう。

まとめ

text-transformプロパティを使って英語テキストを大文字・小文字に変換する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

2022.02.15
241
HTMLCSS プログラミング

【簡単】CSSで数字を縦向き・縦書きにする方法【text-orientation: upright;】

2022.04.06
1081
HTMLCSS

【簡単】楽天GOLDページで画像・JS・CSSファイルのキャッシュが削除されない原因を解決!

更新日:2022.11.24
368
HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
1349