0

英単語の頭文字もしくはすべてを大文字に自動変換する「text-transformプロパティ」

英単語の頭文字もしくはすべてを大文字に自動変換する「text-transformプロパティ」

Webサイトの見出しタイトルなどで、英単語を利用する際に「小文字」「大文字」の指定をCSSの「taxt-transform」プロパティを使うことで指定ができるようになります。また、すべて大文字でそのまま記述した場合には、音声ブラウザの場合には英単語と認識されず略語と理解され、アルファベットが1文字ずつ読み上げられてしまいます。

例えば「JAPAN」と直接コード上に記入すると「J(ジェイ)」「A(エー)」「P(ピー)」「A(エー)」「N(エヌ)」と読み上げられてしまい、よくわからなくなってしまいます。ですので、コード上は「すべて小文字」または「頭文字だけ大文字」で記述しておき、CSSを利用して大文字に変換する手法を使いましょう。

 

DEMO

 

 

【使い方】

サンプルのテキストとして「webdesign notebook」というテキストを用意します。

HTMLを記述

 

CSSを記述
  • 頭文字だけ大文字にしたい場合、text-transformプロパティの値を「capitalize」にします。
  • すべて大文字にしたい場合、text-transformプロパティの値を「uppercase」にします。

 

すると「DEMO」のように頭文字のみもしくは全体を大文字にして表示することが可能となります。

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 英単語の頭文字もしくはすべてを大文字に自動変換する「text-transformプロパティ」