HTML逆引きリファレンス


〜〜〜〜〜〜〜〜〜〜〜〜〜
ドキュメントに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

ドキュメント構成を記述する
=============
書式
        <HTML>  </HTML>
        <HEAD>  </HEAD>
        <BODY>  </BODY>


        <HTML>
        <HEAD>
        ドキュメントのタイトルや特徴(基本的に画面に表示されない)
        </HEAD>
        <BODY>
        ドキュメントで実際に表示される内容
        </BODY>
        </HTML>

タイトル、URLを記述する
=============
書式
        <TITLE>  </TITLE>
        <BASE>

説明: 記述しているファイルのURLを記載する場合に<BASE>を使う。


        <HTML>
        <HEAD>
        <TITLE>Let's Make HOMEPAGE</TITLE>
        <BASE>http://www.*****/
        </HEAD>
        <BODY>
        ドキュメントで実際に表示される内容
        </BODY>
        </HTML>

アドレス、コメントを入れる
=============
書式
        <ADDRESS> </ADDRESS>
        <!--コメント内容-->

説明: アドレスの文字は斜体で表示される。


        <ADDRESS>name@name.co.jp</ADDRESS>
        <!--表示されない部分-->
        ソースを見ないとわかりません。

〜〜〜〜〜〜〜〜〜〜〜〜〜
ページに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

テキスト、背景、リンクに色をつける
=================
書式
        <BODY option>  </BODY>
        option BGCOLOR="color"
                TEXT="color"
                LINK="color"
                VLINK="color"
                ALINK="color"

説明: 色は、#rrggbbで指定
        リンク部分の色はLINK、すでに読み込んだリンク部分の色はVLINK、
        データを読み込んでいる途中の色はALINK。


        <BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#ff0000"
        VLINK="#0000ff" ALINK="#ffff00" BACKGROUND="backpic.gif">
        普通のテキストは黒になる。<BR>
        背景は白<BR>
        <A HREF="notlink.html">まだリンクしていないページは、赤</A><BR>
        <A HREF="link.html">すでにリンクしたページは、青</A><BR>
        </BODY>

背景パターンをつくる
==========
書式
        <BODY option>  </BODY>
        option BACKGROUND="イメージファイル名"
                BGPROPERTIES=FIXED

説明: BGPROPERTIESはIE独自


        <BODY BACKGROUND="backpic.gif" BGPROPERTIES=FIXED>
        <CENTER>
        <IMG SRC="GOGO.gif">
        ページ画面をスクロールしても背景は動きません。<BR>
        </CENTER>
        </BODY>

横罫線を引く
======
書式
        <HR option>
        option SIZE="ピクセル数"
                WIDTH="ピクセル数"、または"パーセンテージ"
                ALIGN="left"、"right"
                NOSHADE

説明: オプション省略時2ピクセルの太さになる。


        <HR>
        <HR SIZE="10">
        <HR WIDTH="50%">
        <HR WIDTH="100">
        <HR SIZE="3" WIDTH="75%" ALIGN="left">
        <HR NOSHADE>

〜〜〜〜〜〜〜〜〜〜〜〜〜
フォントに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

見出しの文字サイズを指定する
==============
書式
        <Hnum>  </Hnum>
        num=1〜6

説明: タグの前後は強制的に改行され、ボールド書体になる。

文字サイズを指定する
==========
書式
        <FONT SIZE=num>  </FONT>
        num=1〜7

説明: <Hnum>と異なりnumが小さいほど小さい文字になり、前後に改行分の
        空きは入らない。

文字色を指定する
========
書式
        <FONT option>   </FONT>
        option COLOR=#rrggbb,colorname
                colorname    Black, Maroon, Green, Olive, Navy, Purple,
                            Teal, Gray, Silver, Red, Lime, Yellow,
                            Blue, Fuchsia, Aqua, White

説明: <BODY>でも色指定可能だが、指定した部分の文字のみに色をつけられる。

