type="マーク形式"
>
</UL>
このタグで囲まれた部分をインデントし、表示します
typeは、この中で使用する<LI>での先頭につけるマークを指定します
マーク形式は、「disc(黒丸)」、「circle(白丸)」、「square(四角)」が指定出来ます
以下は、この使い方の例です
休憩時間になにを飲もうかな<BR>
<UL>
<LI>お茶
<LI>コーヒー
<LI>コーラ
</UL>は、
休憩時間になにを飲もうかな
- お茶
- コーヒー
- コーラ
<UL type="circle">
<LI>お茶
<LI>コーヒー
<LI>コーラ
</UL>は、
休憩時間になにを飲もうかな
- お茶
- コーヒー
- コーラ
<UL type="square">
<LI>お茶
<LI>コーヒー
<LI>コーラ
</UL>は、
休憩時間になにを飲もうかな
- お茶
- コーヒー
- コーラ
休憩時間になにを飲もうかな<BR>
<UL>
<LI>お茶
<UL>
<LI>コーヒー
<UL>
<LI>コーラ
</UL></UL></UL>は、
休憩時間になにを飲もうかな
- お茶
- コーヒー
- コーラ
- コーヒー
<UL>
また、<LI>を内部で使わない場合、このタグで囲まれた部分は単にインデントされるだけですので、その目的にも使用出来ます
<UL>は、
-
また、<LI>を内部で使わない場合、このタグで囲まれた部分は単にインデントされるだけですので、その目的にも使用出来ます
type="番号形式"
start="開始番号"
>
</OL>
このタグで囲まれた部分をインデントし、表示します
typeは、この中で使用する<LI>での先頭につける番号を指定します
番号形式は、「A(英大文字)」、「a(英小文字)」、「I(大文字ローマ数字)」、「i(小文字ローマ数字)」、「1(数字)」が指定出来ます
startは、開始する番号を指定します
開始番号は、typeで指定した番号形式の何番目から開始するか指定します
以下は、この使い方の例です
なぜ、恐竜は滅びたか<BR>
<OL>
<LI>巨大隕石落下による地球寒冷化
<LI>ポールシフトによる急激な環境の変化
<LI>わかりません
</OL>は、
なぜ、恐竜は滅びたか
- 巨大隕石落下による地球寒冷化
- ポールシフトによる急激な環境の変化
- わかりません
<OL type="A" start="1">
<LI>巨大隕石落下による地球寒冷化
<LI>ポールシフトによる急激な環境の変化
<LI>わかりません
</OL>は、
なぜ、恐竜は滅びたか
- 巨大隕石落下による地球寒冷化
- ポールシフトによる急激な環境の変化
- わかりません
<OL type="I" start="3">
<LI>巨大隕石落下による地球寒冷化
<LI>ポールシフトによる急激な環境の変化
<LI>わかりません
</OL>は、
なぜ、恐竜は滅びたか
- 巨大隕石落下による地球寒冷化
- ポールシフトによる急激な環境の変化
- わかりません
type="マーク形式、番号形式"
value="開始番号"
>
<UL><OL>内で使用するリスト項目を示します
typeは、<UL><OL>で指定するものと同じものが指定出来ます
valueは、<OL>で指定するstartと同じものが指定出来ます
以下は、この使い方の例です
明石のJR駅名<BR>
<OL>
<LI type="A">朝霧
<LI type="A" value="5">明石
<LI type="a">西明石
<LI type="I">大久保
<LI type="i">魚住
<LI type="1">土山
</OL>は、
明石のJR駅名
- 朝霧
- 明石
- 西明石
- 大久保
- 魚住
- 土山
compact
>
</DL>
このタグで囲まれた部分が定義リストの範囲となります
compactは、定義される言葉が短い場合、定義内容と同じ行に表示する事を指示します
後の、<DT><DD>と組み合わせて、目的を達します
使用例は、<DD>でまとめて示します
<DL>で示される定義リストの定義される言葉を示します
使用例は、<DD>でまとめて示します
<DL>で示される定義リストの定義内容を示します
この部分は、インデントされ表示されます
以下は、<DL><DT><DD>の使い方の例です
<DL compact>
<DT>AIP
<DD>明石インターネットパワーズ参照
</DL>は、
- AIP
- 明石インターネットパワーズ参照
<DT>明石インターネットパワーズ
<DD>明石市の市民や関係する人々で構成され、インターネットで町づくりを目指すボランティア集団です
</DL>は、
- 明石インターネットパワーズ
- 明石市の市民や関係する人々で構成され、インターネットで町づくりを目指すボランティア集団です
href="url"
target="ターゲットウィンドウ名"
name="アンカー名前"
>
</A>
このタグは、文字や画像がハイパーリンクする様に指示するものです
hrefは、リンク先のURLを指示します
urlには、ジャンプする場所のURLを指示しますが、"mailto:メールアドレス"とすると、指定メールアドレスへのメール発信画面が開きます(?sublect=タイトルを続けて指定すると、メールのSubject欄を指定出来ます)
#をつけると、nameでつけられたアンカー名を目標とします
"URL#アンカー名"とすると、指定URL内のアンカー名を目標とします
また、"javascript:関数名"とすると、その関数名が実行されます
targetは、リンクを表示させるウィンドウ名を指示します
ターゲットウィンドウ名は、フレーム表示時、どのウィンドウに表示するかを指示します
この使い方では、targetに目的のフレームを指定しますが、その他に、「_blank(新しいウィンドウ)」、「_self(自分自身)」、「_parent(親ウィンドウ)」、「_top(ウィンドウ全体：フレームの解除)」が使えます
nameは、HTML文書内に任意の名前をつけたい場合、指示します
アンカー名前は、ページ内でユニークなものを指定します
以下は、この使い方の例です
<A name="A">ここにアンカーAがありますは、
ここにアンカーAがあります
<A href="#B">ここをクリックするとアンカーBに飛びます</A>は、
ここをクリックするとアンカーBに飛びます
注１）アンカーBは欄外にあります
<A href="mokuji.html#HTML" target="_blank">ここをクリックすると新しい目次ウィンドウが表示されます</A>は、
ここをクリックすると新しい目次ウィンドウが表示されます
<A href="mokuji.html#JAVASCRIPT" target="_blank"><IMG src="pac1.gif" border="0"></A>この絵をクリックすると新しい目次ウィンドウが表示されますは、
この絵をクリックすると新しい目次ウィンドウが表示されます<A href="mokuji.html#JAVASCRIPT" target="leftframe"><IMG src="pac2.gif" border="0"></A>この絵をクリックすると目次ウィンドウが移動しますは、
この絵をクリックすると目次ウィンドウが移動します<A href="mailto:simanaka@aip.gr.jp?subject=勉強会感想">ここをクリックすると講師に感想メールを送れます</A>は、
ここをクリックすると講師に感想メールを送れます
src="URL"
alt="画像の説明"
width="幅"
height="高さ"
border="枠の幅"
align="位置"
vspace="スペース"
hspace="スペース"
lowsrc="最初の画像のURL"
usemap="マップ名"
name="画像名"
>
このタグは、画像を表示することを指示します
srcは、表示する画像のURLを指示します
指定出来る画像は、GIF、JPEGです(ブラウザのバージョンにより、PNGも可能です)
altは、画像が表示出来ない場合に表示する、画像の説明を指示します
width、heightはそれぞれ、画像の幅、高さを、ピクセル値か、数字の後に％をつけ全体のサイズに対する割合で指示します
width、heightを指定しておくと、画像を読み込まなくとも全体のレイアウトが可能となりますので、はやくページが表示されます
borderは、画像がハイパーリンクされている場合表示される枠の幅を、ピクセル値で指示します
alignは、画像の位置揃えを指示し、次のいずれかが可能です
-
left：左に寄せます
right：右に寄せます
top：一番高さのあるものにあわせます
texttop：一番高さのある文字にあわせます
middle：中心を文字のベースラインをあわせます
absmiddle：中心にラインの中心をあわせます
baseline：文字のベースラインにあわせます
bottom：下を文字のベースラインをあわせます
absbottom:下をラインの下にあわせます
lowsrcは、最初に表示する画像のURLを指示します
lowsrcでURLを指定すると、まず、その画像が表示され、その後、srcで指定された画像が表示されます
本来は、lowsrcでとりあえず小さいデータサイズのものを表示し、その後、ちゃんとしたものを表示させる様にして時間稼ぎをする目的で使用しますが、画像が切り替わる作用をしますので、その様な効果もねらえます
lowsrcでの効果は、最初のみ有効で、画像の読み込みが速い場合(ファイル等から読み込み時や、キャッシュされてしまうと効果がありません)
usemapは、画像にクライアント・サイド・マップを使用する際の、マップ名を＃に続いて指示します(クライアント・サイド・マップについては、<MAP>をみて下さい)
nameは、JavaScriptでこの画像を参照する時の名称を指示します
以下は、この使い方の例です
<IMG src="pac1.gif">は、
<IMG src="pac0.gif" alt="存在しない画像">は、
注）ここでは、width、heightの作用を見るため、あえて画像を表示出来なくしています
<IMG src="pac0.gif" width="50" height="50" alt="存在しない画像">は、
注）ここでは、width、heightの作用を見るため、あえて画像を表示出来なくしています
<A href="mokuji.html#JAVASCRIPT" target="_blank"><IMG src="pac1.gif" border="1"></A>この絵をクリックすると新しい目次ウィンドウが表示されますは、
この絵をクリックすると新しい目次ウィンドウが表示されます<A href="mokuji.html#JAVASCRIPT" target="leftframe"><IMG src="pac2.gif" border="0"></A>この絵をクリックすると<AREA>の使用例へ移動しますは、
この絵をクリックすると<AREA>の使用例へ移動します<IMG src="pac1.gif" width="100" height="50" align="left" alt="サンプル画像１">は、
<IMG src="pac1.gif" width="50" height="100" align="right" alt="サンプル画像１">は、
<IMG src="pac1.gif" width="50" height="50" align="top" alt="サンプル画像１" vspace="10" hspace="40">テキストは<BR>こうなりますは、
テキストはこうなります
テキストは、こうなります<IMG src="pac1.gif" width="50" height="50" align="texttop" alt="サンプル画像１">は、
テキストは、こうなります
テキストは、こうなります<IMG src="pac1.gif" width="50" height="50" align="middle" alt="サンプル画像１">は、
テキストは、こうなります
テキストは、こうなります<IMG src="pac1.gif" width="50" height="50" align="absmiddle" alt="サンプル画像１">は、
テキストは、こうなります
テキストは、こうなります<IMG src="pac1.gif" width="50" height="50" align="baseline" alt="サンプル画像１">は、
テキストは、こうなります
テキストは、こうなります<IMG src="pac1.gif" width="50" height="50" align="bottom" alt="サンプル画像１">は、
テキストは、こうなります
テキストは、こうなります<IMG src="pac1.gif" width="50" height="50" align="absbottom" alt="サンプル画像１">は、
テキストは、こうなります
usemapについては、<MAP>の説明で例を示します
nameについては、JavaScripuの説明で例を示します
name="マップ名"
>
</MAP>
このタグで囲まれた部分で、クライアント・サイド・マップを定義します
nameは、<IMG>のusemapで指定する名称を指示します
このタグは、クライアント・サイド・マップの定義範囲を示すのみで、実際の内容は、次の<AREA>で定義します
使用例は、<AREA>でまとめて示します
shape="形"
coords="座標"
href="URL"
nohref
target="ターゲットウィンドウ名"
>
このタグで指定した領域を、ハイパーリンクします
shapeは、定義する領域の形状を指示します
形は、「rect(四角)」、「circle(円)」、「poly(多角形)」、「default(その他の領域)」が指定出来ます
coordsは、領域の座標を、画像の左上を原点とする、ピクセル値で指定し、shapeでの指定により、次のいずれかの形式で指定します
- rect：領域の左上Ｘ座標、領域の左上Ｙ座標、領域の右下Ｘ座標、領域の右下Ｙ座標、の順で、カンマで区切って指定します
- circle：中心のＸ座標、中心のＹ座標、半径の順で、カンマで区切って指定します
- poly：全ての角の座標を、Ｘ座標、Ｙ座標、の組で、繰り返し、カンマで区切って指定します
nohrefは、そのエリアが選択されても、反応しない事を指示します
targetは、ターゲットウィンドウを指定します(指定の内容は、<A>と同じです)
以下は、この使い方の例です
<MAP name="cmap1">
<AREA shape="circle" coords="25,25,23" href="mokuji.html#JAVASCRIPT" target="_blank">
<AREA shape="default" href="#IMG">
</MAP>
<MAP name="cmap2">
<AREA shape="poly" coords="25,2,2,25,47,25" href="mokuji.html#JAVASCRIPT" target="_blank">
<AREA shape="rect" coords="5,25,44,47" href="#IMG">
<AREA shape="default" nohref>
</MAP>
<IMG src="pac1.gif" width="50" height="50" border="1" usemap="#cmap1" hspace="10">←円の内と外 (クリックしてみて下さい) 屋根(青)と部屋(緑)→<IMG src="house.gif" width="50" height="50" border="1" usemap="#cmap2" hspace="10" >は、
←円の内と外 (クリックしてみて下さい) 屋根(青)と部屋(緑)→