<BR>,<P>タグ
第１章 AAAAAAAA<BR> -- 改行が行われます。
第２章 BBBBBBBB<P> -- 改行と空白行が挿入されます。
第３章 CCCCCCCC<BR> -- 改行が行われます。
第１章 AAAAAAAA
第２章 BBBBBBBB
第３章 CCCCCCCC
空白文字の効果
第１章 A A A A A A A<BR> -- １文字ごとに１個の空白が入っています。
第２章 B B B B B<BR> -- １文字ごとに２個の空白が入っています。
第３章 C C C C<BR> -- １文字ごとに３個の空白が入っています。
第１章 A A A A A A A
第２章 B B B B B
第３章 C C C C
［注意］「章」の次の空白は全角の空白です。
インデント
ある範囲にわたって、文字の書き出しを下げ(左に空間を入れる）たい時があります。
<BLOCKQUOTE>〜</BLOCKQUOTE>タグを使うと、ウィンドウの幅の両側に空間を置くことができます。
<BLOCKQUOTE>〜</BLOCKQUOTE>でその範囲を囲みます。
<BLOCKQUOTE>〜</BLOCKQUOTE>は、文字列だけではなく、
画像、区切り線、表など、すべてのＨＴＭＬ表現に効果があります。
<BLOCKQUOTE>
第１章 AAAAAAAA<BR>
第２章 BBBBBBBB<BR>
第３章 CCCCCCCC<BR>
</BLOCKQUOTE>
第１章 AAAAAAAA
第２章 BBBBBBBB
第３章 CCCCCCCC
<BLOCKQUOTE>を使わない場合の表示例
第１章 AAAAAAAA
第２章 BBBBBBBB
第３章 CCCCCCCC
センタリング
・テキストや画像および表のセンタリングを行うには、
<CENTER>〜</CENTER>タグを使います。
・「改行」タグ、｢見出し」タグの場合は、オプション ALIGN=CENTERを加えることでセンタリングができます。
<CENTER>
AAAAAAAA<BR>
BBBBBBBBBBBBB<BR>
CCCCCCCCCCCCCCCCC<BR>
</CENTER>
<P ALIGN=CENTER>DDDDDDDD</P>
<H2 ALIGN=CENTER>EEEEEEEEEE</H2>
AAAAAAAA
BBBBBBBBBBBBB
CCCCCCCCCCCCCCCCC
DDDDDDDD
EEEEEEEEEE
右寄せ
右寄せは現在のところ、画像の右寄せおよび区切り線の右寄せがサポートされているだけです。
テキストの右寄せは後述の表組の応用でできます。
文字のサイズ
タイトル文字のサイズ
<Hn>〜</Hn>タグを使用します。
ｎは１〜６の６段階のサイズを表示できます。
数字が大きくなると文字は小さくなります。
文字は強調(太字)で空白行が挿入されます。
| サイズ | HTML | 表示 |
|
|---|
|
| サイズＨ１ | <H1>ABCDEF</H1> | ABCDEF |
| サイズＨ２ | <H2>ABCDEF</H2> | ABCDEF |
| サイズＨ３ | <H3>ABCDEF</H3> | ABCDEF |
| サイズＨ４ | <H4>ABCDEF</H4> | ABCDEF |
| サイズＨ５ | <H5>ABCDEF</H5> | ABCDEF |
| サイズＨ６ | <H6>ABCDEF</H6> | ABCDEF |
文章中の文字のサイズ
文字のサイズだけが変わります。
前述のＨｎ指定と逆にｎが大きいとサイズも大きくなります。
書式： <FONT SIZE=n>文字列</FONT> (n=1〜7)
<FONT SIZE=±n>文字列</FONT>
| ---ＨＴＭＬ--------------- | ---表示例-------- |
|---|
| <FONT SIZE=1>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=2>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=3>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=4>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=5>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=6>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=+1>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=+2>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=+3>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=+4>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=-1>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=-2>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=-3>ABCDEF</FONT> | ABCDEF |
| <FONT SIZE=-4>ABCDEF</FONT> | ABCDEF |
サイズを順に変えた例
ABCDEF<FONT SIZE=+1>ABCDEF</FONT><FONT SIZE=+2>ABCDEF</FONT><FONT SIZE=+3>ABCDEF</FONT>
ABCDEFABCDEFABCDEFABCDEF
文字飾り
区切り線
<HR>タグを使用します。
オプションによって｢線種｣｢太さ｣｢長さ｣｢位置｣が指定できます。
書式 <HR> <HR option>
区切り線の種類
区切り線には｢黒線｣と｢３Ｄ線｣があります。
｢３Ｄ線｣ <HR>
｢黒 線｣ <HR NOSHADE>
区切り線の太さ
区切り線の太さは、オプション SIZE=n を使います。
標準 <HR>
太さ１ <HR SIZE=1>
太さ２ <HR SIZE=2>
太さ３ <HR SIZE=3>
太さ４ <HR SIZE=4>
太さ５ <HR SIZE=5>
太さ10 <HR SIZE=10>
太さ20 <HR SIZE=20>
黒標準 <HR NOSHADE>
太さ１ <HR NOSHADE SIZE=1>
太さ２ <HR NOSHADE SIZE=2>
太さ３ <HR NOSHADE SIZE=3>
太さ４ <HR NOSHADE SIZE=4>
太さ５ <HR NOSHADE SIZE=5>
太さ10 <HR NOSHADE SIZE=10>
太さ20 <HR NOSHADE SIZE=20>
区切り線の長さ
区切り線の長さはオプション WIDTH=n 、または WIDTH=n% を使います。
WIDTH=n は n にピクセル数で長さ指定し、
WIDTH=n% は長さをウィンドウ幅に対する割合で指定します。
(インデント<BLOCKQUOTE>が指定されている場合は、インデント幅が100%になります。)
位置の基準は中央です。
ピクセル数指定
n=100 <HR WIDTH=100>
n=150 <HR WIDTH=150>
n=200 <HR WIDTH=200>
割合指定 （注 インデントしています）
30% <HR WIDTH=30%>
50% <HR WIDTH=50%>
70% <HR WIDTH=70%>
100% <HR WIDTH=100%>
区切り線の位置
区切り線の位置は｢左｣｢中央｣｢右｣が指定できます。
オプションは ALIGN= を使い、LEFT,CENTER,RIGHTを指定します。
位置の標準は中央です。
左 <HR WIDTH=30% ALIGN=LEFT>
中央 <HR WIDTH=30% ALIGN=CENTER>
右 <HR WIDTH=30% ALIGN=RIGHT>
リスト形式
箇条書きなどの用途で、リスト形式で表示するタグです。
一般的リスト
<UL><LI></UL>タグを使います。
表示例
HTML
<UL>
<LI>りんご
<LI>みかん
<LI>なし
<LI>ぶどう
<LI>もも
<LI>かき
</UL>
解説
<UL>〜;</UL>でリスト表示する部分を囲みます。
<LI>を各項目の前に付けます。末尾に<BR>を付ける必要はありません。
項目の先頭にマークが付きます。
リストは階層構造にできます。階層構造にしたとき階層ごとにマークが変わります。
リストの階層
表示例
HTML
<UL>
<LI>果物
<UL>
<LI>りんご
<LI>みかん
</UL>
<LI>野菜
<UL>
<LI>にんじん
<LI>だいこん
</UL>
</UL>
番号付リスト（数字）
<OL><LI>/OL>タグを使います。
開始番号を変えたいときは、オプション<LI VALUE=n>を使います。ｎで開始番号を指定します。
表示例
- りんご
- みかん
- なし
- ぶどう
- もも
- かき
HTML
<OL>
<LI>りんご
<LI>みかん
<LI>なし
<LI>ぶどう
<LI>もも
<LI>かき
</OL>
開始番号の指定
表示例
- りんご
- みかん
- なし
- ぶどう
- もも
- かき
HTML
<OL>
<LI VALUE=5>りんご
<LI>みかん
<LI>なし
<LI VALUE=20>ぶどう
<LI>もも
<LI>かき
</OL>
番号付リスト（アルファベット）
<OL><LI>/OL>タグを使い、オプションTYPE=Aを指定します。
開始番号を変えたいときは、オプション<LI VALUE=n>を使います。数値ｎで開始番号を指定します。
表示例
- りんご
- みかん
- なし
- ぶどう
- もも
- かき
HTML
<OL TYPE=A>
<LI>りんご
<LI>みかん
<LI>なし
<LI>ぶどう
<LI>もも
<LI>かき
</OL>
オプションをTYPE=aにしたときは、小文字になります。
表示例
- りんご
- みかん
- なし
- ぶどう
- もも
- かき
HTML
<OL TYPE=a>
<LI>りんご
<LI>みかん
<LI>なし
<LI>ぶどう
<LI>もも
<LI>かき
</OL>
番号付リスト（ローマ数字）
<OL><LI>/OL>タグを使い、オプションTYPE=Iを指定します。
開始番号を変えたいときは、オプション<LI VALUE=n>を使います。数値ｎで開始番号を指定します。
表示例
- りんご
- みかん
- なし
- ぶどう
- もも
- かき
HTML
<OL TYPE=I>
<LI>りんご
<LI>みかん
<LI>なし
<LI>ぶどう
<LI>もも
<LI>かき
</OL>
オプションをTYPE=iにしたときは、小文字になります。
表示例
- りんご
- みかん
- なし
- ぶどう
- もも
- かき
HTML
<OL TYPE=i>
<LI>りんご
<LI>みかん
<LI>なし
<LI>ぶどう
<LI>もも
<LI>かき
</OL>
定義型リスト
辞書のように、言葉とその説明などの表示をします。
<DL><DT><DD></DL>タグを使います。
表示例
- りんご
- [林檎](apple)・寒冷な地域で栽培されるバラ科の果樹。国光、紅玉、富士などがある。
- みかん
- [蜜柑](mandarin)・暖かい地方で栽培されているミカン科の果樹。ウンシュウミカン・キシュウミカンなど。
HTML
<DL>
<DT>りんご
<DD>{林檎](apple)・寒冷な地域で栽培されるバラ科の果樹。国光、紅玉、富士などがある。
<DT>みかん
<DD>[蜜柑](mandarin)・暖かい地方で栽培されているミカン科の果樹。ウンシュウミカン・キシュウミカンなど。
</DL>
解説
<DT>〜;</DL>でリスト表示する部分を囲みます。
<DT>を各項目の前に付けます。末尾に<BR>を付ける必要はありません。
<DD>を説明文の前に付けます。末尾に<BR>を付ける必要はありません。
表 組
単純な表
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE BORDER>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- <TABLE BORDER>〜</TABLE>に表を構成する要素を記述します。
BORDER は罫線の表示を指定します。
- <TR>〜</TR>に表の１行を構成する要素を記述します。
- <TD>〜</TD>にセルの内容を記述します。
- 表の幅はセルの文字数によって自動的に変わります。
- 標準では、セル内の文字は左詰めで表示されます。
罫線の無い表
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- 前記からBORDER指定をはずし、<TABLE>〜</TABLE>とします。
列タイトル付の表
| 列１ | 列２ | 列３ |
|---|
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE BORDER>
<TR><TH>列１</TH><TH>列２</TH><TH>列３</TH></TR>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- タイトル指定は<TD>〜</TD>に変えて<TR>〜</TR>を使用します。
- タイトル指定をすると、セルの文字は太字で、文字配意は中央になります。
行タイトル付の表
| 行１ | AAA1 | BBB1 | CCC1 |
|---|
| 行２ | AAA2 | BBB2 | CCC2 |
|---|
HTML
<TABLE BORDER>
<TR><TH>行１</TH><<TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TH>行２</TH><<TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- タイトル指定は<TD>〜</TD>に変えて<TR>〜</TR>を使用します。
- タイトル指定をすると、セルの文字は太字で、文字配意は中央になります。
行列タイトル付の表
| 列１ | 列２ | 列３ |
|---|
| 行１ | AAA1 | BBB1 | CCC1 |
|---|
| 行２ | AAA2 | BBB2 | CCC2 |
|---|
HTML
<TABLE BORDER>
<TR><TH></TH><TH>列１</TH><TH>列２</TH><TH>列３</TH></TR>
<TR><TH>行１</TH><<TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TH>行２</TH><<TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- 左上端のようにセル枠を表示しない時は、<TD></TD>または<TH></TH>とします。
- 空白セルの場合は<TD>(Space)</TD>または<TH>(Space)</TH>とします。
セルを横に結合した表
| 列１ | 列２と列３ |
|---|
| 行１ | AAA1 | BBB1 | CCC1 |
|---|
| 行２ | AAA2 | BBB2 | CCC2 |
|---|
HTML
<TABLE BORDER>
<TR><TH></TH><TH>列１</TH><TH COLSPAN=2>列２と列３</TH>
<TR><TH>行１</TH><<TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TH>行２</TH><<TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- セルを横方向に結合する場合は、<TH COLSPAN=n>〜</TH>を使用します。
結合するセルの数はnで指定します。
セルを縦に結合した表
| 列１ | 列２ | 列３ |
|---|
| 行１行２ | AAA1 | BBB1 | CCC1 |
|---|
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE BORDER>
<TR><TH></TH><TH>列１</TH><TH>列２</TH><TH>列３</TH></TR>
<TR><TH ROWSPAN=2>行１行２</TH><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- セルを縦方向に結合する場合は、<TH ROWSPAN=n>〜</TH>を使用します。
結合するセルの数はnで指定します。
表題の付加
表題
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE BORDER>
<CAPTION>表題</CAPTION>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- 表題を付けるには<CAPTION>〜</CAPTION>を使用します。
- 標準では表題は表の上部で表の中央に配置されます。
表題を下に付ける
表題
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE BORDER>
<CAPTION ALIGN=BOTTOM>表題</CAPTION>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- 表題を下に付けるには<CAPTION ALIGN=BOTTOM>〜</CAPTION>を使用します。
表の幅(絶対指定)
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE BORDER WIDTH=300>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- 表の幅は<TABLE WIDTH=n>のように指定します。
- ｎはピクセル(画素)数です。
- この幅指定の場合、ウィンドウの幅が表の幅より小さいと表の右側が表示できません。
- セルの文字数で自動設定される表幅より指定値が小さい場合は、この指定は無視されます。
表の幅(相対指定)
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
HTML
<TABLE BORDER WIDTH=50%>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
解説
- 表の幅は<TABLE WIDTH=n%>のように指定します。
- ｎ%はウィンドウの幅に対する割合です。
ウィンドウの幅を変えれば表の幅も自動的に変わります。
- セルの文字数で自動設定される表幅より指定値が小さい場合は、セル内を複数行にして表幅が調整されます。
セルの幅
HTML
<TABLE BORDER WIDTH=80%>
<TR><TD WIDTH=20%>20%</TD><TD WIDTH=50%>50%</TD><TD>無指定</TD></TR>
</TABLE>
解説
- セルの幅は<TD WIDTH=n%>〜</TD>
または<TH WIDTH=n%>〜</TH>のように指定します。
- ｎ%は表の幅に対する割合です。
- セル幅に文字数が入りきらないときは、セル内を自動的に複数行にして表示されます。
セル内の複数行化
HTML
<TABLE BORDER WIDTH=80%>
<TR><TD WIDTH=20%>セル幅は<BR>20%<BR>です。</TD><TD WIDTH=50%>50%</TD><TD>無指定</TD></TR>
</TABLE>
解説
- セルの文字列：｢セル幅は20%です。｣を複数行で表示するには、
｢セル幅は<BR>20%<BR>です。｣のように、改行タグ<BR>を必要に応じて挿入します。
- セル幅が複数行になった場合、他の｢行数の少ないセル｣の文字位置は標準で中央高さに配置されます。
セル内の文字位置(水平方向)
通常行
タイトル行
HTML(通常行)
<TABLE BORDER WIDTH=50%>
<TR><TD ALIGN=LEFT>左</TD><TD ALIGN=CENTER>中央</TD><TD ALIGN=RIGHT>右</TD></TR>
<TR><TD ALIGN=RIGHT>右</TD><TD>無指定</TD><TD ALIGN=LEFT>左</TD></TR>
</TABLE>
HTML(タイトル行)
<TABLE BORDER WIDTH=50%>
<TR><TH ALIGN=LEFT>左</TH><TH ALIGN=CENTER>中央</TH><TH ALIGN=RIGHT>右</TH></TR>
<TR><TH ALIGN=RIGHT>右</TH><TH>無指定</TH><TH ALIGN=LEFT>左</TH></TR>
</TABLE>
解説
- 文字位置はセルごとに指定します。
- 指定は ALIGN= で、LEFT,CENTER,RIGHT が指定できます。
- 位置指定が無い場合は、 ｢通常行（<TD>）は左｣になり、｢タイトル行（<TH>）は中央｣になります。
セル内の文字位置(垂直方向)
| タイトル行 | 通常行 |
|---|
･
上
･ | 上 | 上 |
|---|
･
中央
･ | 中央 | 中央 |
|---|
･
下
･ | 下 | 下 |
|---|
･
無指定
･ | 無指定 | 無指定 |
|---|
HTML
<TABLE BORDER WIDTH=50%>
<TR><TH></TH><TH>タイトル行</TH><TD>通常行</TD></TR>
<TR VALIGN=TOP><TH>･<BR>上<BR>･</TH><TH>上</TH><TD>上</TD></TR>
<TR VALIGN=CENTER><TH>･<BR>中央<BR>･</TH><TH>中央</TH><TD>中央</TD></TR>
<TR VALIGN=BOTTOM><TH>･<BR>下<BR>･</TH><TH>下</TH><TD>下</TD></TR>
<TR><TH>･<BR>無指定<BR>･</TH><TH>無指定</TH><TD>無指定</TD></TR>
</TABLE>
解説
- 文字位置は行ごとに指定します。
- 指定は VALIGN= で、TOP,CENTER,BOTTOM が指定できます。
- 位置指定が無い場合は、｢中央｣になります。
罫線の太さとセル内のスペース
下図に示したスペースが<TABLE>タグのオプションで変えることができます。
HTML
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=15>
<TR><TD>AAA1</TD><TD>BBB1</TD><TD>CCC1</TD></TR>
<TR><TD>AAA2</TD><TD>BBB2</TD><TD>CCC2</TD></TR>
</TABLE>
| AAA1 | BBB1 | CCC1 |
| AAA2 | BBB2 | CCC2 |
画像の表示
画像の挿入
ＨＴＭＬ中で画像を挿入したい場所に<IMG SRC="画像ファイル名">のようにして画像ファイル名を記述します。
画像ファイルの保存場所が違う場合などは、<IMG SRC="パス名/画像ファイル名">のように必要に応じてパス名を含めます。
HTML
ＨＴＭＬ中で画像を挿入したい場所に<IMG SRC="Bfly.gif">を表示します。
表示例
ＨＴＭＬ中で画像を挿入したい場所に
を表示します。
画像と文字の位置
通常、画像の下端が文字の下端に一致するよう表示されます。
文字の下端を画像の｢中央｣、あるいは文字の上端を画像の上端に一致するように指定できます。
HTML
文字の下端を画像の｢中央｣に<IMG SRC="Bfly.gif" ALIGN=CENTER>表示します。
表示例
文字の下端を画像の｢中央｣に表示します。
HTML
文字の上端を画像の｢上端｣に<IMG SRC="Bfly.gif" ALIGN=TOP>表示します。
表示例
文字の上端を画像の｢上端｣に表示します。
画像の左寄せと文字の回り込み
画像を片側に寄せ、横の空間に複数行の文字を表示することができます。
HTML
<IMG SRC="bfly.gif" ALIGN=LEFT>複数行の文字を<BR>画像の右空間に<BR>表示します。<BR><BR><BR><BR><BR>
(文末の<BR><BR><BR><BR><BR>は空間を調整するために必要数を記述します。)
表示例
複数行の文字を
画像の右空間に
表示します。
画像の右寄せと文字の回り込み
画像を片側に寄せ、横の空間に複数行の文字を表示することができます。
HTML
<IMG SRC="bfly.gif" ALIGN=RIGHT>複数行の文字を<BR>画像の左空間に<BR>表示します。<BR><BR><BR><BR><BR>
(文末の<BR><BR><BR><BR><BR>は空間を調整するために必要数を記述します。)
表示例
複数行の文字を
画像の左空間に
表示します。
画像と文字の間隔
画像と文字の間隔を水平方向、垂直方向それぞれ独立に指定できます。
HTML
aaaaaaaaaaaaaaaaaaa<BR>
<IMG SRC="bfly.gif" ALIGN=LEFT VSPACE="20" HSPACE="30">
bbbbb<BR>
ccccc<BR>
ddddd<BR>
eeeee<BR>
fffff<BR>
ggggg<BR>
hhhhh<BR>
iiiii<BR>
jjjjj<BR>
表示例
aaaaaaaaaaaaaaaaaaa
bbbbb
ccccc
ddddd
eeeee
fffff
ggggg
hhhhh
iiiii
jjjjj
間隔指定なしの表示例
aaaaaaaaaaaaaaaaaaa
bbbbb
ccccc
ddddd
eeeee
fffff
ggggg
hhhhh
iiiii
jjjjj
画像の中央表示
画像を中央に表示するには<CENTER>タグを使用します。
HTML
<CENTER><IMG SRC="bfly.gif"></CENTER>
表示例
透過画像
非透過画像
通常、非透過画像は長方形であり、背景色を持っています。
左の画像の背景色は白です。
透過画像
透過画像は画像の背景色を透明化したものです。
画像の背景色を透明化することにより、透明になった部分はバックグラウンドの色や画像が見えるようになります。
透過画像の作成方法
Macintosh:
Graphick Converter [シェアウェア]
( ftp://ftp.iij.ad.jp/pub/info-mac/gst/grf/ )
Transparency [フリーソフト]
( ftp://ftp.iij.ad.jp/pub/info-mac/gst/grf/ )
Windows:
LViewPro [シェアウェア]
( ftp://oak.oakland.edu/SimTel/win3/graphics/lviewplb.zip )
背景画像
----------------
ハイパーリンク
HTML = Hyper Text Makeup Program
ハイパーリンク概要
ハイパーリンクとは文字列や画像などをクリックする事で別の場所へ移動することを言います。
移動には
・同じページ内への移動
・他のページや他のページの特定場所のへ移動
・他のページの特定場所へ移動
・他のサーバーや他のサーバーの特定場所への移動
があります。
移動には「何処から」の関係が必要でこの関係をリンクといいます。
「何処から」は、文書内の文字列や画像に設定します。
「何処へ」は、文書内の文字列や画像、他のＨＴＭＬ名を指定します。
これらの指定には<A>〜</A>タグを使用します。
同じページ内へのリンク
例
目次へ移動します
HTML
<A HREF="#CH-00">詳細目次へ移動します</A>
A HREF="#CH-00"><IMG SRC="bfly.gif"></A>
解説
「文字列」および「画像」にリンクを付けた例です。
<A>〜</A>タグを使い、〜の部分に「ここから」を設定する文字列や画像を記述します。
異動先は、オプションHREF="＊＊＊＊"によって、＊＊＊＊部に異動先を指定します。
上の例では「ここから」に「詳細目次へ移動します」の文字列 あるいは「画像」を設定し、異動先に「#CH-00」を指定しています。
同じページ内の移動では移動先を示す符号「#CH-00」が何処か明確にする必要があります。
「#CH-00」の#は異動先が「同じページ」であることを指定するものです。
異動先のＨＴＭＬ文には
<A NAME="CH-00">詳細目次</A>
と指定されています。すなわち、異動先のＨＴＭＬの文字列「詳細目次」に<A>タグが付けられ、
オプションNAME="＊＊＊"で「CH-00」という符号（異動先の名前）が当てられています。
他のページや他のページの特定場所へのリンク
例
ハイパーのテスト
HTML
<A HREF="HYPER.HTM">ハイパーのテスト</A> 他のページ
<A HREF="HYPER.HTM#CHAPTER1">ハイパーのテスト</A> 他のページの特定位置
解説
上の「ハイパーのテスト」の文字列をクリックすると、テストのページ が表示されます。
テストのページの「戻る」をクリックすると、ここに戻ります。
異動先は、オプションNAME=""で「HYPER.HTM」という名称のファイル名を指定しています。
他のページの特定位置に移動するには、ファイル名に続いて「#」と位置名称を記述します。
他のサーバーや他のサーバーの特定場所へのリンク
メール
画面の閲覧者からメールを発送できるようになります。
下の、メールの発送の文字をクリックしてみて下さい。
メールの発送
メール発送のウィンドウが開きます。
すでに宛先が設定されているので、タイトルと本文を書けばメールが発送できます。
HTML例
<A HREF="mailto:skivaca@ylw.mmtr.or.jp">メールの発送</A>
解説
ハイパーリンクの行き先に "mailto:メールアドレス"と指定します。
フォーム
ページの閲覧者からアンケートや要望など記入した文字や選択した番号・項目名を得るための画面を表示します。
フォームのデータを得るためには送られてきたデータの処理に対応したＣＧＩと呼ばれるプログラムがサーバーに必要です。
フォームの表示例を以下に示します。
ＨＴＭＬ
<FORM METHOD="POST" ACTION="CGI5.EXE/REQUEST.HFO">
名前：<INPUT NAME="Name" SIZE=20 MAXLENGTH=30>
<p>
一番好きな科目：<INPUT TYPE=RADIO NAME="Daisuki" VALUE="国語" CHECKED>国語
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="英語">英語
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="算数">算数
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="理科">理科
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="社会">社会
<p>
好きな科目：<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="A">国語
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="B">英語
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="C">算数
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="D" CHECKED>理科
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="E">社会
<p>
一番嫌いな科目：<SELECT NAME="Daikirai">
<OPTION>国語
<OPTION>英語
<OPTION SELECTED>算数
<OPTION>理科
<OPTION>社会
</SELECT>
<p>
嫌いな科目：<SELECT NAME="Daikirai" SIZE=3 MULTIPLE>
<OPTION>国語
<OPTION SELECTED>英語
<OPTION>算数
<OPTION SELECTED>理科
<OPTION>社会
</SELECT>
<P>
要望：<TEXTAREA NAME="Comment" ROWS=4 COLS=30>はじめまして。･･････････</TEXTAREA>
<p>
<INPUT TYPE=SUBMIT VALUE="送信">
<INPUT TYPE=RESET VALUE="入力クリア">
</FORM>
解説
-
フォームの領域全体を
<FORM METHOD="POST" ACTION="******">〜</FORM>
タグげ囲みます。
フォームタグのオプションMETHODには"POST"の他に"GET"があります。通常"POST"がよく使われます。ここでは「METHOD="POST"」で解説します。
フォームタグのオプションACTION="*****"は、フォームのデータを受け取ったときに、このデータを処理するプログラムを指定します。また、このプログラムに与える付加情報を併せて指令することができます。
指定例： ACTION="pass/cgi-name.exe/pass/request.lst"
pass1: プログラムのパス
cgi-name.exe: プログラム名
pass2: データ保存用ファイルへのパス
request.lst: データ保存用ファイル名
- ●文字入力フィールド
-
<INPUT NAME="Name" SIZE=20 MAXLENGTH=30>
フィールド名がNameで、入力枠の長さが20、入力できる文字数が30になります。
- ●選択ボタン(ラジオボタン)フィールド
- <INPUT TYPE=RADIO NAME="Daisuki" VALUE="国語" CHECKED>国語
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="英語">英語
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="算数">算数
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="理科">理科
<INPUT TYPE=RADIO NAME="Daisuki" VALUE="社会">社会
幾つかのボタンから１つを選択します。他のボタンを押すとそれに切り替わります。
「英語」のボタンを押すと、フィールド名がDaisukiで値が「英語」が得られます。
フィールド名はNAME=、値はVALUE=で指定されるものになります。
あらかじめ、選択項目を決めておきたい場合は、どれか１つに「CHECKED」のオプションを付けておきます。
- ●選択ボタン(チェックボタン)フィールド
- <INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="A">国語
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="B">英語
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="C">算数
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="D" CHECKED>理科
<INPUT TYPE="CHECKBOX" NAME="Suki" VALUE="E">社会
幾つかのボタンから選択します。複数の選択ができます。選択/取り消しはクリックで交互に替わります。「英語」と「算数」を選択すると、フィールド名Sukiで値が「B」およびフィールド名Sukiで値が「C」のデータが得られます。
- ●ポップアップリスト選択フィールド
- <SELECT NAME="Daikirai">
<OPTION>国語
<OPTION>英語
<OPTION SELECTED>算数
<OPTION>理科
<OPTION>社会
</SELECT>
選択する項目を<OPTION>タグで指定します。
選択する項目の全てを<SELECT NAME="****">〜</SELECT>で囲みます。
あらかじめ、選択項目を決めておきたい場合は、項目の１つに「SELECTED」のオプションを付けておきます。
- ●リスト選択フィールド
- <SELECT NAME="Daikirai" SIZE=3 MULTIPLE>
<OPTION>国語
<OPTION SELECTED>英語
<OPTION>算数
<OPTION SELECTED>理科
<OPTION>社会
</SELECT>
<SELECT>タグにオプションを付けた場合です。
オプションSIZE=nで表示する項目数を指定します。SIZE=1の場合はポップアップリストになります。
オプションMULTIPLEを付けると複数項目の選択ができます。
- ●文字ボックスフィールド
- <TEXTAREA NAME="Comment" ROWS=4 COLS=30>はじめまして。･･････････</TEXTAREA>
スクロール可能な文字入力領域を表示します。行数をROWS=nで、１行の文字数をCOLS=nで指定します。
<TEXTAREA>〜</TEXTAREA>で囲まれる部分に文字列を入れておくと、文字列があらかじめボックスに表示されます。
- ●送信ボタン
- <INPUT TYPE=SUBMIT VALUE="送信">
送信ボタンを表示します。
VALUE="***"で送信ボタンの上に表示する文字を指定します。
- ●リセットボタン
- <INPUT TYPE=RESET VALUE="入力クリア">
リセットボタンを表示します。ボタンを押すと全ての項目が初期化されます。
VALUE="***"でリセットボタンの上に表示する文字を指定します。
特殊文字の書式
特殊文字 書式
< <
> >
& &
" "
タグ一覧
<A HREF="****">〜</A> リンクの設定
**** ファイル名（パスを含む）
#**** 同一ページの指定場所名
****#**** ファイル名とその中の指定場所名
http://**** 他のサーバー名または他のサーバーのファイル名
http://****#**** 他のサーバーおよびファイル名とその中の特定場所名
ftp://**** ＦＴＰサーバー名またはサーバー名とパスを含むファイル名
mailto:**** メールアドレス
<A NAME="****">〜</A> ページ内の特定場所の名前付け
<B>〜</B> 太文字（強調）
<BLINK>〜</BLINK> 文字の点滅
<BLOCKQUOTE>〜</BLOCKQUOTE> インデント
<BODY>〜</BODY> ＨＴＭＬ本文の範囲
<BR> 改行
<CITE>〜</CITE> 斜体
<CENTER>〜</CENTER> 中央揃え
<CODE>〜</CODE> 等幅フォント
<DL><DT>〜<DD>〜</DL> 定義付けリスト
<EM>〜</EM> 斜体
<FONT SIZE=n;>〜</FONT> n=1〜7 文字サイズ
<FONT SIZE=±n;>〜</FONT>
<HEAD>〜</DEAD> ヘッダーの範囲
<Hn>〜</Hn> n=1〜6 見出し文字サイズ
<Hn ALIGN=center>〜</Hn> n=1〜6 見出し文字サイズと中央揃え
<HR> 区切り線（標準）
<HR option> 区切り線
ALIGN=left|center|right 区切り線の位置
NOSHADE 黒区切り線
SIZE=n 区切り線の太さ
WIDTH=n|n% 区切り線の長さ（幅）
<HTHL>〜</HTML> ＨＴＭＬ文の全体範囲
<IMG SRC="***" option> 画像の表示
ALIGN=left|right 画像の位置
ALIGN=top|center|bottom 画像と文字位置
HSPACE="n" 画像と文字の横間隔
VSPACE="n" 画像と文字の縦間隔
<I>〜</I> 斜体文字
<KBD>〜</KBD> 等幅フォント
<OL><LI>〜</OL> 番号付リスト
<OL option1><LI option2>〜</OL>
option1: TYPE=A|a|I|i 番号の形態の指定
option2: VALUE=n 番号値の指定
<P> 段落
<P ALIGN=center>〜</P> 段落と中央揃え
<PRE>〜</PRE> プリフォーマット・等幅フォント
<STRONG>〜</STRONG> 太字
<TABLE option1> 表 組
<CAPTION option2>〜</CAPTION>
<TR option3>
<TH option4>〜</TH>
<TD option4>〜</TD>
</TR>
</TABLE>
option1: BORDER 罫線をつける
BORDER=n 表枠線の幅
CELLSPACING=n 罫線の幅
CELLPADDING=n セル枠と文字の間隔
WIDTH=n|n% 表の幅
option2: ALIGN=top|bottom 表題の位置
option3: VALIGN=top|center|bottom 文字の上下位置
option4: COLSPAN=n セルの横連結
ROWSPAN=n セルの縦連結
WIDTH=n|n% セルの幅
ALIGN=left|center|right 文字の左右位置
<TITLE>〜</TITLE> タイトルの範囲
<TT>〜</TT> 等幅フォント
<UL><LI>〜</UL> 一般的なリスト
<VAR>〜</VAR> 斜体
