ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テキスト

文字の大きさを変える

{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>

■ その他の項目

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

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

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.