【CSS】text-transform - テキストの表記変換

CSSのtext-transformプロパティについて解説します。

検証環境

CSS

macOS

14.1

text-transform

text-transformは“テキストの変換”のプロパティです。

主にアルファベットに対して使用し、小文字の大文字変換や単語の１文字目のみの大文字変換などで使用します。

基本構文

text-transform: 値;

値

代表的な値は次の通りです。

値	意味
none	変換なし
uppercase	全て大文字に変換
lowercase	全て小文字に変換
capitalize	単語の１文字目を大文字に変換

サンプル

大文字に変換

sample.html

<style>
p {
    ___ih_hl_start
    text-transform: uppercase;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

小文字に変換

sample.html

<style>
p {
    ___ih_hl_start
    text-transform: lowercase;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

単語の１文字目を大文字に変換

sample.html

<style>
p {
    ___ih_hl_start
    text-transform: capitalize;
    ___ih_hl_end
}
</style>

<p>CSS is a programming language that decorates elements such as HTML and XML.</p>

プレビュー