タグを覚えよう！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST10</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
　
ゴシック体でサイズが４ 
ゴシック体でサイズが５ 
ゴシック体でサイズが６ 
ゴシック体でサイズが７
　
</BODY>
</HTML>

　これを表示してみましょう。ここをクリックしてみましょう。

また、、○○○のＭＳゴシックをＤＦPOP体に変えてみましょう。

　すると、こうなります。

　うまく表示されましたでしょうか？

　この文字は、相手の環境に左右されます。つまり、相手が持ってないフォントを指定すると相手のディフォルトのフォントで表示されます。

・・・・・・・・・・・・・・・・・文字サイズを指定する。

・・・・・・・・・・・・・・・文字色を指定する。

・・・・・・・・・・・・・・・・文字種類を指定する。

■ 装飾用のタグ

　ＨＰの装飾と言えば、まず画像の張り付けが考えられます。

　通常貼り付ける画像の種類としては、写真は「JPEG形式」イラストは「GIF形式」が一般的でしょう。

　例えば、デジカメで撮った写真を使ったり、ネットなどで集めたGIF素材などを使ったりして、画像を用意します。

　もちろん、技術とセンスがあれば自分で素材を作ることが出来ます。

　サンプル画像を見てみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST12</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
　
<IMG SRC="test01.gif">サンプル画像１（280×300ピクセル）
<IMG SRC="test02.gif">サンプル画像２（280×280ピクセル）
　
</BODY>
</HTML>

　ここをクリックして下さい。画像をわかりやすくするため、背景を黒くしました。

　うまく表示出来ましたか？

　しかし、これで満足しては行けません。もし相手の環境や、通信の問題で画像を読み込めない場合はどうでしょう？

　ここでは、「test01.gif」を「test03.gif」に「test02.gif」を「test04.gif」に変えてみましょう。

<IMG SRC="test03.gif">サンプル画像１（280×300ピクセル）
<IMG SRC="test04.gif">サンプル画像２（280×280ピクセル）

　すると、こう表示されます。もちろん画像はありません。

　この場合は、画像が表示された場合と、表示されなかった場合で画面のバランスが変わるのがわかります。

　そこで画像の大きさを指定すれば、読み込まれない場合でもバランスが変わることはありません。

<IMG SRC="test03.gif" WIDTH="280" HEIGHT="300">サンプル画像１（280×300ピクセル）
<IMG SRC="test04.gif" WIDTH="280" HEIGHT="280">サンプル画像２（280×280ピクセル）

　今度はどうですか？ここをクリックして下さい。これも、もちろん画像はありません。

　ただの画像ならいいんですが、ボタンとして使ってる場合はどうでしょう？？

　そこをクッリクすると他のページに飛んだり、小さい画像をクリックすると大きい画像に変わったり・・・

　そのとき画像が表示されないと、どれをクリックすればいいか困りますよね？そう言うときは、画像にタイトルをつけます。

<IMG SRC="test03.gif" WIDTH="280" HEIGHT="300" ALT="スイカ割りの画像">サンプル画像１（280×300ピクセル）
<IMG SRC="test04.gif" WIDTH="280" HEIGHT="280" ALT="女の子と線香花火">サンプル画像２（280×280ピクセル）

　どうでしょうか？ここをクリックして下さい。これも、もちろん画像はありません。

　これで画像が表示されなくても安心です。

　それでは、画像を表示させて見てみましょう。

<IMG SRC="test01.gif" WIDTH="280" HEIGHT="300" ALT="スイカ割りの画像">サンプル画像１（280×300ピクセル）
<IMG SRC="test02.gif" WIDTH="280" HEIGHT="280" ALT="女の子と線香花火">サンプル画像２（280×280ピクセル）

　どうですか？これで出来ました。カーソルを画像に合わせると、タイトルが表示されますね？

　このWIDTH="○○"は画像の横幅を指定し、HEIGHT="○○"は画像の高さを指定します。

　そこでこの数字を変えれば、表示する画像の大きさを変えることが出来ます。（画像本来の大きさは変わりませんが）

