七鍵＠楽天

今日は「MARQUEE」タグの復習をしましょう(〃⌒▽⌒)
「MARQUEE」タグって覚えていますか？
JavaScriptを使用できないここ楽天で、見た目上何かを動かそうと思うと
アニメーションＧＩＦを使うか、この「MARQUEE」タグを使うかのどちらかしか選択肢がありません。
そうです。
この「MARQUEE」タグを使うことによって、簡単に色々なものを動かすことができるのでしたよね(￣▽￣人)
早速例をみてみましょう。

例）
<marquee behavior="alternate" direction="right">ここに書いた文字が動くよー</marquee>

表示結果）
ここに書いた文字が動くよー

思い出しました？
ただ、このタグ注意点がありましたよね。
それは、対応していないブラウザーもあるってことです。
（ブラウザについてよく分からない方はこちらを参照下さい）
ブラウザによって動きが違いますし、そもそも「MARQUEE」タグで囲んだ内容を表示しないブラウザも存在します。
全ての人が同じように見えているわけではないことをしっかり覚えておき、
見えない人のために重要な内容を「MARQUEE」タグで囲むことは避ける、
くらいの心遣いはＨＰを作る側として持っておきたいですよね(〃⌒▽⌒)

次に動くスピードを変えてみましょう。

例）
<marquee behavior="alternate" direction="right" scrollamount="20">ここに書いた文字が動くよー</marquee>

表示結果）
ここに書いた文字が動くよー

ずいぶんと早くなりましたよね(〃⌒▽⌒)
「scrollamount」というのは、ある一定の時間の間に進む距離を指定することができるものです。
何も指定しなければ（記述しなければ）初期値として「6」が適用されますので、
目安として覚えておくと便利かもしれませんね。

次に、動く幅を指定してみましょう。

例）
<marquee behavior="alternate" direction="right" width="200">ここに書いた文字が動くよー</marquee>

表示結果）
ここに書いた文字が動くよー

もうそろそろ見飽きてきたかもしれませんが、「width」で動く幅を指定することができます。

更に動く方向を指定してみましょう。

例）
<marquee behavior="alternate" direction="left">ここに書いた文字が動くよー</marquee>
<marquee behavior="alternate" direction="right">ここに書いた文字が動くよー</marquee>

表示結果）
ここに書いた文字が動くよー
ここに書いた文字が動くよー

違いが分かりましたでしょうか？
「direction」で「left」を指定すれば右端から左に向いて動き出し、
「right」を指定すれば、左端から右に向いて動き出す・・・というわけですね(〃⌒▽⌒)

ちなみに、こんなこともできます。

例）
<marquee behavior="alternate" direction="up" height="100">ここに書いた文字が動くよー</marquee>
<marquee behavior="alternate" direction="down" height="100">ここに書いた文字が動くよー</marquee>

表示結果）
ここに書いた文字が動くよー
ここに書いた文字が動くよー

細かい説明はもういりませんよね（笑
「width」が「height」になり、「left」「right」の変わりに「up」「down」を指定する、ってことです。

更に、動く回数を指定することまでできちゃいます。

例）
<marquee behavior="alternate" direction="right" loop="1">ここに書いた文字が動くよー</marquee>

表示結果）
ここに書いた文字が動くよー

何も指定しなければえんえんと動き続けますが、「loop」で繰り返し回数を指定してやることもできます。
ちなみに繰り返し回数終了後は終了した場所で止まってしまいます。

次に、動作の仕方に多少変化をもたせてみましょう。

例）
<marquee behavior="side" direction="left" width="300">ここに書いた文字が動くよー</marquee>
<marquee behavior="scroll" direction="left" width="300">ここに書いた文字が動くよー</marquee>
<marquee behavior="alternate" direction="left" width="300">ここに書いた文字が動くよー</marquee>

表示結果）
ここに書いた文字が動くよー
ここに書いた文字が動くよー
ここに書いた文字が動くよー

「behavior」に指定できるのは次のとおりです。

behavior="side"：スクロールの端までくると停止する
behavior="scroll"：横切る動作を繰り返す
behavior="alternate"：往復動作を繰り返す

「side」と「scroll」に大差は無いような気がしますが（笑
こんなこともできますよ、ってサンプルでした(〃⌒▽⌒)

そして、動かせるのは文字だけではありません。

例）
<marquee behavior="alternate" direction="up" height="170"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></marquee>

表示結果）


例はちょっと画像がでかくて・・・なんか見た目悪いですが・・・
きっと小さな画像などに使うとおしゃれに見えると思いますよ(￣▽￣人)

そして、最後に・・・
動く範囲に背景色をつけてみましょう。

例）
<marquee behavior="alternate" direction="left" bgcolor="#000000"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></marquee>

表示結果）


いかがでした？
使いすぎるとなんか酔ってしまいそうになるこのタグですが、
ちょっとしたワンポイントにはもってこいですよね(￣▽￣人)
上記は基本中の基本です。
これらを応用してぜひおもしろい活用方法を編み出してください(〃⌒▽⌒)