スタイルシート属性 text-transform は、アルファベットの大文字／小文字変換を指定します。
text-transform: transform| 値 | 意味 |
|---|---|
| none | 変換しない（規定値） |
| uppercase | すべて大文字に変換 |
| lowercase | すべて小文字に変換 |
| capitalize | 各単語の先頭の文字を大文字に、それ以外を小文字に変換 |
| full-width | 組版文字ユニットを全角で配置する |
| full-size-kana | 拗促音を使用しない |
none
テキストに対して指定できる。
継承する
文字を変換しない。
CSS の text-transform プロパティを使用した HTML の例を次に示す。
<p style="text-transform: none;">
The quick brown fox jumps over the lazy dog.
</p>上記 HTML の表示サンプルを次に示す。表示結果はウェブ・ブラウザによって異なることがある。
The quick brown fox jumps over the lazy dog.
全ての文字を小文字に変換する。
<p style="text-transform: lowercase;">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
英語で本や映画のタイトルを記述するときに、全てを大文字で記載することもある。ただし、capitalize に比べるとマイナーなやり方である。
<p style="text-transform: uppercase;">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
HTML文書の場合、h1 などの見出しを全て大文字にすることがある。
h1, h2 {
text-transform: uppercase;
}英語で本や映画のタイトルを記述するときには、各単語の先頭の文字を大文字、それ以外を小文字にする規則がある。 本当は冠詞や前置詞は先頭の文字を大文字にしないのであるが、CSS の text-transform はそこまでサポートしていない。 きちんと記載したい場合は、text-transform に頼らず、規則通りに記述すべきである。
<p style="text-transform: capitalize;">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
HTML文書の場合、h1 などの見出しをキャピタライズすることがある。
h1, h2 {
text-transform: capitalize;
}すべての組版文字ユニットを全角で配置する。対応する全角の文字がない場合は、そのままにする。この値は、通常、ラテン文字と数字を表意文字のように組版するために使用される。
現在のところ、Firefoxしかサポートしていない。
abbr:lang(ja) {
text-transform: full-width;
}日本語のルビには拗促音は使用しない慣習があり、特許には「とっきょ」ではなく「とつきよ」とルビが振られる。これを実現するのが full-size-kana である。
すべての小さなカナ文字を、同等のフルサイズカナ文字に変換する。この値は通常、ルビの注釈テキストに使われる。ルビで一般的に使われる小さなフォントサイズでは読みにくくなってしまうため、小さなカナはすべて大きなカナで描かれるようにしたい場合に使用する。
現在のところ、Firefoxしかサポートしていない。
CSSには次のプロパティがある。
World Wide Web Consortium (2021) CSS Text Module Level 3
株式会社平プロモート (2016) ルビにもルールがある ～文字組版の基本（後半）～