<IMG SRC="test01.gif" WIDTH="180" HEIGHT="300" ALT="スイカ割りの画像">サンプル画像１（280×300ピクセル）
<IMG SRC="test02.gif" WIDTH="180" HEIGHT="280" ALT="女の子と線香花火">サンプル画像２（280×280ピクセル）

　ここをクリックしてみましょう。幅が細くなった画像になりました

　しかし、これは元画像は変わっていません。あくまでも表示の段階で変えているのです。

　では、ここで幅だけ指定したらどうでしょうか？。

<IMG SRC="test01.gif" WIDTH="180"ALT="スイカ割りの画像">サンプル画像１（280×300ピクセル）
<IMG SRC="test02.gif" WIDTH="180"ALT="女の子と線香花火">サンプル画像２（280×280ピクセル）

　ここをクリックしてみましょう。幅に合わせて高さが調整されています。

　しかし、先ほどの「画像が表示されない場合」を想定して画像の縦横をきちんと指定した方がいいでしょう。

　画像ビューワーのSusieはフリーソフトでお勧めです。これを使ってもサイズがわかります。（Susieの部屋　作者：たけちん氏）

　表示サイズを変える場合はPaintShopなどのソフトも有効です。ネットで手に入るフリーウェアでもいいものがあります。

<IMG SRC="test01.gif" WIDTH="180" HEIGHT="193" ALT="スイカ割りの画像">サンプル画像１（280×300ピクセル）
<IMG SRC="test02.gif" WIDTH="180" HEIGHT="180" ALT="女の子と線香花火">サンプル画像２（280×280ピクセル）

　ここをクリックしてみましょう。これできちんと出来上がりました。

<IMG SRC = "画像ファイル">・・・・・・・・・・・・・・・・・・・・画像を表示する（基本タグ）

<IMG SRC = "画像ファイル" WIDTH="○○">・・・・・・・画像の横幅のサイズを指定

<IMG SRC = "画像ファイル" HEIGHT="○○">・・・・・・画像の高さのサイズを指定

<IMG SRC = "画像ファイル" ALT="○○">・・・・・・・・・画像のタイトルを指定

■ リンク用のタグ

　ホームページと言えばリンクです。リンクのないＨＰは、肉のない牛丼のようなものです！（笑）

　リンク先URL（アドレス）の指定には、相対パスと絶対パスがあります。

　相対パスとは、今いる場所から見てどこに飛ぶか？を示したものです。

　同じＨＰ内の他のページに飛ぶ場合によく使われます。

　絶対パスとは、HTTP://～から始まるアドレスを示したものです。

　他のＨＰに飛ぶ場合によく使われます。

　それでは、先ほどの画像をリンクで表示するサンプルページを作ってみましょう。

　ファイルの構造は以下のようにしました。

［test］・・・・・・・・・・・・・・・・フォルダ
　┃
　┣［link］・・・・・・・・・・・・・フォルダ
　┃　┃
　┃　┣ test20.html ・・・・HTMLファイル
　┃　┗ test01.gif ・・・・・・画像ファイル
　┣ test19.html ・・・・・・・HTMLファイル
　┗ test02.gif ・・・・・・・・・画像ファイル

　これは、相対パスを使って作ります。

　まずはtest20.htmlを見てみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST20</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<A HREF="link/test01.gif">サンプル画像１（280×300ピクセル）</A>
<A HREF="test02.gif">サンプル画像２（280×280ピクセル）</A>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。

　この例では、「test01.gif」は「test20.html」から見ると、ファイルの構造で示す通り、同じ「test」フォルダの中に「link」というフォルダがあり、その中に入ってる事になります。

　このため、「test01.gif」は

<A HREF="link/test01.gif">サンプル画像１（280×300ピクセル）</A>

　のように、「link/」が入ります。

　つぎにtest21.htmlを見てみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST21</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<A HREF="test01.gif">サンプル画像１（280×300ピクセル）</A>
<A HREF="../test02.gif">サンプル画像２（280×280ピクセル）</A>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。

　この例ではちょっと位置が変わります。

　「test02.gif」は「test20.html」から見ると、ファイルの構造で示す通り、同じ「link」フォルダの上位の位置にある「test」というフォルダがあり、その中に入ってる事になります。

　このため、「../test02.gif」は

<A HREF="../test02.gif">サンプル画像１（280×300ピクセル）</A>

