文字の大きさを変更する

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p><font size="7">ここはサイズ７で表示</font></p>
<p><font size="6">ここはサイズ６で表示</font></p>
<p><font size="5">ここはサイズ５で表示</font></p>
<p><font size="4">ここはサイズ４で表示</font></p>
<p><font size="3">ここはサイズ３で表示</font></p>
<p><font size="2">ここはサイズ２で表示</font></p>
<p><font size="1">ここはサイズ１で表示</font></p>
</body>
</html>

表示サンプル

ここはサイズ７で表示

ここはサイズ６で表示

ここはサイズ５で表示

ここはサイズ４で表示

ここはサイズ３で表示

ここはサイズ２で表示

ここはサイズ１で表示

解説

文字のサイズを変えたい部分を「」と「」で囲みます。見ての通り、数字が大きいほど文字のサイズも大きく、数字が小さいほど文字のサイズも小さくなります。特に文字サイズを指定しなければ「size= "3"」が適用されるようです。また、

サイズ＋２

サイズ－１

のように、現在の大きさからどのくらいの文字を表示するかを指定することもできます。「size="+2"」と指定しますと、現在の大きさから２段階大きいサイズで表示され、「size="-1"」と指定しますと、現在の大きさから１段階小さいサイズで文字が表示されます。ただし、プラスマイナスにより指定できる範囲も「１～７」ですので注意が必要です。より大きな文字、より小さな文字、３と４の間くらいの文字などを指定したい場合は、以下で紹介しています「ＣＳＳを使用した記述方法」にてサイズを指定して下さい。

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
p.sizeA { font-size: 24px; }
p.sizeB { font-size: 120%; }
-->
</style>
</head>
<body>
<p class="sizeA">サイズＡ</p>
<p class="sizeB">サイズＢ</p>
</body>
</html>

表示サンプル

サイズＡ

サイズＢ

解説

ヘッダ内の記述にて、「P」タグの「sizeA」と「sizeB」（名前は自由に付けてください）と言う名前のものに関しての表示方法を指定しています。それぞれ個別に、

ここの文字サイズが変更されます

のように記述をすることも出来ます。文字の大きさを指定する際の単位は「長さの単位」を参考にして下さい。