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

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

  • トルコ語 (tr)、アゼルバイジャン語 (az)、クリミア・タタール語 (crh)、ヴォルガ・タタール語 (tt)、バシキール語 (ba) などのチュルク語族にはドットの有無が異なる 2 種類の i があり、大文字・小文字のペアも i/İı/I の 2 組があります。

  • ドイツ語 (de) では、ß の大文字が SS になります。

  • オランダ語 (nl) では二重音字 ij が、単語の最初の文字のみ大文字にする text-transform: capitalize を指定しても IJ になります。

  • ギリシャ語 (el) では離接的接続のエータ (ή/Ή) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (ά/Α)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (άι/ΑΪ)。

  • ギリシャ語 (el) で、小文字のシグマは σς の 2 種類あります。ς は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (Σ) に text-transform: lowercase を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。

  • アイルランド語 (ga) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば text-transform: uppercasear aon tslí を、予想される AR AON TSLÍ ではなく AR AON tSLÍ にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、an t-uisceAN tUISCE になります (また、text-transform: lowercase ではハイフンが適切に再挿入されます)。

言語は 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 文字です 。単語の先頭にある句読点や記号は無視されます。

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
このキーワードは一般にルビによるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。

形式文法

none | capitalize | uppercase | lowercase | full-width | full-size-kana

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; }

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

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; }

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

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 文字である、最初の文字が対象です。

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 文字である、最初の文字が対象です。

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文字として扱わなければならないことを示す例です。

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; }

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

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 文字目の母音字のトレマになることを示す例です。

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; }

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

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; }

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

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 コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

full-size-kana

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

アクセシビリティの考慮事項

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

仕様書

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

初期値none
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
text-transformChrome 完全対応 1
補足
完全対応 1
補足
補足 The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7
補足
完全対応 7
補足
補足 Since Opera 15, the text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Safari 完全対応 1
補足
完全対応 1
補足
補足 The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.
WebView Android 完全対応 1
補足
完全対応 1
補足
補足 The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Chrome Android 完全対応 18
補足
完全対応 18
補足
補足 The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 1
補足
完全対応 1
補足
補足 The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.
Samsung Internet Android 完全対応 あり
capitalize as defined by CSS level 3Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 14IE 完全対応 3Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
full-width
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 19IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 19Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
full-size-kana
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 64IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 64Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Dutch IJ digraphChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 14IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 14Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Greek accented lettersChrome 完全対応 30Edge 完全対応 12Firefox 完全対応 15IE 完全対応 4Opera 完全対応 17Safari 完全対応 ありWebView Android 完全対応 4.4Chrome Android 完全対応 30Edge Mobile 完全対応 12Firefox Android 完全対応 15Opera Android 完全対応 18Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Σσ or word-final ςChrome 完全対応 30Edge 完全対応 12Firefox 完全対応 14IE 完全対応 4Opera 完全対応 17Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 30Edge Mobile 完全対応 12Firefox Android 完全対応 14Opera Android 完全対応 18Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり
iİ and ıIChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 14IE 完全対応 4Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
ßSSChrome 完全対応 ありEdge 完全対応 18Firefox 完全対応 1IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, na4zagin3, yyss
最終更新者: mdnwebdocs-bot,