4-13-9a 大文字と小文字
書かれた文章の大文字化と小文字化を設定する方法です。text-transformプロパティを利用致します。(下記の見本では「body」部を全て一括で指定しております)。文字の大きさを変更されたい方は、こちら をご覧下さいませ。
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
text-transform: capitalize; /* 一文字目を大文字にする */
}
-->
</style>
- text-transform: none ;
- 特に何も致しません(指定した記述通りに表示致します)。これが初期値です。
- text-transform: capitalize ;
- 単語の一文字目を大文字で表示致します。
- text-transform: lowercase ;
- 全ての文字を小文字に致します。
- text-transform: uppercase ;
- 全ての文字を大文字に致します。
[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
4-13-9b 具体的な見本
CSS
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
.sample-1d { text-transform: none ; }
.sample-2d { text-transform: capitalize ; }
.sample-3d { text-transform: lowercase ; }
.sample-4d { text-transform: uppercase ; }
-->
</style>
<!--
.sample-1d { text-transform: none ; }
.sample-2d { text-transform: capitalize ; }
.sample-3d { text-transform: lowercase ; }
.sample-4d { text-transform: uppercase ; }
-->
</style>
HTML
<body> ~ </body> 内に記述して下さい。
<p class="sample-1d">It's always darkest before the dawn.(書いた文章がそのまま表示される)</p>
<p class="sample-2d">It's always darkest before the dawn.(単語の先頭のみが大文字に)</p>
<p class="sample-3d">It's always darkest before the dawn.(全て小文字に)</p>
<p class="sample-4d">It's always darkest before the dawn.(全て大文字に)</p>
<p class="sample-2d">It's always darkest before the dawn.(単語の先頭のみが大文字に)</p>
<p class="sample-3d">It's always darkest before the dawn.(全て小文字に)</p>
<p class="sample-4d">It's always darkest before the dawn.(全て大文字に)</p>
表示結果
It's always darkest before the dawn.(書いた文章がそのまま表示される)
It's always darkest before the dawn.(単語の先頭のみが大文字に)
It's always darkest before the dawn.(全て小文字に)
It's always darkest before the dawn.(全て大文字に)
ちなみに上の英語のことわざは「夜明け前が一番暗い」という意味のものです。
その他、特定のセレクタ(例:「body」、「p」等)に複数のプロパティ(「color」、「font-size」等)を設定する見本は 『4-9 見出しを修飾する』 をご覧下さい。
[ 関連事項 : HP-TIPS > HPの作り方 > 用語集 > セレクタ ]
[ 関連事項 : HP-TIPS > HPの作り方 > 用語集 > プロパティ ]