スタイルシートでフォントサイズを指定する
フォントタグでサイズを指定した場合、<font size="3" color="#0099FF">文字</font> 等のタグの場合には、ブラウザで文字のサイズをかえると文字の大きさが変化します。
しかしこのサイトではそうならないように、スタイルシートでフォントサイズを指定しているので、文字の大きさが変化しません。
スタイルシートの使い方は色々とあると思いますが、このサイトで使用している例をご紹介します。
まずは文字ごとに指定する場合です。
普通のフォントタグ <font size="3" color="#0099FF">文字</font> を、スタイルシートでサイズ指定すると下のようになります。
<font style="font-size:16px" color="#0099FF">文字</font>
普通のフォントタグで size="3" と記述していた部分を style="font-size:16px" にしました。文字の大きさは style="font-size:16px" の 16 を、色は color="#0099FF" の #0099FF で指定します。
また、下のように記述する場合もあります。
<font style="font-size:16px; color:#0099FF">文字</font>
これらは状況に応じて使い分けていただくといいと思います。
文字ごとに指定するのではなく、ページ全体の文字に対して指定をする事もできます。
このページにも使用していますが、いちばん多く使っている文字のサイズや色をHEAD区間に指定しておくと、あとはそのサイズや色以外の文字に対してタグで指定をするだけでOKになります。
下のソースをHTMLソースのHEAD区間に貼り付けます。
<STYLE TYPE="text/css">
<!--
body,tr,td {font-size:16px; color:#0099FF}
}
-->
</STYLE>
HEAD区間にこのソースが記述されているので、このページの文字にはすべてこのソースが適用されています。この説明文などもここで指定したサイズと色になっています。
HEAD区間に指定した文字の大きさや色以外の文字・・・例えばこのページ最上部の「スタイルシートでフォントサイズを指定する」の文字は、サイズを大きくして太字にしています。この場合のソースは下のようになっています。
<font style="font-size:18px"><b>スタイルシートでフォントサイズを指定する</b></font>
文字の色はHEAD区間に指定した色のままなので、文字の大きさと太字にする指定をタグで行なっています。文字の大きさは 18px にして、太字にするため <b> タグを使いました。
説明文の中には赤い色の文字もあります。この場合はHEAD区間に指定した大きさのままで、色のみをかえていますので、<font color="#FF0000">赤い色</font> とすればOKです。
ここではこのサイトに使っている例をご紹介しましたが、他にも様々な記述方法があります。
さらに詳しく知りたい方は、以下のサイトをご覧になる事をおすすめします。
とほほのWWW入門
かなり詳しく記載されておられるので、参考になると思いますよ。
5・6年生にもわかるやさしいJavaScriptのTOPへ