　のように、「../」が入ります。これは、「一つ前のフォルダだよ」っていう意味です。

　では、絶対パスを使った例を見てみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST22</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<A HREF="http://210.162.136.1/%7Eaki39690/">ホームページに戻る</A>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。

　これは、URL（アドレス）を入れてあります。そのため、他人のＨＰにもリンクを貼ることが出来ます。

　URL（アドレス）を変えてみましょう。

<A HREF="http://www.yahoo.co.jp/">Ｙａｈｏｏ！ＪＡＰＡＮ</A>

　ここからサンプルに飛びます。

　どうですか？Ｙａｈｏｏ！ＪＡＰＡＮに飛ぶようになったでしょう？

　よくあるリンク集などは、この絶対パスを使ってリンクを貼っています。

　また、リンクするページを、別に開くこともできます。

<A HREF="http://www.yahoo.co.jp/" TARGET="_blank">Ｙａｈｏｏ！ＪＡＰＡＮ</A>

　ここからサンプルに飛びます。

　これを使うと、今まで見ていたページが残すことができます。自分のＨＰから他の人のＨＰに飛ぶ場合に、自分のＨＰを開いたままにしてもらいたい場合に有効です。

　今度は同じページ内でのリンクを見てみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST25</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　

<A HREF="#archive">アーカイブ</A>
<A HREF="#architecture">アーキテクチャ</A>
<A HREF="#icon">アイコン</A>
　
 
 
 
 
 
 
 
 
 
 
　
<a name="archive">
　
アーカイブ
　
保管のために複数のファイル（アーカイブ対象ファイル）をひとつにまとめたり、データ圧縮を行うこと。本来は記録保管という意味。 
保管されるファイルをアーカイブファイルという。アーカイブファイルは、後の利用のために組織的に作成し、維持し、一定の期間、保存（保管）し、必要に応じて復元する。 
これらのソフトを行うソフトウェアをアーカイバ（archiver）という。
 
　
<a name="architecture">
　
アーキテクチャー
　
コンピュータの分野では、ハードウェアやネットワークの構成様式。 
本来は建築学の分野で、建築様式、建築物の意味をもつ語。 
狭義には、中央処理装置について、データや命令の形式や記憶方式、アドレス指定、割込み方式など、プログラマが必要とするシステムの特性、特徴の集まりのことをいう。
 
　
<a name="icon">
　
アイコン
　
プログラムの機能や処理内容、ファイルの属性などを小さな図形で表したディスプレイ画面上の図柄。 
コンピュータの操作を視覚的にわかりやすくし、簡易化する技法。 
ユーザーはキーボードからコマンド入力する代わりにマウスなどでアイコンを操作（クリック／ドラッグ）し、機能やファイルの選択などを行う。 
ユーザーのキーボード入力が減り、直感的な操作ができ画面表示も簡略化できるなど多くの利点があり、ウィンドウシステムの特徴のひとつとなっている。
 
　

</BODY>
</HTML>

　ここからサンプルに飛びます。どうでしょうか？

　それぞれの章に「name」をつけ、その「name」にリンクすることによって、同じページ内で目的の章に行くことが出来ます。

　ではこのリンクを使って、ＨＰ上からメールを送る事が出来るようにしましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST26</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<A HREF="mailto:aaa@bbb.com">メールを送る</A>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。

　これは、ＨＰ上からメールソフトを起動してメールを送ることの出来るリンクです。

　メールアドレスを自分のに変えれば、ＨＰ訪問者が自分にメールを送ることが出来ます。

<A HREF="○○"></A>・・・・・・・・・・・・・・・・・・・・・・・○○へリンクする。

<A HREF="○○" TARGET="_blank"></A>・・・・・・・・別ページを開いて○○へリンクする。

<A HREF="#△△"></A>・・・・・・・・・・・・・・・・・・・・・・○○というタイトルへリンクする。

<A name="△△">・・・・・・・・・・・・・・・・・・・・・・・・・・・タイトル。

<A HREF="mailto:メールアドレス"></A>・・・・・・・・メールを送れるようにする。

■ テーブル用のタグ

　ＨＰに表組みを入れる場合は、TABLEタグを使います。

