トップページへ戻る / タグ辞典トップに戻る / HP作成講座トップへ戻る

フォントタグ
▲文字の大きさを変える
<font size=1>フォントサイズ１の大きさ</font>
<font size=2>フォントサイズ2の大きさ</font>
<font size=3>フォントサイズ3の大きさ</font>
<font size=4>フォントサイズ4の大きさ</font>
<font size=5>フォントサイズ5の大きさ</font>
<font size=6>フォントサイズ6の大きさ</font>
<font size=7>フォントサイズ7の大きさ</font>
フォントサイズ１の大きさ
フォントサイズ2の大きさ
フォントサイズ3の大きさ
フォントサイズ4の大きさ
フォントサイズ5の大きさ
フォントサイズ6の大きさ
フォントサイズ7の大きさ
  • 設定できる大きさは１〜７です。
  • 1〜7の数字ではなく、相対的に-3〜+3のような指定もできます。
▲文字の色を変える
<font color=red>名前による色指定(赤)</font>
<font color=blue>名前による色指定(青)</font>
<font color=#FF0000>カラーコードによる色指定(赤)</font>
<font color=#0000FF>カラーコードによる色指定(青)</font>
名前による色指定(赤)
名前による色指定(青)
カラーコードによる色指定(赤)
名前による色指定(青)
  • 名前でもカラーコードでもどちらで指定してもよいです。
  • 色の種類については、カラーコード表を参考にして下さい。
▲文字のサイズと色を変える
<font size=3 color=red>赤でサイズ3</font>
<font size=6 color=blue>青でサイズ6</font>
赤でサイズ3
青でサイズ6
  • このようにタグを組み合わせることもできます。
  • <font color=red size=3>のように順番はどちらでもよいです。
▲フォントの書体を指定する
<font face="ＭＳ Ｐ明朝">MS P明朝ＭＳ Ｐ明朝</font>
<font face="Times New Roman">Times New Roman</font>
MS P明朝
Times New Roman
  • パソコンに指定したフォントが見つからない場合、ブラウザで設定されている標準のフォントで表示されます。
  • NetScapeには対応していません。
▲文字を太字や斜め字で表示する
<b>ボールド(太字)で表示</b>
<i>イタリック(斜め字)で表示</i>
ボールド(太字)で表示
イタリック(斜め字)で表示
  • 文字を強調させたいときに使います。
  • それぞれ、<strong></strong>、<em></em>でも同じ効果があります。こちらの指定の方がGoogleなどの検索エンジンのキーワードとしての重要度が高いです。
▲見出し文字を設定する
<H1>H1の見出し文字</H1>
<H2>H2の見出し文字</H2>
<H5 align=center>H5で中揃えに指定した見出し文字</H5>
<H6 align=right>H6で右揃えに指定した見出し文字</H6>

H1の見出し文字

H2の見出し文字

H5で中揃えに指定した見出し文字
H6で右揃えに指定した見出し文字
  • 太字になり、上下に一行空き、文字の大きさが変わるタグです。
  • H1〜H6まで指定できます。H1が一番大きく、H6が一番小さいです。
  • alignで指定できるのは、left、center、rightです。それぞれ、左揃え、中揃え、右揃えです。
  • 一見、<font size=?><b></b></font>と同じような効果に見えますが、検索エンジンは、<H1>内の文字を最重要キーワードとして認識します。重要度もH1が一番高く、H6が一番低いです。検索エンジンに引っかかって欲しいキーワードはこのタグを使用するといいです。
▲文字に下線や取消し線を引く
<u>下線を</u>を引いてみます。
私は<s>バカ</s>です。
下線を引いてみます。
私はバカです。
  • <strike></strike>でも取り消し線を引けます。
▲文字を添え字で表示する
<sup>上</sup>付き文字で表示。
<sub>下</sub>付き文字で表示。
上付き文字で表示。
下付き文字で表示。
▲文字を点滅させる
<blink>文字を点滅</blink>させる。
文字を点滅させる。
  • IEは未対応なので、点滅しません。
  • Netscapeでのみ、点滅します。
▲文字をスクロールさせる
水平方向にスクロールさせる
<marquee>文字を水平スクロール</marquee>
<marquee direction=right>左から右にスクロール</marquee>
<marquee behavior=alternate>左右にスクロール</marquee>
<marquee hspace=200>左右のスペースを指定してスクロール</marquee>
<marquee width=200>スクロール幅を指定してスクロール</marquee>
<marquee scrollamount=20>スピードを指定してスクロール</marquee>
<marquee loop=1>ループ回数を指定してスクロール</marquee>
<marquee bgcolor=green>背景色を指定してスクロール</marquee>
文字を水平スクロール
左から右にスクロール
左右にスクロール
左右のスペースを指定してスクロール
スクロール幅を指定してスクロール
スピードを指定してスクロール
ループ回数を指定してスクロール
背景色を指定してスクロール
  • このマーキータグは、IEのみ対応でしたが、Netscape 7.1よりネスケでも対応となりました。
  • これらのタグは組み合わせて使えば、より細かな指定ができます。
鉛直方向にスクロールさせる
<marquee direction=up height=50>高さ50で、文字を下から上にスクロール</marquee>
高さ50で、文字を下から上にスクロール
<marquee direction=down height=50>高さ50で、文字を下から上にスクロール</marquee>
高さ50で、文字を下から上にスクロール
<marquee direction=down behavior=alternate height=50>高さ50で、文字を上下にスクロール</marquee>
高さ50で、文字を上下にスクロール
スクロールの応用技
<marquee direction=down behavior=alternate height=50><marquee direction=right behavior=alternate hspace=100>組み合わせれば、こんなこともできます。</marquee></marquee>
組み合わせれば、こんなこともできます。
<marquee directon=right><img src=ahiru.gif></marquee>

<marquee onmouseover=this.stop() onmouseout=this.start()>カーソルを合わせると止まります。</marquee>
カーソルを合わせると止まります。
  • 画像を流すには、文字の変わりに画像を表示させるタグを入れるだけです。
  • このタグは、動的にページを表現できるので便利ですが、使用しすぎるとページのあちこちが動いて、「うざい！」となるので、多用は避けましょう。