+----- MARQUEの記述説明 -----+
| 上の動き設定です。 |
●記述 ++++++++++++++++++++++++++++++++++++++++++++++++++ <MARQUEE scrolldelay="3" scrollamount="1" direction="left" truespeed loop="0" behavior="scroll" bgcolor="#000000"> <IMG src="300kei-nozomi_01m.gif" width="267" height="42" border="0"> <IMG src="300kei-nozomi_02m.gif" width="254" height="47" border="0"> <IMG src="300kei-nozomi_03m.gif" width="252" height="52" border="0"> <IMG src="300kei-nozomi_05m.gif" width="267" height="42" border="0"></MARQUEE > ●基本説明 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1.マーキータグを使用して画像をスライドさせます。 2.記述内容は<MARQUEE〜設定〜 ><画像></MARQUEE>の文法で 3.記述場所は、htmlファイルの<BODY>〜</BODY>の任意の場所に記述してください。 ●動作確認 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1.完全作動/IE5.x IE6.x 2.一部作動/NN7.x Mozilla1.6 背景設定、遅延時間設定が不能(scrolldelay="0"と同じ?) 3.作動せず/Oper6 NN6.x NN4.x 4.未確認/IE4.x Mozilla1.5以前 MacIE その他のブラウザ ※IEはインターネット・エクスプローラー、NNはネット・エスケープの各ブラウザです。 ●設定説明 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1.scrolldelay="3" 遅延時間/数字が大きくなると遅くなります。最小値は "1" ※値”0”でも有効ですが最速は”1”です。 ※NN・Mozillaはこの属性のコントロールは利かないようです。 2. scrollamount="1" 移動量/数字が大きくなると移動量が大きくなります。最小値は "1" ※スピードは上の2つの設定のバランスをとって設定してください。 ※移動量を大きくして、スピードを遅くすると移動がガタガタします。 3.direction="left" 移動の方向/"left"は右から左 "right"は左から右 4.truespeed loop="0" 繰り返し/"0"は無限 "1"は1回、 "2"は2回・・・・ 5.behavior="scroll" 動き方/"scroll"は上のような動き ※上記以外では "slide"・・・ページの端から出て端で止まる。 "alternate"ページの端と端を行ったりきたり。 6.bgcolor="#000000" 背景色/背景色の設定をします。現在は黒です。 ※NN7.x・Mozillaでは背景色の設定ができないのでIE・NN・Mozillaそれぞれで有効な背景色指定は備考3を参照 <IMG 〜>は移動させる画像のデータ src="300kei-nozomi_01m.gif"は画像のデレクトリー。同一フォルダー内の画像を使う場合はファイル名でOK。その他の保存場所の画像を利用する場合はパス設定ルールに従い指定してください。 width="267" height="42" border="0"は画像のサイズ、枠等の指定 ●備 考1 文字の挿入 ++++++++++++++++++++++++++++++++++++++++++++++ 画像の前後に文字を記入するとその文字も画像と同じように移動させることができます。 例えば <SPAN STYLE="font-size :10pt; color :White;">文字の挿入</SPAN> ※STYLE="font-size :10pt; color :White;はCSSで文字の大きさと色を白に指定しています。大きさまたは色を変更したい場合は”10pt”または”White”の部分を変更してください。もちろん「文字の挿入」部分は任意の文字にしてください。 上の記述を画像タグ<IMG 〜 >の前か後ろに挿入すると画像と一緒に文字も表示されます。 下の例は画像の後ろに文字列を挿入した例です。 記述例 <MARQUEE scrolldelay="3" direction="left" scrollamount="1" truespeed loop="0" behavior="scroll" bgcolor="#000000"><IMG src="747jal-13f.gif" width="197" height="55" border="0"><SPAN STYLE="font-size :10pt; color :White;">文字の挿入</SPAN></MARQUEE> ※赤文字の部分が文字挿入の記述です。もし文字の色や大きさは、ブラウザの初期値にお任せであれば、スタイル文は不要で流したい文字だけ記述してください。 ●備 考2 背景に画像を設定 ++++++++++++++++++++++++++++++++++++++++++ (1)背景画像をDIVタグで設定する。 記述例 <DIV STYLE="background-image : url(bg012.jpg); background-repeat : repeat-x;"><MARQUEE scrolldelay="3" direction="left" scrollamount="1" truespeed loop="0" behavior="scroll" ><IMG src="747ana-23f.gif" width="197" height="55" border="0"></MARQUEE></DIV> 上記のように<DIV><MARQUEE></MARQUEE></DIV>のようにDIVタグ(赤文字部分)とMARQUEEタグを入れ子にして2層にします。1層目のDIVタグには背景画像の設定をスタイル文で記述、2層目のMARQUEEタグには水平移動する画像の設定をします。 DIVタグ内のスタイル文はbackground-image属性は背景画像の指定、url(〜)のパスは同一フォルダー内であれば、ファイル名でOKです。background-repeat属性は背景画像の並べ方の指定。値 repeat-xは画像を水平方向のみに並べる指定です。 ※MARQUEEタグ内にも背景画像指定をすることができますが、IEでは背景まで水平移動してしまいます。NNは移動しません。 (2)高さを設定したい 通常高さ設定しない場合、画像の高さまたは文字の高さがキーマの高さになりますが。任意に設定したい場合は、下記の記述を挿入してください。 記述例 <DIV STYLE="background-image : url(bg0141.jpg); background-repeat : repeat-x; height :100px; "><MARQUEE scrolldelay="3" direction="left" scrollamount="1" truespeed loop="0" behavior="scroll"><IMG src="747qantas-13f.gif" width="197" height="55" border="0" style="margin-top:10px;"></MARQUEE></DIV> DIVタグ内に記述した背景画像のスタイル文に引き続き赤文字の高さ指定を記述してください。 1.最初のheight :100px;は、全体の高さの設定です。背景画像以上の高さを設定するとクリアランスができますので注意してください。背景画像設定のスタイル文の中に組み込んでください。 2.次のIMGタグ内のstyle="margin-top:10px;"は、移動画像の位置指定です。<IMG>タグ内にスタイル文で記述してください。値は移動する画像と上辺との距離です。現在は上辺と移動画像の距離を10pixelに指定してあります。高さが無指定ですと上辺に張り付きます。値を大きくすると当然ですが移動する画像は下がります。あまり大きくすると背景画像からはみ出しますので注意してください。 ●備 考3 IE・NN双方に有効な背景色を設定したい ++++++++++++++++++++++++++++ ※NN7.1では背景色の設定が無効になってしまいますので、DIVタグ内で設定するとIE・NN双方に有効な背景色が設定できます。 記述例 <DIV STYLE="background-color :Black;"><MARQUEE〜設定〜><IMG〜設定〜></MARQUEE></DIV> ●素 材 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 上で使用している背景画像です。もしよろしければご自由にお使いください。 高さ60pix 高さ100pix 高さ60pix 高さ100pix 高さ60pix 高さ100pix 高さ60pix 高さ100pix 高さ60pix※上記背景画像は左右はシームレス加工してありますが。上下は対応していません。 |