|
|
フォント
▼ＦＯＮＴタグは基本中の基本です。
- ホームページを作る場合、やはり一番の中心となるのは文字なのです。
その文字のあれこれを指定するのがＦＯＮＴタグなのです。
１．文字の大きさを変更してみよう
◆指定と表示
<H1>サイズ１</H1>
サイズ１
<H2>サイズ２</H2>
サイズ２
<H3>サイズ３</H3>
サイズ３
<H4>サイズ４</H4>
サイズ４
<H5>サイズ５</H5>
サイズ５
<H6>サイズ６</H6>
サイズ６
※見出し文字の指定 <H>文字</H>
（<Hx>～</Hx> x＝1～6 で指定）
※<H1 align="center">位置指定</H1>
という風に同時に属性もいろいろ指定できます。
※ＳＥＯ対策としてＨタグは大切ですよ。
２．文字フォームの指定をしてみよう
◆指定と表示
<BODY bgcolor="#ADD8E6"
text="#000000" link="blue"
alink="red" vlink="#00FF00">
<BASEFONT size="3">
これが基本のフォントサイズとフォント色です。
そしてこれがリンクをつけた時の色です。 （実際にはリンクは貼ってません。ｗ）
次はアクティブになった時のリンク色です。
次のはすでに一度ジャンプしたリンク（既リンク）色です。
そして、背景色はLINGHTBLUE (#ADD8E6)
になっていますね。 |
※上級者ほど、今のような指定はほとんどがスタイルシートで指定しているようです。
※スタイルシートについては、CSS講座へ・・・ここより詳しい説明があります。
３．文字色を変更してみよう
- このページでも使用していますが、文字色の変更で文章やページ全体にアクセントをつけます。
★<FONT color="n">～</FONT> （ｎ＝#ＲＧＢか色名） ｛文字色の指定のみ有効｝
◆指定と表示
Ａ．<FONT color="#00BFFF">これはディープスカイブルーです。</FONT>
Ｂ．<FONT color="DEEPPINK">こちらはディープピンクで指定してみました。</FONT>
↓
Ａ．これはディープスカイブルーです。
Ｂ．こちらはディープピンクで指定してみました。
※指定する時のタグと、色名・ＲＧＢの書式は、大文字・小文字どちらでもＯＫです。
※<FONT>と<font>は同じ扱いです。
４．文字の種類を変更してみよう
- いろいろな説明文や、文章のメリハリをつけたい時に有効な指定です。
◆指定（上）と表示（下）
Ａ．<B>太字です。</B>（同じような指定で<STRONG>というのもあります。）<BR>
Ｂ．<I>斜体文字（イタリック）です。</I><BR>
Ｃ．<TT>等幅文字です。</TT><BR>
Ｄ．<U>アンダーライン付きです。</U><BR>
Ｅ．<S>取り消し線入りです。</S><BR>
Ｆ．<BLINK>点滅文字です。</BLINK> （Netscape
Navigator でのみ有効です。）<BR>
Ｇ．<SUP>上付き文字です。</SUP> （ボブ・・・ぢゃないよ。(爆)忘れてください。ｗｗ）<BR>
Ｈ．<SUB>下付き文字です。</SUB>
↓
Ａ．太字です。（カッコ内は<STRONG>での指定です。）
Ｂ．斜体文字（イタリック）です。
Ｃ．等幅文字です。
Ｄ．アンダーライン付きです。
Ｅ．取り消し線入りです。
Ｆ．
Ｇ．上付き文字です。
Ｈ．下付き文字です。
※残念ながら、<BLINK></BLINK>指定はWindowsでは表示できません。
※どうしても、点滅をさせたい場合は<MARQUEE>タグやJavaScriptでしています。
５．フォントの種類を指定してみよう
- フォントの種類はかなりの数がありますが、通常使えるものは数種類でしょう。
なぜならば、フォントは各ブラウザ毎に異なっているからなのです。
自分のＰＣにはあるのに（表示もされる）、他の人のＰＣでは表示できない文字では意味がありません。
できる限り、数多くのユーザーが見ることのできるフォントを指定したほうが賢明と言えます。
それから、フォントの指定は複数設定できます。（複数指定は「，」で区切ります。）
第１希望から順に書いていき、第１希望がない場合は第２希望が表示されるということになっています。
◆指定と表示
Ａ．<FONT face="ＭＳ 明朝,Arial,Impact,Comic
Sans MS">FONTFACE</FONT><BR>
Ｂ．<FONT face="Impact,Arial,ＭＳ明朝">FONTFACE</FONT>
↓
Ａ．FONTFACE （MS明朝で表示されていますか？）
Ｂ．FONTFACE （Impactで表示されていますか？）
※流行のOsakaフォントなどもインストールされてないと表示できないということになります。
※いろいろなフォントを使うよりもまとまりのあるほうがいい場合もあります。
６．文字の大きさを変更してみよう
- 文字サイズもページにメリハリをつける意味ではとても重要なことですね。
文字色やサイズを変えて、より一層見やすいページを目指しましょう。
（・・・という意味では、ココは手本にしないように！(;^_^A ）
フォントサイズの指定は２種類ありますよ。
◆指定と表示
Ａ．<FONT size="2">FONTSIZE</FONT>
Ｂ．<FONT size="4">FONTSIZE</FONT>
Ｃ．<FONT size="-1">FONTSIZE</FONT>
Ｄ．<FONT size="+2">FONTSIZE</FONT>
↓
Ａ．★FONTSIZE
Ｂ．FONTSIZE
Ｃ．FONTSIZE
Ｄ．FONTSIZE
Ⅰ．<FONT size="n"></FONT> （ｎ＝１～７までの数）
Ⅱ．<FONT size="±ｎ"></FONT> （ｎ＝１～３、ただし＋と－での指定になります。）
なにも指定しない場合の標準的サイズは<FONT
size="3">に相当するらしいですが、ブラウザによって若干大きさが違うようです。
７．文字を動かしてみよう
- 文字が移動しているページをたまに見かけたことがあると思います。
あれは、たいていこのタグによるものがほとんどです。
動きのあるページを作るのにはかなり有効な手段であると言えますね。
最近では、JavaScriptで動かしているページも多くなりましたが、これが基本ですね。
◆指定と表示
Ａ．<MARQUEE direction="left"
scrollamount="1">左に向かって速度は１で動くよ。</MARQUEE>
Ｂ．<MARQUEE direction="right"
scrollamount="2">MOVING RIGHT</MARQUEE>
※directionは４方向（up・down・left・right）できます。
※scrollamountは数字が大きくなればなるほど、早くなります。
※このタグは、４．で出てきた<BLINK>とは逆に、Internet
Explorer（IE）でのみ有効になります。
※Netscape Navigator（NN）で見てる方ごめんなさい。ｗ
※それから、もっと詳しい指定もできますが、ここではこれぐらいにしました。ｗ
※この指定のscrollamount部分の数字を大きくすることで、文字を点滅させることができるようになります。（正確には、点滅してはいないんですけど、そう見えるようになるんです。）
|
タグの中でも一番重要なものだと思いますが、比較的簡単・容易にマスターできてしまうタグでもあります。
フォントのカスタマイズだけでも、充分にインパクトのあるものが作れたりしますね。
特にＣＳＳを使ったフィルタ効果などはかなりインパクトを与えると思われます。
フォントを制するものは、ホームページを制する・・・なんて言葉はないですけど。(笑)
重要かつ簡単にマスターできるのもフォントタグの特長だと思われます。
基本を充分理解してから、応用を見てもらうといいですね。 |
|
|
|
