CSS text-transform 属性

定義と使用方法

text-transform 属性はテキストの大文字と小文字を制御します。

説明

この属性は、元のドキュメントのテキストの大文字と小文字に関係なく、要素内の文字の大文字と小文字を変更します。値が capitalize であれば、特定の文字を大文字にする必要がありますが、どの文字を大文字にするかは明確に定義されていません。これはユーザーエージェントが「単語」をどのように識別するかによって決まります。

も参照してください：

CSS 教程：CSS 文本

HTML DOM リファレンスマニュアル：textTransform 属性

例

異なる要素内のテキストを変換：

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

実際に試してみてください

ヒントと注釈

注釈：異なるユーザーエージェントは、単語がどこから始まるかを決定する方法が異なるため、大文字を決定する方法も異なります。例えば、テキスト「w3-school」は「W3-school」と「W3-School」の2種類で表示できます。CSSはどちらが正しいかを定義しておらず、どちらも可です。

CSS 文法

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

属性値

値 説明
なし デフォルト。小文字と大文字を含む標準のテキストを定義
capitalize テキスト内の各単語は大文字で始まる
uppercase 大文字のみを定義
lowercase 大文字はなく、小文字のみを定義
inherit 親要素から text-transform 属性の値を継承するべきことを定義しています。

技術的詳細

デフォルト値： なし
継承性： はい
バージョン： CSS1
JavaScript 文法： object.style.textTransform="uppercase"

さらに多くの例

テキスト内の文字の大文字と小文字を制御
この例では、テキスト内の文字の大文字と小文字をどのように制御するかを示します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0