これだけは知っておきたいタグ


トップへ  HPの作り方MENUへ


まずこれだけ覚えましょう!

ホームページはタグと呼ばれているもので出来ていることはもうおわかりですね。
タグにはとてもたくさんの種類があり、その全てを最初から使おうとすると、自分でもなにをやろうとしているのかよくわからなくなってしまいます。
ですから、まずは最低限必要なものと、簡単なものだけを使ってページを作ってみましょう。


その1 タグについてのきまり

タグとは<>で囲まれたものだということはすでに説明しましたよね。 それについてもう少しお話しします。

<FONT SIZE="5" COLOR="blue">タグのきまり</FONT>

上の文を見て下さい。この中でタグは<FONT SIZE="5" COLOR="blue"></FONT>ですね。
このタグの中のFONTという部分を要素名、SIZE="5"COLOR="blue"という部分を属性といいます。
属性の=後の部分で、その属性に対しての設定を指定します。(サイズを変えたり色を付けたり)
基本的にこれらは全て半角で入力します。全角で入力するとそれはタグだと認識されないので注意して下さい。
また、大文字と小文字での違いは特にありません。(<FONT><font>による違いはありません)

</FONT>というタグは、<FONT SIZE="5" COLOR="blue">のタグの役目はここまで、という意味をもっています。
</要素名>のタグを終了タグといって、一般的にタグは(いくつか例外もありますが)終了タグをおいたところまで働きます。
きちんと入力したはずなのにブラウザで思ったように表示されないというときは、この終了タグを忘れていないかまず確かめるようにして下さい
上の場合はタグのきまりという部分が開始タグと終了タグに挟まれているので、属性として指定されたように大きさが5、色が青になってブラウザで表示されます。

タグのきまり
↑こんな感じです

その2 かならず必要なタグ

皆さんはHTMLという言葉を聞いたことはあるでしょうか?
ホームページはこのHTMLを使って書かれた文書、つまりHTML文書というもので書かれています。
このHTMLというのもタグの種類です。HTML文書は<HTML></HTML>というタグを使って作ります。


<HTML>
<HEAD>
<TITLE>ホームページ作成!</TITLE>
</HEAD>
<BODY>
ホームページを作りたいという人のために・・・
・・・・
・・・・
</BODY>
</HTML>


上に書いたHTML文書を見て下さい。
この中で使っているタグは、すべてHPを作るうえでかならず必要になるタグです。

ひとつずつ見ていきましょう

まずは最初の<HTML>は、もうおわかりですね。
ここからHTML文書が始まりますよ、という意味のタグです。

そして次の<HEAD>ですが、このタグに囲まれた部分(<TITLE>ホームページ作成!</TITLE>の部分のことです)はヘッダーと呼ばれています。
ヘッダーでは、このページにはこんな内容のことが書いてあります、という説明をします。

ヘッダーの中にある<TITLE>というタグは、そのページのタイトルを表すのに使われます。
ここに記入したタイトルは、ブラウザの一番上の部分に表示されます。
ここのページのタイトルは、これだけは知っておきたいタグなので、皆さんの見ているブラウザの上に表示されているはずです。
上に書いたものなら「ホームページ作成!」というタイトルがブラウザの上部に表示されます。

さて、ヘッダーが終わったら次は<BODY>です。
この中にページの本体を書いていきます。
文を書いたり表を作ったり・・・、ここからは皆さんの自由です!
しかし、表を作ったりするのには、それようのタグを学ばなければなりません。
それらは必要になったときにだんだんと学んでいきましょう。

その3 文字と色

その2で学んだHTML文書の作り方さえわかれば、それだけでホームページはできます。
しかし、様々なホームページを見てみると、大きな文字があったり、いろんな色が使われていたり、きれいな絵が表示されていたり・・・と、ただの白い文字が書かれているだけのホームページなんてちょっとありませんよね。

そこで今回はまず、文字の大きさを変えたり、色を付けたりする方法を説明します。
このページのその1で使った、つぎの文を見て下さい。
<FONT SIZE="5" COLOR="blue">タグのきまり</FONT>
この中のFONTという部分は要素名です。FONTという要素名は文字についてのきまりを決めるためのものです。
SIZE="5"COLOR="blue"という属性でそれぞれ文字の大きさと色を規定しています。

SIZEとはその名の通り大きさを決める属性です。
="5"という部分でFONTタグに囲まれた文字の大きさを5に設定しているのです。
この数字の部分を1から7の好きな数字に書き換えることによって、文字の大きさを自由に変えることが出来ます。
数字を1にしたとき文字は一番小さくなり、7にしたとき文字は一番大きくなります。

COLORは色を決めるための属性です。
="blue"という部分でFONTタグに囲まれた部分の色をblueつまり青に設定しているのです。

色を変える方法は2つあります。
1つは今のようにblueなどの色の名前を入れる方法。
もう1つは光の三原色をつかって色を決める方法です。
<FONT COLOR="#0000FF">
上の文を見て下さい。
blueという部分が#0000FFに変わっていますね。しかし、この二つは同じものなのです。
光の三原色とは赤緑青の組み合わせのことで、0000FFの最初の二つの00が赤、次の二つの00が緑、最後のFFが青の色の強さを表しています。
そしてそれぞれの色の強さは00からFFの256通りあります。

なぜ00からFFで256通りになるのでしょうか?
それはこの数値が16進法を使っているからです。
いつも使っている10進法という数え方は、一の位が9までで、さらに一の位を一つ増やそうとすると十の位を一つ増やして一の位を0、つまり10にする数え方です。
それに対して16進法という数え方は一の位が0からFまでの16あり、それ以上いくと繰り上がる、つまり「0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10,11,12,13,14,15,16,17,18,19,1A,1B.......」という数え方をします。
そしてそれぞれ256色ずつの色の強さを組み合わせて、一つの色を作ります。
つまりCOLOR="#0000FF"は赤の強さが00、緑の強さが00、青の強さがFFという色を表します。
色の強さを入れる前に、#の記号を入力するのを忘れないようにして下さい。

次に背景の色です。
これはその2の必ずひつようなタグで使った<BODY>というタグにBGCOLORという属性を使って表します。
<BODY BGCOLOR="#80FF80">のように16進数を使って好きな色を背景に指定しましょう。




トップへ  HPの作り方MENUへ