　オプションをつけることによって、表の罫線を太くしたり細くしたり、または色を付けたり線を消したり・・・。そんな機能があるため、ほとんどは表を作る目的よりも、ＨＰのデザインのために使われるのが多いようです。

　もともとＨＴＭＬは、その性質上デザインするための決定的な命令がなく（今ではスタイルシートがありますが、まだブラウザによってばらつきがあるのが現状です）、画像や文字を好きな位置に配置するのが難しいのです。

　そのため表組に使うTABLEタグを、デザインのために使うのが多く見受けられます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST27</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<TABLE>
　　　<TR>
　　　　　　<TD>あいうえお</TD>
　　　　　　<TD>かきくけこ</TD>
　　　</TR>
　　　<TR>
　　　　　　<TD>さしすせそ</TD>
　　　　　　<TD>たちつてと</TD>
　　　</TR>
</TABLE>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。どうでしょうか？

<TABLE>に枠線を入れてみましょう。

　ここからサンプルに飛びます。どうでしょうか？

　BORDER=○の数字を変えてみましょう。

　ここからサンプルに飛びます。枠線が太くなったのがわかりますか？

　つまりBORDER=数字で枠線の太さを好みに変えられます

　枠線をなくしたい場合はBORDER=0にすれば、枠線がなくなります。

　TABLE枠のサイズを指定することもできます。

　ここからサンプルに飛びます。

　これはWIDTH="幅（ピクセル）"で幅を指定し、HEIGHT="高さ（ピクセル）"で高さを指定しています。

　しかし、これではTABLE全体の枠しか指定していません。

　サンプルでわかる人もいますが、ブラウザによって１行目と２行目の幅や高さが揃いません。

　その場合はセル枠を指定するといいでしょう。

<TD>に指定する事が出来ます。

　またピクセル（数字）出なく％で指定する事が出来ます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST31</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<TABLE BORDER=5 WIDTH="200" HEIGHT="200">
　　　<TR>
　　　　　　<TD WIDTH="50%" HEIGHT="50%">あいうえお</TD>
　　　　　　<TD WIDTH="50%" HEIGHT="50%">かきくけこ</TD>
　　　</TR>
　　　<TR>
　　　　　　<TD WIDTH="50%" HEIGHT="50%">さしすせそ</TD>
　　　　　　<TD WIDTH="50%" HEIGHT="50%">たちつてと</TD>
　　　</TR>
</TABLE>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。

　TABLEタグでWIDTH及びHEIGHTをピクセルでなく％で指定した場合は、ブラウザの大きさに対しての％を指定しています。

　TDタグでWIDTH及びHEIGHTをピクセルでなく％で指定した場合は、TABLEで指定した大きさに対して％を指定しています。

　このサンプル（test31）では、TABLE枠を200×200ピクセルで指定してますので、50%とは100ピクセルになります。

　セル内の文字の位置を指定する事もできます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST32</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<TABLE BORDER=5 WIDTH="300" HEIGHT="300">
　　　<TR>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="LEFT" VALIGN="TOP">左上</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="CENTER" VALIGN="TOP">中上</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="RIGHT" VALIGN="TOP">右上</TD>
　　　</TR>
　　　<TR>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="LEFT" VALIGN="MIDDLE">左中</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="CENTER" VALIGN="MIDDLE">中央</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="RIGHT" VALIGN="MIDDLE">右中</TD>
　　　</TR>
　　　<TR>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="LEFT" VALIGN="BOTTOM">左下</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="CENTER" VALIGN="BOTTOM">中下</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="RIGHT" VALIGN="BOTTOM">右下</TD>
　　　</TR>
</TABLE>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。

　ALIGNで横方向を指定し、VALIGNで縦方向を指定しています。

　横方向はLEFT、CENTER、RIGHTで指定し、縦方向はTOP、MIDDLE、BOTTOMで指定します。

　TABLE内の背景色を指定することもできます。

　ここからサンプルに飛びます。

<TR>や<TD>に指定すれば、指定したセルに色指定出来ます。

　ここからサンプルに飛びます。

　TABLEの背景に画像を表示出来ます。

　ここからサンプルに飛びます。

<TD>タグでセルの背景に画像を表示する事も出来ます。

