text-transform

概要

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

これらの特定のケースはブラウザーにより異なりますので、ブラウザー実装状況の表 を確認してください。

初期値none
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* キーワード値 */
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 が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。
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 コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

仕様

仕様書 策定状況 コメント
CSS Text Level 4
text-transform の定義
草案 CSS Text Module Level 3
text-transform の定義
に、full-size-kana キーワードを追加。また、full-width キーワードとほかのキーワードが併用可能になる。
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 の定義
勧告 初期定義

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0[1] (有) 1.0 (1.7 or earlier) 4.0 7.0[2] 1.0[3]
capitalize (CSS3 版) ?[4] ? 14 (14)[4] ?[4] ?[4] ?[4]
full-size-kana 未サポート ? 未サポート 未サポート 未サポート 未サポート
full-width 未サポート ? 19 (19) 未サポート 未サポート 未サポート
ßSS ? ? 1.0 (1.7 or earlier) ? ? ?
iİıI 未サポート ? 14 (14) ? ? 未サポート
オランダ語の二重音字 IJ 未サポート ? 14 (14) 未サポート 未サポート 未サポート
ギリシャ語のアクセント記号付き文字 30 ? 15 (15) 未サポート 未サポート 未サポート
Σσ または単語の末尾で ς 30 ? 14 (14) 未サポート 未サポート 6.0
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0[1] (有) 1.0 (1) 6.0 6.0[2 1.0[3]
capitalize (CSS3 版) ?[4] ? 14.0 (14)[4] ?[4] ?[4] ?[4]
full-size-kana 未サポート ? 未サポート 未サポート 未サポート 未サポート
full-width 未サポート ? 19.0 (19) 未サポート 未サポート 未サポート
ßSS ? ? 1.0 (1) ? ? ?
iİıI 未サポート ? 14.0 (14) ? ? 未サポート
オランダ語の二重音字 IJ 未サポート ? 14.0 (14) 未サポート 未サポート 未サポート
ギリシャ語のアクセント記号付き文字 未サポート ? 未サポート 未サポート 未サポート 未サポート
Σσ または単語の末尾で ς 未サポート ? 14.0 (14) 未サポート 未サポート 未サポート

[1] text-transform プロパティは、::first-line 疑似要素 (以前のコロンが1個である構文を含む) に対して機能しません。Chromium bug 129669 をご覧ください。

[2] Opera 15.0 より (Blink に切り替えたため) text-transform プロパティは ::first-line 疑似要素 (以前のコロンが1個である構文を含む) に対して機能しません。Chromium bug 129669 をご覧ください。

[3] text-transform プロパティは、::first-line 疑似要素 (以前のコロンが1個である構文を含む) に対して機能しません。WebKit bug 3409 をご覧ください。

[4] capitalize キーワードは、CSS 1 および CSS 2.1 で仕様があいまいでした。ブラウザーによって、最初の文字を決める方法が異なっていました (Firefox は - や _ を文字として扱いましたが、ほかのブラウザーは異なりました。Webkit や Gecko はどちらも、 のような文字を基にした記号を、誤って実際の文字として扱っていました。Internet Explorer 9 は CSS 2 の定義にもっとも近かったのですが、いくつか奇妙な動作もありました)。CSS Text Level 3 では正しい動作を厳密に定義して、これらの混乱を解消しました。ブラウザー実装状況の capitalize の行は、さまざまなエンジンがこの厳密に定義された動作をサポートし始めたバージョンを記載しています。

関連情報

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

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