スタイルシートで文字の大きさを指定する

スタイルシートで文字の大きさを指定する表示例

文字(フォント)の大きさは<font>タグでも指定できますが、スタイルシート(CSS)で指定することが推奨されています。

文字(フォント)サイズの指定方法

スタイルシートで文字の大きさを指定する

xx-small ~ xx-large
「xx-small」、「x-small」、「small」、「medium」、「large」、「x-large」、「xx-large」の7段階の絶対サイズで指定します。実際の表示はブラウザの環境によります。
larger、smaller
親要素の文字サイズに対する相対的なサイズの指定方法です。
数値+単位
「%」、「em」、「px」、「pt」などの単位を使用したサイズの指定です。単位は親要素のフォントサイズに対する割合で表される「em」、「%」を使うことが好まれます。

HTML/XHTML

<p>これが標準のフォントサイズ<br />
<span class="font1">このフォントサイズは「xx-small」です。</span><br />
<span class="font2">このフォントサイズは「x-small」です。</span><br />
<span class="font3">このフォントサイズは「small」です。</span><br />
<span class="font4">このフォントサイズは「medium」です。</span><br />
<span class="font5">このフォントサイズは「large」です。</span><br />
<span class="font6">このフォントサイズは「x-large」です。</span><br />
<span class="font7">このフォントサイズは「xx-large」です。</span><br />
<span class="font8">このフォントサイズは「larger」です。</span><br />
<span class="font9">このフォントサイズは「smaller」です。</span><br />
<span class="font10">このフォントサイズは「20px」です。</span><br />
<span class="font11">このフォントサイズは「10px」です。</span><br />
<span class="font12">このフォントサイズは「20pt」です。</span><br />
<span class="font13">このフォントサイズは「10pt」です。</span><br />
<span class="font14">このフォントサイズは「2em」です。</span><br />
<span class="font15">このフォントサイズは「0.7em」です。</span><br />
<span class="font16">このフォントサイズは「150%」です。</span><br />
<span class="font17">このフォントサイズは「80%」です。</span></p>

CSS>

<style type="text/css">
<!--
.font1 { font-size: xx-small; }
.font2 { font-size: x-small; }
.font3 { font-size: small; }
.font4 { font-size: medium; }
.font5 { font-size: large; }
.font6 { font-size: x-large; }
.font7 { font-size: xx-large; }
.font8 { font-size: larger; }
.font9 { font-size: smaller; }
.font10 { font-size: 20px; }
.font11 { font-size: 10px; }
.font12 { font-size: 20pt; }
.font13 { font-size: 10pt; }
.font14 { font-size: 2em; }
.font15 { font-size: 0.7em; }
.font16 { font-size: 150%; }
.font17 { font-size: 80%; }
-->
</style>

スタイルシートで文字の大きさを指定する表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録