|
テーマ:タグに挑戦!(102)
カテゴリ:タグ教室
一日一タグとか言いつつも・・・
少し飛ばしすぎですよね(笑 これでは読んでもらってる方に申し訳ない(´・ω・`) ってわけで、今回は「MARQUEE」タグに焦点をしぼって話を進めていきます(〃⌒▽⌒) 皆さん、「MARQUEE」タグってご存知ですか? 知らない人のために・・・ 百聞は一見にしかずとも言いますからとりあえず例を(〃⌒▽⌒) 例) <marquee behavior="alternate" direction="right">ここに書いた文字が動くよー</marquee> 表示結果) ごちゃごちゃとして多少難し目ですが・・・ ちょっとしたワンポイントにもってこいですよね(〃⌒▽⌒) ただ、このタグなんですが、注意点が一つあって・・・対応していないブラウザーもあるのですよ。 (ブラウザについてよく分からない方はこちらを参照下さい) ブラウザによって動きが違いますし、そもそも「MARQUEE」タグで囲んだ内容を表示しないブラウザも存在します。 全ての人が同じように見えているわけではないことをしっかり覚えておき、 見えない人のために重要な内容を「MARQUEE」タグで囲むことは避ける、 くらいの心遣いはHPを作る側として持っておきたいですよね(〃⌒▽⌒) さて、いらぬ前置きが長くなりましたが本題に戻りましょう(笑 まず変化を加えたいのは動くスピードですよね(〃⌒▽⌒) 例) <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> 表示結果) いかがでした? 一つのタグだけとってみてもほんとうにいろいろなことできますよね( ̄▽ ̄人) ただ、今日紹介しましたのは基本中の基本です。 後はこれらを使っていろいろなものと組み合わせて・・・ オリジナルな使用方法を考えてみて下さいね(〃⌒▽⌒) ではまた明日ー(゚▽^*)ノ⌒☆ お気に入りの記事を「いいね!」で応援しよう
[タグ教室] カテゴリの最新記事
|