トップページ  > CSS  > text-transform

★CSSリファレンス

text-transform・・・大文字・小文字・全角文字への変換を指定する
Internet Explorer Google Chrome Safari Firefox Opera
広告

text-transformプロパティは、大文字・小文字・全角文字への変換を指定する際に使用します。

capitalizeキーワードを指定すると、単語の先頭文字だけを大文字に変換することもできます。

full-widthキーワードは、CSS3から新しく追加された仕様なので、まだブラウザのサポートが進んでいないかもしれません。

■値

none
テキストを変換しない(初期値)
capitalize
単語の先頭文字を大文字にする
uppercase
全ての文字を大文字にする
lowercase
全ての文字を小文字にする
full-width
全ての文字を全角形式にする。対応する全角形式が無い場合にはそのまま表示

■初期値・適用対象・値の継承

初期値
none
適用対象
すべての要素
値の継承
する

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

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ソース

<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)

■関連項目

text-align …… 行揃えの位置・均等割付を指定する
text-justify …… 均等割付の形式を指定する(IEが独自に採用)
vertical-align …… 縦方向の揃え位置を指定する
text-decoration …… テキストの下線・上線・打ち消し線・点滅を指定する
text-underline-position・・下線の表示位置を指定する(IE独自の仕様)
text-indent …… 一行目のインデント幅を指定する
text-transform …… テキストの大文字表示・小文字表示を指定する
white-space …… ソース中のスペース・タブ・改行の表示の仕方を指定する
letter-spacing …… 文字の間隔を指定する
word-spacing …… 単語の間隔を指定する
text-autospace …… アルファベット等との間隔を指定する(IEが独自に採用)
line-break …… 禁則処理のしかたを指定する(IEが独自に採用)
word-break …… 文の改行の仕方について指定する(IEが独自に採用)
word-wrap …… 単語の途中で改行するかどうかを指定する(IE独自の仕様)
text-shadow …… テキストに影をつける
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