資料の一覧へ

文字を動かす−marquee

marqueeについて

<marquee>　</marquee>を利用すると、間に挟まれた文字（画像）が動いて表示されます。

文字だけでなく、画像を間に挟むことも可能です。
例えば、（tree1_04.gif）を挟んで
<marquee><img src="tree1_04.gif"></marquee> と記述すると、↓のようになります。

注意事項

• 動く文字は人の注意を引きますが、内容が読みにくくなります。重要な内容、読んで欲しい内容は動かさない方が無難です。
  
• <marquee>は正規のタグではないので、動きを表示しないブラウザもあります。動かなくても支障のない内容を工夫してください。
• <marquee>はインラインタグです。ブロックタグを挟むことはできません。
  （見出し、箇条書きや表を挟んで動かすことはできません）
• <font></font>のような文字飾り（インライン）のタグを挟み、修飾した文字を動かすことは可能です。
• </marquee>の後に記述した文字は、改行（<br>）を入れなくても、自動的に次の行に表示されます。
• <marquee></marquee>と同じ行内に動かない文字を表示することはできません。

オプションの指定

	オプション		内容	開始タグ	サンプル
動き方	behavior	scroll (初期設定)	端に着いたら元に戻って移動を繰り返す	<marquee behavior="scroll">
		slide	端に着いたら停止する	<marquee behavior="slide">
		alternate	端に着いたら反対に向かって移動を繰り返す	<marquee behavior="alternate">
背景色	bgcolor="色名"		移動する背景に色をつける	<marquee bgcolor="green">
方向	direction	left (初期設定)	左→右	<marquee direction="left">
		right	右→左	<marquee direction="right">
		down	上→下	<marquee direction="doown">
		up	下→上	<marquee direction="up">
高さ	height=数値		移動範囲の高さを指定 （文字の大きさは変わらない）	<marquee height=70>	（縦方向の高さの調整に利用)
回数	loop=数値		移動する回数を指定(注)	<marquee loop=5>
			scroll…移動後文字が表示されなくなる alternateまたはslide…移動後文字が停止した状態で表示される。
速度	scrollamount=数値		移動の速さを指定	<marquee scrollamount=1>
				<marquee scrollamount=50>
余白	hspace=数値		移動範囲の横に余白をつける	<marquee hspace=20>
	vspace=数値		移動範囲の縦に余白をつける	<marquee vspace=20>

組み合わせで、このような動きも可能です。
この例は、上への動き＋往復を指定したmarqueeに、左への動きを指定したmarqueeを組み合わせています。
<marquee behavior="alternate" direction="up"><marquee direction="left"><img src="tree1_04.gif"></marquee></marquee>