文字の大きさを変更する
HTMLを使用した記述方法
記述方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> </head> <body> <p><font size="7">ここはサイズ7で表示</font></p> <p><font size="6">ここはサイズ6で表示</font></p> <p><font size="5">ここはサイズ5で表示</font></p> <p><font size="4">ここはサイズ4で表示</font></p> <p><font size="3">ここはサイズ3で表示</font></p> <p><font size="2">ここはサイズ2で表示</font></p> <p><font size="1">ここはサイズ1で表示</font></p> </body> </html>
表示サンプル
ここはサイズ7で表示
ここはサイズ6で表示
ここはサイズ5で表示
ここはサイズ4で表示
ここはサイズ3で表示
ここはサイズ2で表示
ここはサイズ1で表示
解説
文字のサイズを変えたい部分を「<font size="1〜7の整数">
」と「</font>
」で囲みます。見ての通り、数字が大きいほど文字のサイズも大きく、数字が小さいほど文字のサイズも小さくなります。特に文字サイズを指定しなければ「size= "3"
」が適用されるようです。また、
のように、現在の大きさからどのくらいの文字を表示するかを指定することもできます。「size="+2"
」と指定しますと、現在の大きさから2段階大きいサイズで表示され、「size="-1"
」と指定しますと、現在の大きさから1段階小さいサイズで文字が表示されます。ただし、プラスマイナスにより指定できる範囲も「1〜7」ですので注意が必要です。より大きな文字、より小さな文字、3と4の間くらいの文字などを指定したい場合は、以下で紹介しています「CSSを使用した記述方法」にてサイズを指定して下さい。
CSSを使用した記述方法
記述方法
<!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">サイズA</p> <p class="sizeB">サイズB</p> </body> </html>
表示サンプル
サイズA
サイズB
解説
ヘッダ内の記述にて、「P」タグの「sizeA」と「sizeB」(名前は自由に付けてください)と言う名前のものに関しての表示方法を指定しています。それぞれ個別に、
のように記述をすることも出来ます。文字の大きさを指定する際の単位は「長さの単位」を参考にして下さい。