文字の大きさを変える

{font-size:値;}で文字（テキスト）の大きさを変えることが出来ます。

■ 値の種類

値の種類にはpx、pt、em、%などがあります。他にも以下のような種類があります。

値	説明
xx-small	最小
x-small	小さい
small	やや小さい
medium	標準サイズ
large	やや大きい
x-large	大きい
xx-large	最大

【ブラウザ表示】

10px
10pt
5em

xx-small

x-small

small

medium

large

x-large

xx-large

ソース

<span class="smaple1">10px</span>
<span class="smaple2">10pt</span>
<span class="smaple3">5em</span>
<div class="sample4">xx-small</div>
<div class="sample5">x-small</div>
<div class="sample6">small</div>
<div class="sample7">medium</div>
<p class="sample8">large</p>
<p class="sample9">x-large</p>
<p class="sample10">xx-large</p>

外部ファイル

span.sample1{font-size:10px;}
span.sample2{font-size:10pt;}
span.sample3{font-size:5em;}
div.sample4{font-size:xx-small;}
div.sample5{font-size:x-small;}
div.sample6{font-size:small;}
div.sample7{font-size:medium;}
p.sample8{font-size:large;}
p.sample9{font-size:x-large;}
p.sample10{font-size:xx-large;}

<body>～</body>に直接記入する場合

<span style="font-size:10px;">10px</span>
<span style="font-size:10pt;">10pt</span>
<span style="font-size:5em;">5em</span>
<div style="font-size:xx-small;">xx-small</div>
<div style="font-size:x-small;">x-small</div>
<div style="font-size:small;">small</div>
<div style="font-size:medium;">medium</div>
<p style="font-size:large;">large</p>
<p style="font-size:large;">x-large</p>
<p style="font-size:large;">xx-large</p>

Follow @hp_master_2003

■ その他の項目

・文字の色を変える
・文字の太さを指定する
・文字の書体を指定する
・文字を斜めにする
・小文字英字を大文字で表示
・文字の表示位置を指定する
・字下げをする
・行間を指定する
・文字、単語の間隔を空ける
・文字に線を引く
・小文字と大文字を入れ換える
・上付き文字と下付き文字

スタイルシート一覧のページに戻る