text-transform：テキストの大文字表示・小文字表示を指定する
| 適用対象 | 全ての要素 |
| 継承 | する |
text-transformプロパティは、英語テキストの大文字表示、小文字表示を指定する際に使用します。 単語の先頭文字だけを大文字で表示することもできます。
text-transformに与えられる値
- text-transform: none;
- 記述した通りに表示します。これが初期値です。
- text-transform: capitalize;
- 単語の先頭文字を大文字で表示します。
- text-transform: lowercase;
- 全てを小文字で表示します。
- text-transform: uppercase;
- 全てを大文字で表示します。
text-transformの使用サンプル
CSS
.text_sample01 {
text-transform: none;
border: 1px solid #666666;
padding: 5px;
margin-bottom: 10px;
}
.text_sample02 {
text-transform: capitalize;
border: 1px solid #666666;
padding: 5px;
margin-bottom: 10px;
}
.text_sample03 {
text-transform: lowercase;
border: 1px solid #666666;
padding: 5px;
margin-bottom: 10px;
}
.text_sample04 {
text-transform: uppercase;
border: 1px solid #666666;
padding: 5px;
}
XHTML
<div class="text_sample01">
AaBbCcDdEeFfGg<br />
text_sample01<br />
[text-transform: none;]<br />
</div>
<div class="text_sample02">
AaBbCcDdEeFfGg<br />
text_sample02<br />
[text-transform: capitalize;]<br />
</div>
<div class="text_sample03">
AaBbCcDdEeFfGg<br />
text_sample03<br />
[text-transform: lowercase;]<br />
</div>
<div class="text_sample04">
AaBbCcDdEeFfGg<br />
text_sample04<br />
[text-transform: uppercase;]<br />
</div>
表示確認
AaBbCcDdEeFfGg
text_sample01
[text-transform: none;]
text_sample01
[text-transform: none;]
AaBbCcDdEeFfGg
text_sample02
[text-transform: capitalize;]
text_sample02
[text-transform: capitalize;]
AaBbCcDdEeFfGg
text_sample03
[text-transform: lowercase;]
text_sample03
[text-transform: lowercase;]
AaBbCcDdEeFfGg
text_sample04
[text-transform: uppercase;]
text_sample04
[text-transform: uppercase;]
text-transformに関連するCSSプロパティ
| テキスト関連 | |
|---|---|
| text-align | 内包する要素に対して横位置の揃え方を指定する |
| text-align-last | 内包する要素の最終行に対して横位置の揃え方を指定する |
| text-autospace | アルファベット等との間隔を指定 |
| text-decoration | 文字に装飾線を加える |
| text-decoration-color | 文字の装飾線の色を指定する |
| text-decoration-line | 文字の装飾線の種類を指定する |
| text-decoration-skip | 文字の装飾線について除外する対象を指定する |
| text-decoration-style | 文字の装飾線の種類を指定する |
| text-emphasis | 要素内のテキストに付与する強調マークに関する指定を行う |
| text-emphasis-color | 要素内のテキストに付与する強調マークの色を指定する |
| text-emphasis-position | 要素内のテキストに付与する強調マークの位置を指定する |
| text-emphasis-style | 要素内のテキストに強調マークを付与する |
| text-indent | 文章のインデント幅を指定する |
| text-justify | 行の両端揃えの方法を指定する |
| text-orientation | 縦書き文章の文字の表示方向に関して指定する |
| text-overflow | 要素からはみ出した文字を省略する |
| text-shadow | 文字に影（ドロップシャドウ）を付ける |
| text-transform | テキストの大文字表示・小文字表示を指定する |
| text-underline-position | テキストのアンダーラインの位置を指定する |