このページでは、文字の表示について、初心者編よりもさらに詳しく見ていきたいと思います。
以前に説明したfontタグ
(参照)と、DHTMLに欠かせないスタイルシートを使った場合を実際にやってみましょう。
fontタグで表示される文字の大きさは7段階です。
そして、色と文字の種類(フォント名)が指定できます。
<font size="1" color="blue" face="MS UI Gothic">あ</font>
あ
<font size="2" color="blue" face="MS UI Gothic">あ</font>
あ
<font size="3" color="blue" face="MS UI Gothic">あ</font>
あ
<font size="4" color="blue" face="MS UI Gothic">あ</font>
あ
<font size="5" color="blue" face="MS UI Gothic">あ</font>
あ
<font size="6" color="blue" face="MS UI Gothic">あ</font>
あ
<font size="7" color="blue" face="MS UI Gothic">あ</font>
あ
実際の文字の大きさは、あなたのIEの設定によって変わります。
IEの「表示」→「文字のサイズ」で、大きさを変えてみてください。
さて、これには一長一短ありますね。もし、あなたの作ったページの文字が小さくて読みにくいと思ったら、見ている人が文字の大きさを変えることが出来ます。でも、そうなるとレイアウトは崩れます。
◆
では、次にスタイルシートを使った場合です。
fontタグに相当するものは
<span style=""></span>で書き表すことが出来ます。
そして、
style="この中にフォント名、大きさ、色などその他様々"を、指定します。
| フォント名 | font-family:'フォント名'; |
| 文字の大きさ | font-size:数字pt;(単位はいろいろある) |
| 文字の色 | color:カラーネームまたはRGBコード; |
スタイルシートの場合、フォント名、色はfontタグと同じものを書きます。(フォント名に空白が含まれる場合は’’で囲みます。)
大きさは、フォントタグと違って、0から(見えない)、大きな数字までを指定できます。ただしあまり大きすぎると正常には表示されない。
そして、単位も、pt(ポイント)、px(ピクセル)、in(インチ・・2.54p)、cm(センチメートル)、mm(ミリメートル)、pc(パイカ・・0.43センチメートル)他・・いろいろありますが、文字の場合はptかpxをよく使うと思います。(私だけかな?)
サンプルを書いておきますので、・・
<span style="font-family:'MS UI Gothic';font-size:20pt;color:blue">あ</span>
あ
<span style="font-family:'MS UI Gothic';font-size:20px;color:blue">あ</span>
あ
<span style="font-family:'MS UI Gothic';font-size:2in;color:blue">あ</span>
あ
<span style="font-family:'MS UI Gothic';font-size:2cm;color:blue">あ</span>
あ
<span style="font-family:'MS UI Gothic';font-size:20mm;color:blue">あ</span>
あ
<span style="font-family:'MS UI Gothic';font-size:20pc;color:blue">あ</span>
あ