text-transform・・・大文字・小文字・全角文字への変換を指定する
広告
text-transformプロパティは、大文字・小文字・全角文字への変換を指定する際に使用します。
capitalizeキーワードを指定すると、単語の先頭文字だけを大文字に変換することもできます。
full-widthキーワードは、CSS3から新しく追加された仕様なので、まだブラウザのサポートが進んでいないかもしれません。
- none
- テキストを変換しない(初期値)
- capitalize
- 単語の先頭文字を大文字にする
- uppercase
- 全ての文字を大文字にする
- lowercase
- 全ての文字を小文字にする
- full-width
- 全ての文字を全角形式にする。対応する全角形式が無い場合にはそのまま表示
- 初期値
- none
- 適用対象
- すべての要素
- 値の継承
- する
p.sample1 {text-transform: none;}
p.sample2 {text-transform: capitalize;}
p.sample3 {text-transform: uppercase;}
p.sample4 {text-transform: lowercase;}
p.sample5 {text-transform: full-width;}
<html>
<head>
<link rel="stylesheet" href="sample.css"
type="text/css">
</head>
<body>
<p class="sample1">Garota de Ipanema(the girl from ipanema)</p>
<p class="sample2">Garota de Ipanema(the girl from ipanema)</p>
<p class="sample3">Garota de Ipanema(the girl from ipanema)</p>
<p class="sample4">Garota de Ipanema(the girl from ipanema)</p>
<p class="sample5">Garota de Ipanema(the girl from ipanema)</p>
</body>
</html>
↓↓↓
Garota de Ipanema(the girl from ipanema)
Garota de Ipanema(the girl from ipanema)
Garota de Ipanema(the girl from ipanema)
Garota de Ipanema(the girl from ipanema)
Garota de Ipanema(the girl from ipanema)
広告