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 属性で定義します。

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

構文

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

/* グローバル値 */
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
一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。

形式文法

none | capitalize | uppercase | lowercase | full-width

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

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

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

仕様書

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

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1112147213
capitalize as defined by CSS level 3 ? ?14 ? ? ?
full-width なし ?19 なし なし なし
Dutch IJ digraph なし ?14 なし なし なし
Greek accented letters30 ?15 なし なし なし
Σσ or word-final ς30 ?14 なし なし6
iİ and ıI なし ?14 ? ? なし
ßSS ? ?1 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応11 ? あり4 ?13 ?
capitalize as defined by CSS level 3 ? ? ?14 ? ? ?
full-width なし ? ?19 なし なし なし
Dutch IJ digraph なし ? ?14 なし なし なし
Greek accented letters なし ? ? なし なし なし ?
Σσ or word-final ς なし ? ?14 なし なし ?
iİ and ıI なし ? ?14 ? なし なし
ßSS ? ? ?4 ? ? ?

1. The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.

2. 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.

3. The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.

関連情報

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

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