JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのtext-transformプロパティの使い方を徹底解説！大文字・小文字変換の基本

CSSの text-transform プロパティを使うと、HTMLソースを書き換えることなく、テキストの表示形式を「先頭文字だけ大文字」「すべて大文字」「すべて小文字」に変換できます。英語圏向けのサイトや、見出し・ボタンなどのデザインでよく利用される便利なプロパティです。

text-transformプロパティで指定できる値

text-transform プロパティには、主に以下の4つの値を指定できます。

  • none: 変換を行いません(デフォルト値)。
  • capitalize: 各単語の先頭文字を大文字にします。
  • uppercase: すべての文字を大文字に変換します。
  • lowercase: すべての文字を小文字に変換します。

使用例

次のコードは、3つの段落に対してそれぞれ異なる text-transform の値を適用した例です。

<html>
<head>
</head>
<body>
   <p style="text-transform:capitalize;">
      This will be capitalized
   </p>

   <p style="text-transform:uppercase;">
      This will be in uppercase
   </p>

   <p style="text-transform:lowercase;">
      This will be in lowercase
   </p>
</body>
</html>

このコードをブラウザで表示すると、以下のように出力されます。

  • capitalize を指定した場合 → 「This Will Be Capitalized」(各単語の先頭が大文字)
  • uppercase を指定した場合 → 「THIS WILL BE IN UPPERCASE」(すべて大文字)
  • lowercase を指定した場合 → 「this will be in lowercase」(すべて小文字)

活用のポイント

text-transform は見た目上の表示のみを変更するため、元のHTML内のテキストデータはそのまま維持されます。そのため、SEOやコピー&ペースト時のテキスト内容に影響を与えたくない場合に最適です。また、ナビゲーションメニューやボタンのラベルを統一感のあるデザインにしたいときにも役立ちます。

  1. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border

  2. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none