text-transform
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
text-transform
は CSS のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。
試してみましょう
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: uppercase
はar aon tslí
を、予想されるAR AON TSLÍ
ではなくAR AON tSLÍ
にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、an t-uisce
はAN 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: math-auto;
/* グローバル値 */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;
capitalize
-
それぞれの単語の最初の文字を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です。単語の先頭にある句読点や記号は無視されます。
メモ:
capitalize
が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。メモ:
capitalize
キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました(Firefox は-
および_
を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko はⓐ
のような文字から作られた記号を、誤って文字として認識していました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表のcapitalize
の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。 uppercase
-
すべての文字を大文字に変換させるキーワードです。
lowercase
-
すべての文字を小文字に変換させるキーワードです。
none
-
すべての文字を変換させないキーワードです。
full-width
-
一般的な東アジアの文字(中国語や日本語など)において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に(全角で)表記して、揃えて表示するキーワードです。
full-size-kana
-
このキーワードは一般に
<ruby>
によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。 math-auto
-
数学のイタリック体でテキストを適切に自動的にレンダリングするために使用されます。 これは、ラテン文字やギリシャ文字、他にもいくつか数学関連の記号を、イタリック体の数学記号に変換しますが、適用されるのは、1 文字を含むテキストノードの場合のみです。 例えば、"x" は "𝑥" (U+1D465) になりますが、"exp" は "exp" のままです。 主に、MathML の
<mi>
要素の動作を指定するために使用されます。通常は、正しいスタイル設定が自動的に適用される MathML マークアップを使用しましょう。
アクセシビリティ
テキストの長い区間に text-transform
の値を uppercase
で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。
公式定義
初期値 | none |
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
"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 lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</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;
}
ギリシャ文字のシグマ (Σ
) が、状況に応じて一般的な小文字のシグマ (σ
) または単語の末尾での表記 (ς
) に変換される例です。
"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́
が小文字に変換されるとドットを保持する様子を示します。
"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-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 つのコードポイントにまとめます。
"full-size-kana" の使用例
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
p:nth-of-type(2) {
text-transform: full-size-kana;
}
"math-auto" の使用例
例えば、純粋な HTML マークアップを使用して数式を作成します。
<div>
(<span class="math-id">sin</span> <span class="math-id">x</span>)<sup
>2</sup
>
+ (<span class="math-id">cos</span> <span class="math-id">x</span>)<sup
>2</sup
>
= 1
</div>
すべての .math-id
要素に text-transform: math-auto
を指定しています。しかし、x
の文字だけがイタリック体になり、sin
や cos
は変化しないことに注目してください。
.math-id {
text-transform: math-auto;
}
ただし、数式には MathML を使用することをお勧めします。これは、数式コンテンツをより堅牢でアクセシビリティの高い方法で表します。以下は、同じ数式を MathML を使用して記述したものです。
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<semantics>
<mrow>
<mo stretchy="false">(</mo>
<mo lspace="0em" rspace="0em">sin</mo>
<mspace width="0.16666666666666666em"></mspace>
<mi>x</mi>
<msup>
<mo stretchy="false">)</mo>
<mn>2</mn>
</msup>
<mo>+</mo>
<mo stretchy="false">(</mo>
<mo lspace="0em" rspace="0em">cos</mo>
<mspace width="0.16666666666666666em"></mspace>
<mi>x</mi>
<msup>
<mo stretchy="false">)</mo>
<mn>2</mn>
</msup>
<mo>=</mo>
<mn>1</mn>
</mrow>
<annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
</semantics>
</math>
仕様書
Specification |
---|
CSS Text Module Level 4 # text-transform |
ブラウザーの互換性
BCD tables only load in the browser