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 > 外部スタイルシートの記述方法 ]

pagetop

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>

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>

表示結果

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の作り方 > 用語集 > プロパティ ]

pagetop