　ここからサンプルに飛びます。

　次にセルを連結してみましょう。

　まずは縦方向にセルを連結してみます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST37</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<TABLE BORDER=5 WIDTH="300" HEIGHT="300">
　　　<TR>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="LEFT" VALIGN="TOP">左上</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="CENTER" VALIGN="TOP">中上</TD>
　　　　　　<TD WIDTH="100" HEIGHT="300" ALIGN="RIGHT" VALIGN="TOP" ROWSPAN="3">右上</TD>
　　　</TR>
　　　<TR>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="LEFT" VALIGN="MIDDLE">左中</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="CENTER" VALIGN="MIDDLE">中央</TD>
　　　</TR>
　　　<TR>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="LEFT" VALIGN="BOTTOM">左下</TD>
　　　　　　<TD WIDTH="100" HEIGHT="100" ALIGN="CENTER" VALIGN="BOTTOM">中下</TD>
　　　</TR>
</TABLE>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。

最初の<TR>～</TR>が１行目を表していますが、右側のセルでROWSPAN指定する事により縦方向のセルを連結しています。

　このサンプルでは３行に指定しています。

　次に横方向にセルを連結してみます。

　ここからサンプルに飛びます。

最初の<TR>～</TR>が１行目を表しています、このサンプルでは１行目の３つのセルを横方向に連結しています。

<TABLE></TABLE>・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・表組である事を定義する。

<TABLE BORDER=数字>・・・・・・・・・・・・・・・・・・・・・・・・・・・・枠線の太さを指定する。

<TABLE BORDER=数字 WIDTH="幅" HEIGHT="高さ" >・・・・TABLEの幅、高さを指定する。

<TD WIDTH="幅" HEIGHT="高さ" >・・・・・・・・・・・・・・・・・・・TD（セル）の幅、高さを指定する。

<TD ALIGN="LEFT">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）の文字を左よりに指定する。

<TD ALIGN="CENTER">・・・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）の文字を中より（横方向）に指定する。

<TD ALIGN="RIGHT">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）の文字を右よりに指定する。

<TD VALIGN="TOP">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）の文字を上よりに指定する。

<TD VALIGN="MIDDLE">・・・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）の文字を中より（縦方向）に指定する。

<TD VALIGN="BOTTOM">・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）の文字を下よりに指定する。

<TD ROWSPAN="数字">・・・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）を縦方向に数字分連結します。

<TD COLSPAN="数字">・・・・・・・・・・・・・・・・・・・・・・・・・・・・TD（セル）を横方向に数字分連結します。

■ フレーム用のタグ

　フレームとは、ブラウザの画面上をいくつかに分割し、それぞれに違うページを表示させることです。

　分割方法も、縦に２分割したり横に２分割したり、３分割、４分割と自由に出来ます。

　ただし、少数ではありますがフレームに対応していないブラウザもありますので、注意は必要です。

　まずフレームの特徴として、その核となるＨＴＭＬファイルを作り、それぞれの分割画面分のＨＴＭＬファイルを作ります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST39</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
　　　　　　　<FRAMESET ROWS="80,*">
　　　　　　　　　　<FRAME SRC="frame01.html">
　
　　　　　　　　　　<FRAMESET COLS="150,*">
　　　　　　　　　　　　　<FRAME SRC="frame02.html">
　　　　　　　　　　　　　<FRAME SRC="frame03.html">
　　　　　　　　　　</FRAMESET>
　　　　　　　</FRAMESET>
　
</HTML>

　上の核になるフレームのソースを見ると、３分割してるのがわかります。

　それでは、それぞれのページを作って見ましょう。

　ここでは、『frame01.html』『frame02.html』『frame03.html』の３つが、それぞれフレームで分割してある部分に表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>frame01</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
　
<BODY TEXT="#000000" LINK="#FF0000" VLINK="#00FF00" ALINK="#0000FF" BGCOLOR="#00BFFF">
　
テーブル１
　
</BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>frame02</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
　
<BODY TEXT="#000000" LINK="#FF0000" VLINK="#00FF00" ALINK="#0000FF" BGCOLOR="#7FFFD4">
　
テーブル２
　
</BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>frame03</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
　
<BODY TEXT="#000000" LINK="#FF0000" VLINK="#00FF00" ALINK="#0000FF" BGCOLOR="#FFE4C4">
　
テーブル３
　
</BODY>
</HTML>