基本のフォントサイズを指定する
===============
書式
        <BASEFONT SIZE=num>
        num=1〜7

説明: このタグを一番最初に置くと、<FONT SIZE=num>タグを使って、相対
        的に指定することができる。


        <BASEFONT SIZE=4>これが通常の大きさ
        <FONT SIZE=-3>3段階小さくなる</FONT>
        <FONT SIZE=+3>3段階大きくなる</FONT>
        <FONT SIZE=7>基本サイズとは無関係</FONT>

文字飾りを指定する
=========
書式
        <B>        </B>   Bold(太字)
        <I>        </I>   Italic(斜体)
        <U>        </U>   Underline(下線)
        <TT>   </TT>   TypeWriter(等幅)
        <S>        </S>   取り消し線付き

強調文字を指定する
=========
書式
        <EM>   </EM>   強調文字(斜体)
        <STRONG>     </STRONG>     より強い強調(太字)

文字のスタイルを指定する
============
書式
        <CITE>  </CITE>  Citation(引用文や本のタイトル)
        <KBD>   </KBD>  Keyboard(キーボードに入力してもらう文字)
        <VAR>   </VAR>  Variable(任意に値を入れ替える文字)
        <CODE>  </CODE>  Code(引用されたコンピュータプログラム)
        <SAMP>  </SAMP>  Sample(コンピュータのの状態を示すメッセージ)
        <SUP>   </SUP>  Superscript(上付き文字)
        <SUB>   </SUB>  Subscript(下付き文字)


        参考文献:<CITE>初めての本</CITE><BR>
        わからないときは、<KBD>help</KBD>を入力する。<BR>
        <VAR>希望する本数</VAR>を入力する。<BR>
        <CODE>move.b (a1)+, (a2)+</CODE><BR>
        <SAMP>Fatal Error:Illegal Addressing</SAMP><BR>
        Z<SUP>2</SUP>=X<SUP>2</SUP><SUB>1</SUB>+Y<SUP>2</SUP><SUB>1</SUB>

論理的な文字のスタイルを指定する
================
書式
        <Q>        </Q>   Quote(短い引用文)
        <LANG>  </LANG>  Language(異なる言語)
        <AU>   </AU>   Author(作者)
        <PERSON>     </PERSON>     Person(作者、グループメンバー)
        <ACRONYM>     </ACRONYM>        Acronym(略語)
        <ABBREV>     </ABBREV>     Abbreviation(頭文字略語)
        <INS>   </INS>  Insert(挿入されたテキスト)
        <DEL>   </DEL>  Delete(消去されたテキスト)

特殊フォントを表示させる
============
書式
        &keyword;
        &asciicode;

説明: タグの表記に用いられる記号(&,<,>等)やキーボードで入力できない
        文字を表示するとき。

スペシャルキャラクター一覧表
        &lt;    <
        &gt;    >
        &amp;    &
        &quot;   "
        &AElig;   AE
        &Aring;   Å
        &Yacute;      ‡
        &aelig;   ae
        &yacute;      ‡
        &reg;    ○R
        &copy;   ○C

〜〜〜〜〜〜〜〜〜〜〜〜〜
行と段落に関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

改行する
====
書式
        <BR>

段落を設定する
=======
書式
        <P ALIGN=option>     </P>
        <DIV ALIGN=option>        </DIV>
        option "right","center","left"

説明: 単独の<P>タグでは、改行されてさらに一行分のスペースが挿入される。
        <DIV>も基本的に<P>と同じ機能。

改行を指定する
=======
書式
        <NOBR>  </NOBR>
        <WBR>

説明: ブラウザは、ウィンドウの幅に合わせてテキストを自動的に改行するが、
        <NOBR>を使うとテキストを一切改行させないで表示させられる。
        <NOBR>内でtextwrapする場合は、<WBR>を使うがめったに使用しない。

行揃えを設定する
========
書式
        <P ALIGN=option>     </P>
        <Hnum ALIGN=option>        </Hnum>
        option "right","center","left"
        num       1〜6

