HTMLタグ 1

◆ 文字の大きさ

<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

三角矢印 16進数の色見本も参考にしてくださいね。色のカラーコードが書いてあります。

◆ 組み合わせ

<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>

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

文字を点滅させてみましょう。（表示できないブラウザが多いです。Firefoxから見ると表示されます。）
このタグは廃止されたようです。

◆ マーキー

<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="https://pata2.jp/">ぱたぱたアニメ館</a>

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

◆ 画像の貼り方

<img src="画像のURL">

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

表示
犬
HTML
<img src="https://***.***.**.**/dog3.gif">

◆ 画像を大きくする

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

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

100×100
200×200

表示
うまやどくん
HTML
<img src="https://***.***.**.**/umaya_09.gif" width="120" height="100">

◆ 画像をリンクする

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

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

表示
ぱたぱたアニメ館TOPページ
HTML
<a href="https://pata2.jp/"><img src="dinosaur2r.gif" border="0"></a>

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

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

上に戻る