left="左からの位置"
top="上からの位置"
pagex="左からの位置"
pagey="上からの位置"
z-index="重なるレイヤの順序"
above="上のレイヤ名"
below="下のレイヤ名"
width="レイヤの幅"
height="レイヤの高さ"
clip="クリップ域"
visibility="表示"
bgcolor="色"
background="画像"
name="レイヤ名"
src="URL"
>
</LAYERL>
このタグで囲まれた部分が、１つの層となり、通常のページに重ねて表示されます
left、topは、上位レイヤから、このレイヤまでの距離を、それぞれ、横、縦のピクセル値で指示します
pagex、pageyは、画面の起点よりの距離を、それぞれ、横、縦のピクセル値で指示します(left、topの様に、上位レイヤからの相対位置ではなく、ウィンドウ絶対位置となります)
z-indexは、レイヤの重なりを示す値を指示し、数字が大きい程、上に表示されます
above、belowは、それぞれ、指定したレイヤが、このレイヤの上、下にくる事を指示します
z-indexと、above、belowは、どちらかが指定可能で、両方は不可能です
width、heightは、それぞれ、このレイヤの幅、高さをピクセル値か、数字と％で全体に対する割合で指示します
clipは、レイヤの特定領域をクリッピングする場合指示し、左上のＸ、Ｙ、右下のＸ、Ｙをそれぞれピクセル値で、カンマで区切って指示します
visibilityは、このレイヤの表示有無を、「show(表示)」、「hidden(非表示)」、「inherit(上のレイヤに同じ)」のいずれかで指示します
bgcolorは、このレイヤの下地の色を指示します
backgroundは、このレイヤに指定された画像を貼り詰めます
bgcolor、backgroundは、<BODY>タグでの指定と同様の使い方が出来ます
bgcolor、backgroundを指定しない場合、このレイヤは、透明となります
nameは、このレイヤにつける名前を指示し、この名前が、above、belowで指示する名前となります(また、JavaScriptで操作する時にも使用されます)
srcは、このレイヤに表示するHTML文書を指示します
使用例については、後ほどまとめて示します
left="左からの位置"
top="上からの位置"
z-index="重なるレイヤの順序"
above="上のレイヤ名"
below="下のレイヤ名"
width="レイヤの幅"
height="レイヤの高さ"
clip="クリップ域"
visibility="表示"
bgcolor="色"
background="画像"
name="レイヤ名"
src="URL"
>
</ILAYERL>
このタグで囲まれた部分が、１つの層となり、直前のタグ等の位置に重ねて表示されます
left、topは、直前の位置から、このレイヤまでの距離を、それぞれ、横、縦のピクセル値で指示します
z-indexは、レイヤの重なりを示す値を指示し、数字が大きい程、上に表示されます
above、belowは、それぞれ、指定したレイヤが、このレイヤの上、下にくる事を指示します
z-indexと、above、belowは、どちらかが指定可能で、両方は不可能です
width、heightは、それぞれ、このレイヤの幅、高さをピクセル値か、数字と％で全体に対する割合で指示します
clipは、レイヤの特定領域をクリッピングする場合指示し、左上のＸ、Ｙ、右下のＸ、Ｙをそれぞれピクセル値で、カンマで区切って指示します
visibilityは、このレイヤの表示有無を、「show(表示)」、「hidden(非表示)」、「inherit(上のレイヤに同じ)」のいずれかで指示します
bgcolorは、このレイヤの下地の色を指示します
backgroundは、このレイヤに指定された画像を貼り詰めます
bgcolor、backgroundは、<BODY>タグでの指定と同様の使い方が出来ます
bgcolor、backgroundを指定しない場合、このレイヤは、透明となります
nameは、このレイヤにつける名前を指示し、この名前が、above、belowで指示する名前となります(また、JavaScriptで操作する時にも使用されます)
srcは、このレイヤに表示するHTML文書を指示します
使用例については、後ほどまとめて示します
</NOLAYER>
このタグで囲まれた部分が、レイヤをサポートしていないブラウザで表示されます
レイヤをサポートしているブラウザでは無視されます
使用例については、後ほどまとめて示します
type="タイプ"
src="URL"
title="タイトル"
>
</STYLE>
このタグで囲まれた部分が、スタイルシートとなります
スタイルシートは、<HEAD></HEAD>内に記述します
typeは、スタイルシートのタイプを示し、「text/css(Cascading Style Sheets)」、「text/javascript(JavaScript Style Sheets)」のいずれかが指示可能です
srcは、外部よりスタイルシートを読み込む際の、URLを指示します
titleは、スタイルシートのタイトルを指示します
以下は、スタイルシートの典型的な記述方法です
<STYLE type="text/css">
H1 { color: red }
</STYLE>
は、<H1>のタグで示される内容は、赤で表示する事を指示しています
<H1>タイトル</H1>等、<H1>のタグを使った場合、全て赤文字で表示されます
<STYLE type="text/css">
H1.sample1 { color: red }
</STYLE>
は、<H1>のタグで示される内容で、クラス指定時、赤で表示する事を指示しています
<H1 class="sample1">タイトル</H1>等、<H1>のタグで、class指定を行った場合のみ、赤文字で表示されます
<STYLE type="text/css">
H1#sample2 { color: red }
</STYLE>
は、<H1>のタグで示される内容で、IDセレクタ指定時、赤で表示する事を指示しています
<H1 id="sample2">タイトル</H1>等、<H1>のタグで、IDセレクタ指定を行った場合のみ、赤文字で表示されます
なお、スタイルシート全般については、かなり量がありますので、ここで全て説明する訳にはいきません
http://www.ipc-tokai.or.jp/~miya-ipc/stylesheet/index.html等に解説がありますので、参照下さい
ここでは、簡単な例として、３つのレイヤからなる画面で、それぞれ、「pic1.gif」、「pic2.gif」、「pic3.gif」を表示し、それらが重なって表示される事を確認してみます
これらの画像は、単独では、
ですが、以下の構造のHTMLで表示してみる事にします
<HTML>
<HEAD>
<TITLE>ダイナミックHTMLサンプル</TITLE>
</HEAD>
<BODY>
<LAYER z-index="1" name="lay1"><IMG src="pic1.gif" width="150" height="100"></LAYER>
<LAYER z-index="2" name="lay2"><IMG src="pic2.gif" width="150" height="100"></LAYER>
<LAYER z-index="3" name="lay3"><IMG src="pic3.gif" width="150" height="100"></LAYER>
<NOLAYER>このブラウザでは表示出来ません</NOLAYER>
</BODY>
</HTML>
は、こうなります ここをクリックすると、実物が見られます