中揃えをする
======
書式
        <CENTER>     </CENTER>

〜〜〜〜〜〜〜〜〜〜〜〜〜
リストに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

マーク付きリストで表示する
=============
書式
        <UL><LI>      </UL>

説明: マークを付けてリスト表示するときに使う。
        <UL>〜</UL>タグでリストの始まりと終わりを定義し、その中に<LI>
        タグを使って項目を並べていく。それぞれの項目は自動的に改行され
        るので、<BR>は必要なし。

マーク付きリストでマークを変更する
=================
書式
        <UL><LI TYPE=option>    </UL>
        option disk, circle, round, square

説明: disk(黒丸), circle(白丸), round(白丸), square(四角)

番号順リストで表示する
===========
書式
        <OL><LI>      </OL>

説明: 項目に番号を付けてリスト表示する時に使う。各項目は自動的に改行される。

番号順リストで数値の書式を変更する
=================
書式
        <OL><LI TYPE=option>    </OL>
        option A, a, I, i, 1

説明: A(英大文字), a(英小文字), I(大文字のギリシャ数字), i(小文字の
        ギリシャ数字, 1(標準の数字)
        順番の途中で表示を変更することもできる。

番号順リストで最初の項目の番号を変更する
====================
書式
        <OL><LI START=num>     </OL>
        num       始めの番号

説明: 通常は、必ず1から始まるが、このタグにより最初の番号を任意に
        指定できる。

定義型リストを表示する
===========
書式
        <DL><DT>      <DD>   </DL>

説明: 言葉の定義をリスト表示するときに使う。
        <DT>で定義される言葉を、<DD>でその言葉の意味を並べていく。
        改行は自動的に行われ、<DD>以降はインデントされる。

定義型リストを改行しないで表示する
=================
書式
        <DL COMPACT><DT>      <DD>   </DL>

説明: <DT>と<DD>の表示の間で改行されない。

ディレクトリリストを表示する
==============
書式
        <DIR><LI>      </DIR>
        <MENU><LI>     </MENU>

説明: ディレクトリのリストを表示するときは、<DIR>または<MENU>を使う。
        ほとんどのブラウザでは、<UL>と同じ表示になる。

〜〜〜〜〜〜〜〜〜〜〜〜〜
テキストに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

整形済みのテキストを表示する
==============
書式
        <PRE>   </PRE>

説明: 等幅フォントで、スペース、タブ、リターンなどが反映された形で
        そのまま表示する。

テキストを点滅させる
==========
書式
        <BLINK>  </BLINK>

テキストを引用する
=========
書式
        <BLOCKQUOE>        </BLOCKQUOE>

説明: 文献等からの抜粋・引用を表示するときに使う。
        上下に一行分のスペースが挿入され、左右もインデントされて表示される。

テキストの回り込みを設定する
==============
書式
        <IMG SRC="ファイル名" option>
        option ALIGN="left","center","right"
                VSPACE=ピクセル数
                HSPACE=ピクセル数

説明: イメージの側面に複数行のテキストを配置する時に使用する。
        ただし、イメージの両側にテキストを配置することはできない。
        回り込みを途中で解除するには、<BR CLEAR>を使用する。

テキストの回り込みを解除する
==============
書式
        <BR CLEAR=option>
        option "all", "left", "right"

説明: オプションを省略するとallと同じになる。

〜〜〜〜〜〜〜〜〜〜〜〜〜
イメージに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

インラインイメージを張り込む
==============
書式
        <IMG SRC="ファイル名" option>
        option ALIGN="top","middle","center","bottom"
        ALT="文字列"

説明: ALIGNオプションでイメージの上中下のどの部分にテキストを配置するか
        設定する。
        ALTオプションの文字列を指定しておけば、テキストブラウザでアク
        セスしたとき、イメージの代わりにその文字列が表示される。

イメージのサイズを指定する
=============
書式
        <IMG SRC="ファイル名" option>
        option WIDTH="ピクセル数"または"パーセンテージ"
                HEIGHT="ピクセル数"または"パーセンテージ"

説明: サイズを指定すると設定した大きさに合わせてイメージが拡大・縮小
        表示される。

イメージを2段階で表示する
=============
書式
        <IMG SRC="ファイル名1" LOWSRC="ファイル名2">

説明: LOWSRCで指定されたイメージ2を表示して、全てのテキストが表示さ
        れるとイメージ1を表示する。

イメージの境界線を指定する
=============
書式
        <IMG SRC="ファイル名" BORDER="ピクセル数">

説明: ピクセル数を0にすると境界線は表示されない。

〜〜〜〜〜〜〜〜〜〜〜〜〜
リンクに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

テキストやイメージにリンクを指定する
==================
書式
        <A HREF="url">  </A>

説明: アンカータグと呼ばれている。

ページ内の特定の位置にリンクする
================
書式
        <A HREF="url#keyword">  </A>
        <A NAME="keyword">    </A>

説明: ページ内の特定位置にジャンプさせるため、<A NAME="">でキーワード
        を設定する。

リンクを利用してメールの発信をする
=================
書式
        <A HREF="mailto:メールアドレス"> </A>

説明: mailto:Emailのアドレスの間にスペースを入れないこと。

〜〜〜〜〜〜〜〜〜〜〜〜〜
表組みに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

表組みを作成する
========
書式
        <TABLE option>  </TABLE>
        option ALIGN=LEFT, CENTER, RIGHT
        <TABLE BORDER>  </TABLE>
        <TR>   </TR>   Table Row(列)
        <TD>   </TD>   Table Data(データ)
        <TH>   </TH>   Table Header(項目名)

説明: BORDERの有無で表示される位置は変わらない。
        <TH>で表の各行列の見出しを指定する。
        <TR>で一つの列のデータとして指定する。


        <TABLE ALIGN=RIGHT>
        <TR><TH></TH><TH>首都</TH><TH>都市</TH>
        <TR><TH>日本</TH><TD>東京</TD><TD>新宿</TD>
        <TR><TH>アメリカ</TH><TD>ワシントン</TD><TD>サンフランシスコ</TD>
        </TABLE>

セルに背景色を付ける
==========
書式
        <TD option>        </TD>
        option BGCOLOR=#rrggbb, colorname
                colorname    Black, Maroon, Green, Olive, Navy, Purple,
                            Teal, Gray, Silver, Red, Lime, Yellow,
                            Blue, Fuchsia, Aqua, White

罫線の太さとマージン、表の大きさを変える
====================
書式
        <TABLE option>  </TABLE>
        option BORDER="num"
                CELLSPACING="num"
                CELLPADDING="num"
                WIDTH="ピクセル数"または"パーセンテージ"
                HEIGHT="ピクセル数"または"パーセンテージ"

説明: 表の外枠の太さはBORDER、表を作る全ての罫線の太さはCELLSPACING、
        罫線と表中のテキストとの間隔はCELLPADDINGで指定する。
        表の大きさは、横幅をWIDTH、縦幅をHEIGHTで指定する。

行揃え、行の位置、改行の制限を設定する
===================
書式
        <TR option>        </TR>
        <TD option>        </TD>
        <TH option>        </TH>
        option ALIGN=left, center, right
                VALIGN=top, middle, bottom, baseline
                NOWRAP

セルを結合して表示する
===========
書式
        <TD option>        </TD>
        <TH option>        </TH>
        option ROWSPAN=num
                COLSPAN=num

説明: 複数の列や行にわたる複数のセルを1つのセルとして表示するときに
        使用する。

表にキャプションをつける
============
書式
        <CAPTION "option">        </CAPTION>
        option ALIGN=top, bottom

説明: 表題としてキャプションをつけるときに使う。
        キャプションは表にセンタリングされ、テキストが長くなると表の幅
        に合わせて表示される。
        オプションを指定しないときはtopに表示される。

〜〜〜〜〜〜〜〜〜〜〜〜〜
フレームに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

フレームの形式を定義する
============
書式
        <FRAMESET option>     </FRAMESET>
        option COLS="ピクセル数"または"パーセンテージ"
                ROWS="ピクセル数"または"パーセンテージ"
        <FRAME option>      </FRAME>
        option SRC=url
                NAME=テキスト
                MARGINWIDTH=ピクセル数
                MARGINHEIGHT=ピクセル数
                SCROLLING="yes","no","auto"
                NORESIZE
        <NOFRAME>     </NOFRAME>

説明: <BODY>タグの代わりにフレームの形式を定義する。
        縦割りフレームに関してはCOLSオプション、横割りフレームに関して
        はROWSオプションを使用する。
        パーセンテージで設定する場合は、合計が100%になるようにする。
        スクロールバーの有無はSCROLLINGオプションを使う。

〜〜〜〜〜〜〜〜〜〜〜〜〜
フォームに関するタグ
〜〜〜〜〜〜〜〜〜〜〜〜〜

テキスト入力欄を作成する
============
書式
        <FORM>  </FORM>
        <INPUT TYPE="text" option>
        option SIZE=ピクセル数
                NAME="フィールド名"
                MAXLENGTH=ピクセル数


        <FORM>
        名前:<INPUT TYPE="text" SIZE=20><P>
        E-mail:<INPUT TYPE="text" NAME="電子メールアドレス" SIZE=30><P>
        </FORM>

複数行フィールドの作成
===========
書式
        <TEXTAREA option>     </TEXTAREA>
        option ROWS=行数
                COLS=文字数
                NAME="フィールド名"

説明: あらかじめ入力フィールドに何らかのテキストを入力するときにはこ
        のタグに続けてテキストを入力する。
        NAMEは、転送されるデータを判別するための隠し文字である。

ラジオボタン、チェックボックス形式の入力
====================
書式
        <INPUT TYPE="radio" option>
        <INPUT TYPE="checkbox" option>
        option CHECKED
                NAME="フィールド名"
                VALUE="テキスト"

説明: CHECKEDを使用して、あらかじめボタンが押されチェックした形にできる。

選択欄形式の入力欄作成
===========
書式
        <SELECT><OPTION>      </SELECT>
        <SELECT SIZE=num><OPTION>      </SELECT>

説明: あらかじめ2つめ以降の項目が選択されているようにするには
        <OPTION SELECTED>に続けて項目名を入力する。

転送ボタンとリセットボタン
=============
書式
        <INPUT TYPE="submit" VALUE="ボタン名">
        <INPUT TYPE="reset" VALUE="ボタン名">

フォームの送信
=======
書式
        <FORM ACTION="スクリプトのパス/スクリプト名" METHOD="POST">


        <FORM ACTION="/cgi.bin/queryscript.cgi" METHOD="POST">
        名前:<INPUT TYPE="text" SIZE=20><P>
        E-mail:<INPUT TYPE="text" NAME="電子メールアドレス" SIZE=30><P>
        よく使うソフト
        <INPUT TYPE="checkbox" NAME="ワープロ">ワープロ
        <INPUT TYPE="checkbox" NAME="グラフィック">グラフィック
        <INPUT TYPE="checkbox" NAME="表計算" CHECKED>表計算<P>
        発送方法
        <INPUT TYPE="radio" CHECKED VALUE="宅急便">宅急便
        <INPUT TYPE="radio" NAME="バイク便" VALUE="バイク便">バイク便
        <INPUT TYPE="radio" NAME="郵パック" VALUE="郵パック">郵パック<P>
        メッセージをお書きください。<P>
        <TEXTAREA ROWS=7 COLS=40 NAME="メッセージ1"></TEXTAREA><P>
        <INPUT TYPE="submit" VALUE="送信">
        <INPUT TYPE="reset" VALUE="元に戻す">
        </FORM>