HP作成講座、脱初心者編
文字の表示。スタイルシートとFONTタグ
このページでは、文字の表示について、初心者編よりもさらに詳しく見ていきたいと思います。
以前に説明した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>

これも、IEの文字の大きさの設定を「表示」→「文字のサイズ」で、変えてみてください。
変わっちゃうものは変わるし、変わらないものは変わらないですね。
私のIEで試したところ(IE6)大きさには変化はありません。
このように数字と単位でいろいろな大きさを指定できます。
10ポイントの字(10pt)、 12ポイントの字(12pt)、 15ポイントの字(15pt)
18ポイントの字(18pt)、 22ポイントの字(22pt)、 29ポイントの字(29pt)
36ポイントの字(36pt)、 45ポイントの字(45pt)
最後に、500ポイントの字(500pt)
PC−Parkトップ
心の話サイコロTown!




広告 万馬券 無料レンタルサーバー ブログ blog