ホーム | CSSプロパティ・目次

●アルファベットを大文字、小文字表記にする

 text-transformは、単語の先頭を大文字表記にしたり小文字の単語を大文字にしたり大文字の単語を小文字表記にしたりするプロパティです。ただし、大文字・小文字表記のある単語に限られていますから必然的にアルファベットに限られると思います。従って、大文字小文字の区別のない日本語は不可となります。一応、ひらがなには、「あいうえお」、「ぁぃぅぇぉ」というように、大文字・小文字がありますので確認したのですがこのプロパティ指定による変化は確認できませんでした。

 指定できる値は、capitalize、uppercase、lowercaseですがnone(要素内容そのまま、変化なし)の値も指定できます。すべての要素に適用でき、値は子要素へ継承します。

【サンプル1】

merry christmas.
happy new year.
abc

【サンプル2】

merry christmas.
happy new year.
abc

【サンプル3】

MERRY CHRISTMAS.
HAPPY NEW YEAR.
ABC

【CSS】

.sample1 {
 text-transform: capitalize;
}
.sample2 {
 text-transform: uppercase;
}
.sample3 {
 text-transform: lowercase;
}

【HTML】

<p>【サンプル1】</p>
<p class="sample1">
merry christmas.<br />
happy new year.<br />
abc</p>
<p>【サンプル2】</p>
<p class="sample2">
merry christmas.<br />
happy new year.<br />
abc</p>
<p>【サンプル3】</p>
<p class="sample3">
MERRY CHRISTMAS.<br />
HAPPY NEW YEAR.<br />
ABC</p> 

 “capitalize”の値は、アルファベットの大文字・小文字にかかわらず、先頭の文字を大文字表記に変換し、二文字目以降は要素内容に記述した通りに表示します。“uppercase”の値は、要素内容に記述されたアルファベットすべてを大文字表記にし、“lowercase”の値は、要素内容に記述されたアルファベットすべてを小文字表記に統一します。

全体の目次 | テキスト・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.