Webサイトの見出しタイトルなどで、英単語を利用する際に「小文字」「大文字」の指定をCSSの「taxt-transform」プロパティを使うことで指定ができるようになります。また、すべて大文字でそのまま記述した場合には、音声ブラウザの場合には英単語と認識されず略語と理解され、アルファベットが1文字ずつ読み上げられてしまいます。
例えば「JAPAN」と直接コード上に記入すると「J(ジェイ)」「A(エー)」「P(ピー)」「A（エー）」「N（エヌ）」と読み上げられてしまい、よくわからなくなってしまいます。ですので、コード上は「すべて小文字」または「頭文字だけ大文字」で記述しておき、CSSを利用して大文字に変換する手法を使いましょう。
【使い方】
サンプルのテキストとして「webdesign notebook」というテキストを用意します。
HTMLを記述
|
1 2 |
<p class="type-a">webdesign notebook</p> <p class="type-b">webdesign notebook</p> |
CSSを記述
- 頭文字だけ大文字にしたい場合、text-transformプロパティの値を「capitalize」にします。
- すべて大文字にしたい場合、text-transformプロパティの値を「uppercase」にします。
|
1 2 |
p.type-a {text-transform: capitalize;} p.type-b {text-transform: uppercase;} |
すると「DEMO」のように頭文字のみもしくは全体を大文字にして表示することが可能となります。