text-transformプロパティ

最終更新日：2023-12-08
公開日：2016-07-25

はアルファベットテキストの表示方法を指定するプロパティです。

初期値

none
継承

継承あり
適用できる要素

全要素

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

text-transformプロパティには以下の値を設定することができます。

値	内容
`none`	初期値。指定なし
`capitalize`	単語の先頭文字のみ大文字にして表示
`uppercase`	全て大文字にして表示
`lowercase`	全て小文字にして表示

使用例

text-transformプロパティを使用するコードと、ブラウザでの表示を確認していきます。

CSS コード例

.sample1 p {
  margin-bottom: 0;
  font-size: 18px;
}
.text1 {
  text-transform: none;
}
.text2 {
  text-transform: capitalize;
}
.text3 {
  text-transform: uppercase;
}
.text4 {
  text-transform: lowercase;
}

HTML コード例

<div class="sample1 first">
  <h2>text-transform: none;</h2>
  <p class="text1">cascading style sheet</p>
</div>
<div class="sample1">
  <h2>text-transform: capitalize;</h2>
  <p class="text2">cascading style sheet</p>
</div>
<div class="sample1">
  <h2>text-transform: uppercase;</h2>
  <p class="text3">cascading style sheet</p>
</div>
<div class="sample1">
  <h2>text-transform: lowercase;</h2>
  <p class="text4">Cascading Style Sheet</p>
</div>

ブラウザで表示してみると以下のようになります。

記事一覧