HTML編 02/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
これだけは知っておこう
タグの構造




タグの構造

ホームページを表示するための文章をHTMLと言います。このHTMLは普通の文章に「こう表現しなさい」という命令文が添えてあるだけです。この命令文を「タグ」と言います。つまり、タグさえ解ればホームページがつくれるのです。
で、この「タグ」はとても簡単な法則で出来ています。どういう物かというと、命令文を<>で囲み、命令を指定したい部分の終わりに</>で囲んだ同じ命令文添えて、表示したい部分をを挟む、というだけです。文章だと解りづらいと思いますので、ちょっとやってみましょう。
「こんにちは」という文字を真ん中に表示します。

<CENTER>こんにちは</CENTER>

最初の<CENTER>を開始タグ、後ろの</CENTER>を終了タグといいいます。このように開始タグと終了タグで表示したい物を挟めばいいのです。「真ん中に表示する」というタグは「CENTER」ですので(そのまんまですね・笑)、このタグの後に命令させたい物を書いて(この場合「こんにちは」という文字)命令を終了させたい場所に「/」を加えた同じタグ</CENTER>を書こば「こんにちは」は真ん中に表示されます。このタグは
<真ん中に表示>こんにちは<真ん中に表示ここまで>
という意味です。実際に書くとこうなります。

こんにちは


例外もいくつかありますが、基本はこれだけです。また、タグは半角英数文字しか使えませんが、大文字でも小文字でも基本的にはOKです。どうです?簡単ですよね?

しかし、いくらなんでもこれだけだと、出来ることが限られてしまいますので、これにちょっとだけバリエーションが付けられます。
今度は文字を大きくしてみましょう。文字のタグは「FONT」ですので、文字を表示するのは以下のようになります。

<FONT>こんにちは</FONT>

上のタグは
<文字を表示する>こんにちは<文字表示ここまで>
という図式になります。本来、普通に文字を表示するには、いちいちタグを付けなくても良いのですが、サイズを変えるには「サイズを変える」というタグが必要です。そこで開始タグ<FONT>の中にサイズの指定を加えます。

<FONT SIZE="5">こんにちは</FONT>

こうなります。

こんにちは

サイズを5にしました(何も指定しないと通常3の大きさです)。
<文字を表示する。サイズは5>こんにちは<文字表示ここまで>
という構造です。このタグの「SIZE」の部分をオプションタグと言います。親のタグ「FONT」にオプションで付けるタグだからです。さらに「5」の部分をパラメータ(変数)と言い、任意の数値などを入れることが出来ます。親のタグとオプションタグの間には半角スペース、オプションタグとパラメータの間には「=」を入れます(そのまま続けて書くと解らなくなってしまいますから…笑)。オプションタグやパラメータは、開始タグだけに付けて、終了タグには必要ありません。正式にはパラメータは「"」と「"」(引用符)で挟むことになっていますが、最近のブラウザでは、省略しても構いません。
また、オプションタグは一つだけでなく、いくつも加えることが出来ます。サイズ5の文字をさらに赤くしてみましょう。

<FONT SIZE="5" COLOR="red">こんにちは</FONT>

こうなります。

こんにちは

「FONT」タグにサイズと色の指定のオプションタグ・パラメータを加えてみました。
<文字を表示する。サイズは5。色は赤>こんにちは<文字表示ここまで>
ということになります。「red」だけ小文字で書きましたが、上に書いた通り、基本的には大文字でも構いません。

もう少しやってみましょう。文字を斜体にするのは<I>というタグです。斜体は英語でイタリックなのでその頭文字ですね。これはオプションタグではないので、単純に<I>と</I>で挟みます。

<I>こんにちは</I>

こんにちは

こうなります。では上の「サイズ5で赤い文字」をさらに斜体にしたい時はどうすればいいでしょう。答えは簡単。単純に挟めばいいだけです。

<FONT SIZE="5" COLOR="red"><I>こんにちは</I></FONT>

こんにちは

HTMLの文法上は正しくないのですが、挟む順序が逆でもちゃんと機能します。
<I><FONT SIZE="5" COLOR="red">こんにちは</FONT></I>
これでもOKです。さらにこれを真ん中に表示したければ…、そう、もうおわかりですね(笑)。<CENTER>で挟みます。

<CENTER><FONT SIZE="5" COLOR="red"><I>こんにちは</I></FONT></CENTER>

こんにちは



いかがでしょう?簡単だと思いませんか?

一つだけ例外も紹介します。例えば「改行」のタグです。改行には「ここから、ここまで」という物がないので終了タグがありません。改行タグは<BR>を書きますが、これは改行したい所に書き込めばOKです。

文章を途中で<BR>改行したい。

文章を途中で
改行したい。

こんな感じです。
これだけ解れば、もうタグの基本はマスターしたと言っていいでしょう(笑)。

backindexnext