Chapter 3
リストと表組み
| <UL><LI>〜</UL> |
行頭に・などの記号をつけて、インデントした箇条書きリストを作成します。
<UL>は、リストの形式を<LI>は、リストの項目を指定します。
<UL>のみだと意味を持たないので、必ず<LI>と併用して使います。
<LI>には終タグはありません。また、<UL>タグを入れ子にするとリストが階層化されます。
下に例を示します。
<UL><LI>A階層項目a
<UL><LI>B階層項目a
<UL><LI>C階層項目a
<LI>C階層項目b
</UL><LI>B階層項目b
</UL><LI>A階層項目b
</UL>
これを表示させると、
このようになります。
| <OL><LI>〜</OL> |
このタグは上のタグと使い方は同じですが、●などの記号のかわりに番号を自動でふってくれます。
| <DL><DT>〜<DD>〜</DL> |
これは、上２つのような箇条書きリストではなくて、見出し語とその内容にあたる文章を１組にしてリストにしたものです。これも上のタグと同じで対にして使わなければ意味がありません。
<DL>がリストの形式をあらわしていて、<DT>が見出し語、<DD>が内容です。
これを
<DL><DT>今日の日記<DD>今日は田上さんと公園でブランコに乗りました。とても楽しかったです。明日は吉田君とすべり台で遊びたいです。おしまい。</DL>
こう書いて表示させると
と、このようになります。
| <BLOCKQUOTE>〜</BLOCKQUOTE> |
これは通常、引用文を明示するためのもので、リストとは違いますが、このタグではさんだ文章は前後の文章から切り離されて上下左右にスペースがとられた形としてこのように表示できます。
次に表組みの説明に入ります。これはただ、表を作るだけでなく使い方次第ではかなり便利なタグです。
| <TABLE>〜</TABLE> |
このタグに挟まれた部分を表組みとして定義します。セル内容に関しては後で記述します。これには以下の属性が付けられます。
| <TABLE& BORDER=外枠線の幅>〜</TABLE> |
これを指定しないとBORDER=1として表示されます。これを0にすると枠線が消えます。数字を大きくすると表の回りが立体的に見えます。これを利用してタイトルロゴがなくてもそれらしいものが作れちゃいます。
| <TABLE CELLPADDING=枠線とセル内容との間隔>〜</TABLE> |
これは、ピクセル単位で枠線とセル内のデータとの間隔を調整できます。
指定しないと１とみなされます。
BORDER=0で、枠線がなくてもセル内データとの間隔をとります。
| <TABLE CELLSPACING=枠線幅>〜</TABLE> |
これもピクセル単位で指定します。指定しないと2とみなされます。
BORDER属性では外枠が立体的になって枠線が太くなりましたが、これは平面的に枠線が太くなります。
| <TABLE WIDTH=表幅>〜</TABLE> |
表全体の幅をピクセル単位の絶対値かブラウザの幅のパーセンテージで指定します。
| <TABLE HEIGHT=表の高さ>〜</TABLE> |
表全体の高さをピクセル単位の絶対値か表示されてるページのパーセンテージで指定します。
| <TABLE ALIGN="right|left">〜</TABLE> |
rightと指定すると、<TABLE>〜</TABLE>の後に入力した文が表の左側に表示されます。つまり表が文の右側にくるという意味ですね。
当然leftは、その逆です。
ここからは<TABLE>〜</TABLE>タグに挟まれるタグの説明です。
| <TR>〜</TR> |
このタグで挟まれたものを表の一行としてみなします。そしてこれにも属性がつけられます。
| <TR ALIGN="right|center|left">〜</TR> |
rightかcenterかleftを指定することで、セル内に配置されたデータ一行分全ての水平（左右）方向の揃え方を指定できます。
| <TR VALIGN="top|middle|bottom">〜</TR> |
topかmiddleかbottomを指定することで、セル内に配置されたデータ一行分全ての垂直（上下）方向の揃え方を指定できます。
ここからやっと、<TABLE><TR>〜</TR></TABLE>タグに挟まれるタグの説明です。
つまりデータが入るセルに対して使うタグです。
| <TH>〜</TH> |
見出しを表示するセルの内容をタグの間に書きます。<TH>〜</TH>タグと<TD>〜</TD>タグの違いは <TH>〜</TH>タグの内容はデフォルトで水平・垂直ともに中央揃えで表示され、テキストは太字で表示されることです。
| <TD>〜</TD> |
こちらはデータを入れる通常のセルを指定するタグです。内容はデフォルトで水平方向が左揃え、垂直方向は中央揃えで表示されます。このタグの中にはHTMLの、どのような要素も入れることができます。（音楽はダメ）
例えば画像を入れたり、リンクを貼ったり、このセルの中にさらに表を作ることもできます。
（<TH>〜</TH>タグでも出来ますが通常は<TD>〜</TD>タグを使った方がいいでしょう。）
| <TD ALIGN="right|center|left">〜</TD> |
rightかcenterかleftを指定することで、セル内に配置されたデータの水平（左右）方向の揃え方を指定できます。
| <TD VALIGN="top|middle|bottom">〜</TD> |
topかmiddleかbottomを指定することで、セル内に配置されたデータの垂直（上下）方向の揃え方を指定できます。
| <TD NOWRAP>〜</TD> |
セル内で改行を禁じます。属性はありません。
| <TD WIDTH=セル幅>〜</TD> |
セル幅を指定します。指定しないと同じ列の一番長い文章にあわせて表示されます。
| <TD HEIGHT=セルの高さ>〜</TD> |
セルの高さを指定します。
| <TD BGCOLOR="背景色">〜</TD> |
セルの背景色を指定できます。色の指定の仕方は文字やバックグラウンドの色の指定と同じ方法です。
| <TD ROWSPAN=縦方向にまたがるセル数>〜</TD> |
複数行にまたがるセルを定義します。
| <TD COLSPAN=横方向にまたがるセル数>〜</TD> |
複数行にまたがるセルを定義します。
テーブルタグは便利なんですけどわかりにくいかもしれないです。書き方をここで書いておきます。
<CENTER>
<TABLE BORDER=10><TR>
<TD BGCOLOR="#FF00FF" ALIGN="CENTER">
<FONT SIZE=5><B>WELCOME TO<BR>THIS
HOMEPAGE</B></FONT>
</TR>
</TABLE></CENTER>
見本です。
| A | ||
|---|---|---|
| B | A1,B1 | A2,B1 |
| A1,B2 | A2,B2 | |
| A1,B3 | A2,B3 | |
<TABLE BORDER=2 ALIGN="LEFT">
<TR><TH COLSPAN=3>A</TH></TR>
<TR><TH
ROWSPAN=3>B</TH><TD>A1,B1</TD><TD>A2,B1</TD></TR>
<TR><TD>A1,B2</TD><TD>A2,B2</TD></TR>
<TR><TD>A1,B3</TD><TD>A2,B3</TD></TR>
</TABLE>
フレームを使って画面を分割して複数のHTMLファイルを同時に表示する方法を説明したいと思います。
| <FRAMESET>〜</FRAMESET> |
表示するHTMLファイルはそれぞれ、普通のHTMLですが、表示をさせる為のHTMLファイルの方は<BODY>〜</BODY>タグがなく、そのかわりに<FRAMESET>〜</FRAMESET>タグを使います。
そしてこれは<TABLE>〜</TABLE>タグと同様にいろいろな組み合わせで分割させることができます。
ここで、注意しなければいけないのはフレーム機能に対応してないブラウザを使ってる人のために
<NOFRAME>〜</NOFRAME>も上のタグの後に書いてあげることです。
HTMLでは、機能しないタグには何の表示もでないので〜のところにはフレーム機能が対応できないブラウザのユーザーにメッセージのようなものを書いてあげるといいかもしれません。
| <FRAMESET RORS=高さ１，高さ２，・・・>〜</FRAMESET> |
これはページの上下方向に分割する高さと数を指定します。高さはピクセルか、パーセンテージであらわしますが、その場合全体を合計して１００％になるように指定しなければなりません。
<FRAMESET ROWS=15%,25%,60%>
のようにです。こう指定するとページは３つに分割されて上から15%,25%,60%の割合になります。
| <FRAMESET COLS=幅１，幅２，・・・>〜</FRAMESET> |
ページの左右に分割する幅と数を指定します。指定の仕方はROWSと同じです。
また、上下左右の分割を同時に指定したい場合は下のようにします。
<FRAMESET COLS=40%,60% ROWS=40%,60%>
これで画面は４つに分割された事になります。
| <FRAME SRC="URL"> |
<FRAMESET>〜</FRAMESET>で、分割されたフレームに実際に表示する
HTMLファイルを指定します。URLにはリンクの時と同じでHTMLファイル名や、他のサイトの完全なURLを記入します。
分割したフレームセルに割り当てられる順番は左から右にまた上から下になります。
終タグはありません。
| <FRAME SRC="URL" NAME="フレーム名"> |
これを指定することによってリンクを貼りたい時にどこのフレームセル内に表示させるかを指定することが可能になります（ターゲットウィンドウ機能）。例えばページの左側に目次でそこをクリックすると、右側にその内容が表示されるというふうにです。
ここまでの書き方の例です。
<HTML>
<HEAD>
<TITLE>フレーム</TITLE>
</HEAD>
<FRAMESET ROWS=20%,80%>
<FRAME SRC=1.htm name="up">
<FRAMESET COLS=20%,80%>
<FRAME SRC=2.htm name"left">
<FRAME SRC=3.htm mame"right">
</FRAMESET>
</FRAMESET>
<NOFRAME>
<BODY>
このブラウザでは内容が表示できません。
</BODY>
</NOFRAME>
</HTML>
| <FRAME SRC="URL" MARGINWIDTH=左右余白> |
ピクセル単位で指定します。フレームセル内に表示されるHTMLファイルのフレームセル内での左右の余白を指定します。余白は左右同じになります。
| <FRAME SRC="URL" MARGINHEIGHT=上下余白> |
余白の上下の指定です。これは上のMARGINWIDTHと両方を指定しない場合は、 10ピクセルで表示されますが、どちらかひとつを省略すると省略された他方は０ピクセルとして表示されます。
| <FRAME SRC="URL" SCROLLING="yes|no|aoto"> |
指定しないとautoとして設定されるので特別の意志がない限り指定する必要はありませんが、フレームセルフレームセル内に表示された内容を敢えてスクロールさせたい時や、スクロールさせたくない時に使います。ただし、スクロールさせないと全ての内容を表示させることはできません。
| <FRAME SRC="URL" NORESIZE> |
分割されたフレームは境界線をドラッグすると大きさを変えることができますが、これを指定しておけば、フレームセルの大きさをかえることが出来なくなります。
フレームに表示されるHTMLファイル内で使うタグの説明です。
| <A HREF="URL" TARGET"フレームセル名">ホットテキスト</A> |
ターゲットウィンドウ機能をつかってリンクをさせる方法です。このタグは実際に表示するHTMLファイル内で使います。
先程の例を使って説明すると、
１は1.htmが表示されていてフレームセル名はup
２は2.htmが表示されていてフレームセル名はleft
３は3.htmが表示されていてフレームセル名はrightとなってます。
例えば、1.htmを見出しにして、2.htmを目次にします。そうするとrightというフレームセル内には
3.htmが表示されてますが、ここに2.htmの目次ででリンクさせたHTMLファイルを表示させたい時は
<A HREF="4.htm" TARGET"right">４つ目のファイル</A>
と、このように書けば目次の４つ目のファイルというホットテキストをクリックすることで、4.htmがrightの場所、つまり3.htmが表示されていた場所に表示されることになります。
| <BASE TARGET"フレームセル名"> |
これはリンクの時にいちいち指定するのではなく、このHTMLファイルに貼ってあるリンクの表示先はすべてここだよと、最初に指定してしまう方法です。
これは<HEAD>〜</HEAD>の中に書きます。
これらで大切なのはフレームセル名は半角英数字しか使えないことです。
TARGET="_top"
これを指定するとリンク先を表示する際に、全てのフレームを解除します。したがって、他人のページにリンクする際には必ず付けて下さい。
番外編
インターネットエクスプローラーでしか表示できないちょっと面白いスクロール文字のタグの説明。
| <MARQUEE>〜</MARQUEE> |
このタグではさまれた内容がスクロールして表示できます。ネットスケープでは文字は表示されますがスクロールはしません。
| <MARQUEE BGCOLOR="背景色">〜</MARQUEE> |
スクロールする文字の背景色を指定できます。色の指定のしかたは他のものと同じです。
| <MARQUEE HEIGHT=エリアの高さ>〜</MARQUEE> |
スクロールする文字の背景の高さを指定できます。ピクセルかパーセンテージで指定します。
| <MARQUEE WIDTH=エリアの幅>〜</MARQUEE> |
スクロールする文字の背景の幅を指定できます。ピクセルかパーセンテージで指定します。
| <MARQUEE ALIGN="top|middle|bottom">〜</MARQUEE> |
マーキーエリアが或る程度の幅があれば、これを指定することで文字の位置を調整できます。
| <MARQUEE DIRECTION="left|right">〜</MARQUEE> |
leftは、右から左に文字が流れます。
rightは、左から右に文字が流れます。
指定しないとleftとして表示されます。
| <MARQUEE BEHAVIOR="scroll|slide|alternate">〜</MARQUEE> |
scrollは、ページを横切る動きを繰り返します。
slideは、一方から文字が現れ、ページの端で停止します。
alternateは、文字がいったりきたりします。
指定しないとscrollとして表示されます。
| <MARQUEE LOOP=回数>〜</MARQUEE> |
スクロールする回数を指定します。指定しないと無限です。
ただし、BEHAVIOR属性でscrollとした場合、（または何も指定しなかった場合）これを指定すると、表示回数が終了したら文字は何も表示されません。