◆ 文字の大きさ

<font size="数値"></font>

sizeの数値は1~7まであります。3が標準です。

表示

このぐらいの大きさ

このぐらいの大きさ

このぐらいの大きさ

このぐらいの大きさ

このぐらいの大きさ

このぐらいの大きさ

このぐらいの大きさ

HTML
<font size="1">このぐらいの大きさ</font>
<font size="2">このぐらいの大きさ</font>
<font size="3">このぐらいの大きさ</font>
<font size="4">このぐらいの大きさ</font>
<font size="5">このぐらいの大きさ</font>
<font size="6">このぐらいの大きさ</font>
<font size="7">このぐらいの大きさ</font>

上に戻る

◆ 文字の色

<font color="カラーコードか名前"></font>

color指定は、「カラーコード(色番号)」か「色の名前」で指定します。

表示

* カラーコードによる指定 *

白い字 黄色い字 ピンクの字 赤い字 青い字 緑の字 黒い字

* 色の名前による指定 *

白い字 黄色い字 ピンクの字 赤い字 青い字 緑の字 黒い字

HTML
* カラーコードによる指定 *
<font color="#ffffff">白い字</font>
<font color="#ffff00">黄色い字</font>
<font color="#ff69b4">ピンクの字</font>
<font color="#ff0000">赤い字</font>
<font color="#0000ff">青い字</font>
<font color="#008000">緑の字</font>
<font color="#000000">黒い字</font>
* 色の名前による指定 *
<font color="white">白い字</font>
<font color="yellow">黄色い字</font>
<font color="hotpink">ピンクの字</font>
<font color="red">赤い字</font>
<font color="blue">青い字</font>
<font color="green">緑の字</font>
<font color="black">黒い字</font>
色の名前(一部)
Ivory
#fffff0
Silver
#c0c0c0
Gold
#ffd700
Orange
#ffa500
Plum
#dda0dd
Magenta
#ff00ff
Hotpink
#ff69b4
Purple
#800080
Cyan
#00ffff
Skyblue
#87ceeb
Royalblue
#4169e1
Dimgray
#696969
Greenyellow
#adff2f
Lime
#00ff00
Tan
#d2b48c
Maroon
#800000

上に戻る

◆ 組み合わせ

<font size="大きさ" color="色"></FONT>

タグは、いろいろ組合すことが出来ます。size="5"の赤い文字、size="7"の青い文字にしてみます。

表示

こういう感じになりますよ

いかがですか?

HTML
<font size="5" color="#ff0000">こういう感じになりますよ</font>
<font size="7" color="#0000ff">いかがですか?</font>

上に戻る

◆ 文字の太さ

<b>ここに文字</b>

文字を太くしてみましょう。

表示

こういう感じになりますよ

いかがですか?

HTML
<b>こういう感じになりますよ</b>
<font size="7" color="#ff8000"><b>いかがですか?</b></font>

上に戻る

◆ 斜体

<i>ここに文字</i>

斜体を使ってみましょう。

表示

こういう感じになりますよ

いかがですか?

HTML
<i>こういう感じになりますよ<i>
<font size="7" color="#87ceeb"><i><b>いかがですか?</b></i></font>

上に戻る

◆ アンダーライン

<u>ここに文字</u>

文字にアンダーラインを引いてみましょう

表示

こういう感じになりますよ

いかがですか?

HTML
<u>こういう感じになりますよ</u>
<font size="6" color="#ff00ff"><i><b><u>いかがですか?</u></b></i></font>

上に戻る

◆ 取り消し線

<s>ここに文字</s>

文字に取り消し線を入れてみましょう。

表示

こういう感じになりますよ

いかがですか?

HTML
<s>こういう感じになりますよ</s>
<font size="5" color="#800000"><b><s>いかがですか?</s></b></font>

上に戻る

◆ 点滅(一部のブラウザのみ)

<blink>ここに文字</blink>

文字を点滅させてみましょう。(表示できないブラウザが多いです。Firefoxから見ると表示されます。)

表示

こういう感じになりますよ

いかがですか?

HTML
<blink>こういう感じになりますよ</blink>
<blink><font size="6" color="#aaaaaa"><b>いかがですか?</b></font></blink>

上に戻る

◆ マーキー

<marquee>ここに文字</marquee>

文字をスクロールさせてみましょう。画像をスクロールさせる場合は、文字の箇所を<img src="画像のURL">に置き換えるとできます。 (マーキーを表示できないブラウザもあります)

表示

こういう感じになりますよ

いかがですか?

traintop2.gif 49*40../others/train_o2.gif 72*27train_b2.gif 72*27trainsee2.gif 71*27train_k2.gif 71*25train2.gif 39*27

HTML
<marquee>こういう感じになりますよ</marquee>
<marquee><font size="7" color="#ff69b4">いかがですか?</font></marquee>
<marquee><img src="〇〇.gif"></marquee>

上に戻る

◆ 改行

<br>

文章に改行を入れてみましょう。(<br>に閉めタグはありません。)

表示

ここに
改行を入れます
いかがですか?

HTML
ここに<br>改行を入れます<br>いかがですか?

上に戻る

◆ リンク

<a href="リンク先のURL">ここに文字</a>
<a href="mailto:メールアドレス">ここに文字</a>

リンクを貼ってみましょう。リンクとはページからページへの移動を指します。”ここに文字”の部分をクリックするとリンク先へジャンプできます。”mailto:”はメールアドレスへのリンクです。

表示
HTML
<a href="http://www.pata2.jp/">ぱたぱたアニメ館</a>

三角矢印画像へのリンクは、[画像をリンクする] をご参照ください。

上に戻る

◆ 画像の貼り方

<img src="画像のURL">

ページに画像を貼ってみましょう。

表示

犬

HTML
<img src="http://***.***.**.**/dog3.gif">

上に戻る

◆ 画像を大きくする

<img src="画像のURL" width="横幅" height="高さ">

うまやどくんこの画像を大きくしてみましょう。横幅と高さはピクセル(px)で指定します。 ピクセルがどのぐらいの大きさなのか、100×100と200×200の大きさ(いずれも単位はpx)のボックスを作りましたので参考にしてください。

100×100
200×200

表示

うまやどくん

HTML
<img src="http://***.***.**.**/umaya_09.gif" width="120" height="100">

上に戻る

◆ 画像をリンクする

<a href="リンク先のURL"><img src="画像のURL"></a>

リンクの方法は、文字でのリンクと同じです。文字の代わりに画像を使います。<a>タグで挟むと画像がリンクボタンになります。

表示

ぱたぱたアニメ館TOPページ

HTML
<a href="http://www.pata2.jp/"><img src="dinosaur2r.gif" border="0"></a>

画像をリンクした場合は、そのままでは青い枠が残ります。青い枠を消す場合は、border="0"を追加します。

上に戻る

三角矢印[HTMLタグを使おう!<2>] へお進みください。