CSS3 Pre-Reference



text-transform

大文字・小文字

試す







コード

#containe {
    text-transform: none;
}

サンプル

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

コメントする


対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
すべて

パラメータ

none | capitalize | uppercase | lowercase | fullwidth | large-kana
初期値 none
適用 すべての要素
継承 する
レベル 1-
%の解釈 -
適用メディア Vidual
参考文献 CSS Text Level 3#3.1. Transforming Text: the ‘text-transform’ property

解説

テキストの大文字・小文字を指定します。それぞれのキーワードの意味は以下の通り。CSS3で2つのCJK系の値が追加されています。

capitalize
各単語の1文字目を大文字化します。
He's The Leader Of A Buntch. You Know Him Well.
uppercase
全文字を大文字化します。
HE'S THE LEADER OF A BUNTCH. YOU KNOW HIM WELL.
lowercase
全文字を小文字化します。
he's the leader of a buntch. you know him well.
none
効果無し。
He's the leader of a buntch. You know him well.
fullwidth
全文字を全角にします。英文フォントには全角文字は含まれないので、注意が必要です。
he’s the leader of a buntch. you know him well.
large-kana
小さな仮名文字も一般サイズの大きな仮名文字で表示します。この値はルビテキストのみに適用されます。

何故このようなプロパティが存在するのかと言うと、装飾と、もう一つ、スクリーンリーダに対する配慮の意味があります。スクリーンリーダだと、すべて大文字で書かれた英語は、一文字ずつ読んでしまう場合があります。例えば、BORDER と書くと、「ビーオーアールディーイーアール」と読んでしまう場合があります。また、すべて大文字にした場合に英語圏ではシャウトと言って怒りや大声を表す表現となり、英語圏のスクリーンリーダーだと大声や怒号で読まれる場合があります。装飾で大文字にする場合、そのように読まれることは望ましくないので、装飾としてこのプロパティで制御します。

CSS3で追加された値は、他の値との組み合わせが可能のはずですが、今のところ併記できません。どのみち対応ブラウザもありませんが。

トラックバック

投稿されたコメント