　☆ Sanctuary ☆　　Smile for you

MARQUEEタグ

||　フリーページ一覧表へ戻る　||　ＬＩタグへ　||　カラーテーブルの説明へ　||

マーキータグ　<marquee>　の使い方を覚えよう！！
marquee タグは、文字や画像などをスクロールさせることができます。デフォルトでは右から左へスクロールする動作を繰り返しますが、各属性によりスクロールの範囲・動作の仕方・回数・速度等を指定できます。 (注意１)Netscape Navigatorではそのまま左寄せで表示され、何も起こりません！ (注意２)MARQUEEタグにSTYLE属性も使えますが、ここではFONTタグで代用してあります。

marquee タグは、文字や画像などをスクロールさせることができます。
デフォルトでは右から左へスクロールする動作を繰り返しますが、
各属性によりスクロールの範囲・動作の仕方・回数・速度等を指定できます。
(注意１)Netscape Navigatorではそのまま左寄せで表示され、何も起こりません！
(注意２)MARQUEEタグにSTYLE属性も使えますが、ここではFONTタグで代用してあります。

marqueeタグの属性で知っておきたい属性は scrollamount と scrolldelay　です。 scrolldelay　再描画間隔の時間　scrolldelay は 1/1000単位の時間を指定します。　たとえば10000＝１秒、500＝0.5秒、50＝0.05秒です。 scrollamount　最描画までに進む距離　この距離はピクセル単位(px)になります。ここでは、 ○色を濃いピンクに、( color="deeppink" ) ○フォントサイズを3に、( size="3" ) ○フォントスタイルを太字に、( <b> ) ○動く早さを適度な速さに、( scrollamount="2" scrolldelay="80" ) ○スクロールの幅を600に、( width="600" ) ○スクロールの高さを100に、( height="100" ) 統一しておくこととします。みなさんがお使いになるときは好みに合わせてこれらの値を変えてください。
● 右から左へスクロールするには？（一方通行）
左方向指定は ( direction="left" )、スクロール指定は ( behavior="scroll" )　です。 <marquee direction="left" behavior="scroll" scrollamount="2" scrolldelay="80" width="600"> <font size="3" color="deeppink"><b> ヾ(’-’)左へスクロール中♪♪</b></font> </marquee> ヾ(’-’)左へスクロール中♪♪**
● 右から左へスクロールするには？（一方通行） ★早くしてみる
動きを早くしてみましょう！ ( scrollamount="5" ) にしてみます。 <marquee direction="left" behavior="scroll" scrollamount="5" scrolldelay="80" width="600" > <font size="3" color="deeppink"><b> ヾ(’-’)左へスクロール中♪♪</b></font> </marquee> ヾ(’-’)左へスクロール中♪♪**
● 左から右へスクロールするには？（一方通行）
右方向指定は ( direction="right" )、スクロール指定は ( behavior="scroll" )　です。 <marquee direction="right" behavior="scroll" scrollamount="2" scrolldelay="80" width="600"> <font size="3" color="deeppink"><b> (’-’)ﾉ右へスクロール中♪♪</b></font> </marquee> (’-’)ﾉ右へスクロール中♪♪**
● 上から下へスクロールするには？（一方通行）
下方向指定は ( direction="down" )、スクロール指定は ( behavior="scroll" )　です。 <marquee direction="down" behavior="scroll" scrollamount="2" scrolldelay="80" width="600" height="100"> <font size="3" color="deeppink"><b> (’-’)ﾉ下へスクロール中♪♪</b></font> </marquee> (’-’)ﾉ下へスクロール中♪♪**
● 下から上へスクロールするには？（一方通行）
上方向指定は ( direction="up" )、スクロール指定は ( behavior="scroll" )　です。 <marquee direction="up" behavior="scroll" scrollamount="2" scrolldelay="80" width="600" height="100"> <font size="3" color="deeppink"><b> (’-’)ﾉ上へスクロール中♪♪</b></font> </marquee> (’-’)ﾉ上へスクロール中♪♪**
● 右から左へスクロールするには？（左右往復）
左方向指定は ( direction="left" )、スクロール指定は ( behavior="alternate" )　です。 <marquee direction="left" behavior="alternate" scrollamount="2" scrolldelay="80" width="600"> <font size="3" color="deeppink"><b> ヾ(’-’)左へスクロールして往復する♪♪</b></font> </marquee> ヾ(’-’)左へスクロールして往復する♪♪**
● 左から右へスクロールするには？（左右往復）
右方向指定は ( direction="right" )、スクロール指定は ( behavior="alternate" )　です。 <marquee direction="right" behavior="alternate" scrollamount="2" scrolldelay="80" width="600"> <font size="3" color="deeppink"><b> (’-’)ﾉ右へスクロールして往復する♪♪</b></font> </marquee> (’-’)ﾉ右へスクロールして往復する♪♪**
● 上から下へスクロールするには？（上下往復）
下方向指定は ( direction="down" )、スクロール指定は ( behavior="alternate" )　です。 <marquee direction="down" behavior="alternate" scrollamount="2" scrolldelay="80" width="600" height="100"> <font size="3" color="deeppink"><b> (’-’)ﾉ下へスクロールして往復する♪♪</b></font> </marquee> (’-’)ﾉ下へスクロールして往復する♪♪**
● 下から上へスクロールするには？（上下往復）
上方向指定は ( direction="up" )、スクロール指定は ( behavior="alternate" )　です。 <marquee direction="up" behavior="alternate" scrollamount="2" scrolldelay="80" width="600" height="100"> <font size="3" color="deeppink"><b> (’-’)ﾉ上へスクロールして往復する♪♪</b></font> </marquee> (’-’)ﾉ上へスクロールして往復する♪♪**
● 背景色を変えてみる？
背景色をライトシアンにしてみます。( bgcolor="lightcyan" ) <marquee direction="left" behavior="scroll" scrollamount="2" scrolldelay="80" width="600" bgcolor="lightcyan"> <font size="3" color="deeppink"><b> ヾ(’-’)左へスクロール中♪♪</b></font> </marquee> ヾ(’-’)左へスクロール中♪♪**
● センタリングしてみる？
センタリングしてみます。( text-align:center ) <marquee direction="up" behavior="alternate" scrollamount="2" scrolldelay="80" width="600" height="100"> <center> <font size="3" color="deeppink"><b> (’-’)ﾉ真ん中で上へスクロールして往復する♪♪</b></font> </center> </marquee> (’-’)ﾉ真ん中で上へスクロールして往復する♪♪**
● フォントを変えてみる！
フォントを変えてみます。 ( face="HGP創英角ﾎﾟｯﾌﾟ体" ) 複数行のときは <br> で改行してください。 <marquee direction="up" behavior="scroll" scrollamount="2" scrolldelay="80" width="600" height="100"> <center> <font size="3" color="deeppink" face="HGP創英角ﾎﾟｯﾌﾟ体"> (◎)/ オイキタロウ<br><br>(∬ε゜) ナンダイトウサン<br><br>(◎)/ フォントを変えて行間を空けてみるぞ！<br><br>(∬ε゜) わかったよ、トウサン </font> </center> </marquee> (◎)/ オイキタロウ (∬ε゜) ナンダイトウサン (◎)/ フォントを変えて行間を空けてみるぞ！ (∬ε゜) わかったよ、トウサン
● 画像をスクロールしてみる！
画像をスクロールしてみます。やり方はテキストを画像に変えただけです。 <marquee direction="left" behavior="scroll" scrollamount="3" scrolldelay="80" width="600"> <img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/112.gif" width="111" height="57" alt="トラック"> </marquee>
● 文字をブリンク（点滅）してみる！
blinkタグはＩＥでは動作しませんが、このmarqueeタグを使って見かけ上ブリンクさせることが可能です。そのときに注意しなければならないのは文字列の幅に width をあわせることです。そうしないと direction で指定した方向へ流れていってしまいます。ただし、scrollamount と width の値の設定が非常に微妙に影響しあってますので、ご自身のＨＰで何ども試してご確認ください！ <marquee scrollamount="200" scrolldelay="500" width="250"><font size="3" color="deeppink">文字列を点滅させます！！</font></marquee> 文字列を点滅させます！！
● MARQUEE タグの属性一覧
以下に marquee タグの属性を載せておきますのでご参考にして下さい。 height="高さ"･･････････････スクロール範囲の高さ（ピクセルまたは%で指定） width="幅"･････････････････スクロール範囲の幅（ピクセルまたは%で指定） hspace="左右の余白"･･････左右の余白（ピクセルで指定） vspace="上下の余白"･･････上下の余白（ピクセルで指定） behavior="動作の仕方"････スクロール動作の仕方 behavior="scroll"･･･画面を横切る動作を繰り返す behavior="alternate"･･･画面を往復する動作を繰り返す behavior="slide"･･･スクロールの端まで来ると停止する direction="方向"･･･････････スクロール方向（leftまたはrightで指定） loop="回数"････････････････スクロール回数（デフォルトは無限） scrolldelay="時間の間隔"･･･再描画までの時間の間隔（秒数で指定。値が大きいと遅く、値が小さいと速くなる。単位は1/1000秒、デフォルトはscrolldelay="85"） scrollamount="進む距離"･･･再描画までに進む距離（ピクセルで指定。値が大きいと速く、値が小さいと遅くなる。デフォルトはscrollamount="6"） bgcolor="背景色"･･･････････スクロール部分の背景色