　さぁ、３分割したファイルも作りました。では、ここをクリックして、テーブルを使用したサンプルを見てみましょう。

　それでは、核になっているテーブルのソースを分解して見てみましょう。

　このROWSは縦に分割する事を意味します。

　『ROWS="80,*"』で上下に２分割している事がわかります。80と言うのは、上部は80ピクセルで、*と言うのは、下部はブラウザの残り全部を意味します。

　これは上部の80ピクセルに表示するページを表しています。

　このCOLSは横に分割する事を意味します。

　『COLS="150,*"』で左右に２分割している事がわかります。これは、先程上下に２分割した下部の部分をさらに左右に２分割してると言うことです。

　これは最初に上下２分割した下部の*の部分に、横に150ピクセルと残りの領域に２分割し表示するページを表しています。

　以上が、フレームの基本です。

　それでは先程のフレームのサンプルをカスタマイズしてみましょう。

　まずは境界線を変えてみます。

　FRAMESETに、オプションでBORDER属性を設定します。この例では0を設定しています。この数字で境界線の太さを決定します。

　ここからサンプルを見てみましょう。

　BORDER属性を設定してなかったり、設定してもInternetExplorerの場合は境界線を動かすことが出来てしまいます。

　それでは境界線を見る人が動かせないようにしてみましょう。

　NORESIZEを設定する事で、境界線を移動出来ないようにする事が出来ます。これで、上下の境界線は移動できなくなりました。

　ここからサンプルを見てみましょう。

　次にリンクを考えてみましょう。

　テーブル２のページを先程リンクの解説に使ったtest20.htmlを使ってみます。

　　　　　　　↓↓↓

　ここからサンプルを見てみましょう。

　リンクを設定したフレームが変わってしまいました。これを、フレーム３に表示するにはどうしたらいいでしょうか？

　これはフレームに名前を付けることで解決します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST43</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
　　　　　　　<FRAMESET ROWS="80,*">
　　　　　　　　　　<FRAME SRC="frame01.html" NAME="frame1">
　
　　　　　　　　　　<FRAMESET COLS="150,*">
　　　　　　　　　　　　　<FRAME SRC="test44.html" NAME="frame2">
　　　　　　　　　　　　　<FRAME SRC="frame03.html" NAME="frame3">
　　　　　　　　　　</FRAMESET>
　　　　　　　</FRAMESET>
　
</HTML>

　次にリンクページのtest20.htmlにオプションを追加し、test44.htmlと名前を付けましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST44</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FFFF" ALINK="#FFFF00" VLINK="#C0C0C0">
　
<A HREF="link/test01.gif" TARGET="frame3">サンプル画像１（280×300ピクセル）</A>
<A HREF="test02.gif" TARGET="frame3">サンプル画像２（280×280ピクセル）</A>
　
</BODY>
</HTML>

　ここからサンプルに飛びます。どうでしょうか？

　つまり、名前を付けることによって、表示するフレームを指定出来るのです。

　また、リンク時にフレームを解除したり別ページを開くためには、以下のようにします。

<A HREF="link/test01.gif" TARGET="_TOP">サンプル画像１（280×300ピクセル）</A>
<A HREF="test02.gif" TARGET="_BLANK">サンプル画像２（280×280ピクセル）</A>

　ここからサンプルに飛びます。

　TARGET="_TOP"でフレームの解除を、TARGET="_BLANK"で別ページを指定しています。

<FRAMESET></FRAMESET>・・・・・・・・・・・・・・・・・・・フレームを定義する。

<FRAMESET COLS="○○,△△">・・・・・・・・・・・・・・・横分割を指定。

<FRAMESET ROWS="○○,△△">・・・・・・・・・・・・・・・縦分割を指定。

<FRAMESET FRAMEBORDER="○">・・・・・・・・・・・・・フレームの境界線を設定。

<FRAME SRC="△" FRAMEBORDER="○">・・・・・・・フレームの境界線を設定。

<FRAME SRC="△" NORESIZE>・・・・・・・・・・・・・・・・・フレームの境界線を固定。