--- title: text-transform slug: Web/CSS/text-transform tags: - CSS - CSS Property - Layout - Reference - Text - 'recipe:css-property' - 日本語処理 translation_of: Web/CSS/text-transform ---
{{CSSRef}}

CSS の text-transform プロパティは、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。

{{EmbedInteractiveExample("pages/css/text-transform.html")}}

text-transform プロパティは、以下のように言語固有の大文字・小文字の扱いを考慮します。

言語は HTML の lang 属性や XML の xml:lang 属性で定義します。

注: これらの特定のケースはブラウザーにより異なりますので、ブラウザーの互換性を確認してください。

構文

/* キーワード値 */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/* グローバル値 */
text-transform: inherit;
text-transform: initial;
text-transform: unset;
capitalize

それぞれの単語の最初の文字を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。

capitalize が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。
capitalize キーワードは CSS 1 及び CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は - および _ を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は ⓐ のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の capitalize の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。
uppercase
すべての文字を大文字に変換させるキーワードです。
lowercase
すべての文字を小文字に変換させるキーワードです。
none
すべての文字を変換させないキーワードです。
full-width
一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。
full-size-kana
このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。

アクセシビリティの考慮

テキストの長い区間に text-transform の値を uppercase で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。

公式定義

{{CSSInfo}}

形式文法

{{csssyntax}}

例

none

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: none
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>

span {
  text-transform: none;
}
strong { float: right; }

文字を変換しない例です。

{{ EmbedLiveSample('none', '100%', '100px') }}

capitalize (一般的)

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: capitalize
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

頭文字を大文字にする例です。

{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}

capitalize (句読点)

<p>Initial String
  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
</p>
<p>text-transform: capitalize
  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。

{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}

capitalize (記号)

<p>Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。

{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}

capitalize (オランダ語の二重音字 ij)

<p>Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>text-transform: capitalize
  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
</p>
span {
  text-transform: capitalize;
}
strong { float: right; }

オランダ語の二重音字 ij を1文字として扱わなければならないことを示す例です。

{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}

uppercase (一般的)

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: uppercase
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
  text-transform: uppercase;
}
strong { float: right; }

テキストを大文字に変換する例です。

{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}

uppercase> (ギリシャ語の母音字)

<p>Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>text-transform: uppercase
  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
</p>
span {
  text-transform: uppercase;
}
strong { float: right; }

離接的接続の eta を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。

{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}

lowercase (一般的)

<p>Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
</p>
<p>text-transform: lowercase
  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
</p>
span {
  text-transform: lowercase;
}
strong { float: right; }

テキストを小文字に変換する例です。

{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}

lowercase (ギリシャ文字 Σ)

<p>Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>text-transform: lowercase
  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
</p>
span {
  text-transform: lowercase;
}
strong { float: right; }

ギリシャ文字のシグマ (Σ) が、状況に応じて一般的な小文字のシグマ (σ) または単語の末尾での表記 (ς) に変換される例です。

{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}

lowercase (リヒテンシュタイン語)

<p>Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>
span {
  text-transform: lowercase;
}
strong { float: right; }

これはリヒテンシュタインの文字 Ĩ および J́ が小文字に変換されるとドットを保持する様子を示します。

{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}

full-width (一般)

<p>Initial String
  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
</p>
<p>text-transform: full-width
  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
</p>
span {
  text-transform: full-width;
}
strong { width: 100%; float: right; }

一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

{{ EmbedLiveSample('full-width_General', '100%', '175px') }}

full-width (日本語の半角カタカナ)

<p>Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>
span {
  text-transform: full-width;
}
strong { width: 100%; float: right; }

日本語の半角カタカナは、8ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の2つのコードポイントで表現されます。 full-width は、これらの文字を全角に変換する際に、1つのコードポイントにまとめます。

{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}

full-size-kana

<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} {{Spec2('CSS3 Text')}} 対象の文字を {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} から、 Unicode の数字又は文字一般のカテゴリーに属するすべての文字に拡張。 capitalize の動作を、最初の区切り文字や記号を無視して単語の先頭の文字に適用するように変更。表意文字とアルファベット文字を自然な形で混在させるための full-width および full-size-kana キーワードを追加。
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} {{Spec2('CSS2.1')}} 対象の文字を {{SpecName('CSS1', '#text-transform', 'text-transform')}} から、2 種類の表記を持つ非ラテン文字に拡張。
{{SpecName('CSS1', '#text-transform', 'text-transform')}} {{Spec2('CSS1')}} 初回定義

ブラウザーの互換性

{{Compat("css.properties.text-transform")}}

関連情報