254036

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Aug , 2026
Jul , 2026

Jun , 2026

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Oct 12, 2004

タグを覚えよう【第５５回目】　-　いろいろ動かせるタグ（復習）

(6)

テーマ：タグに挑戦！(102)

カテゴリ：タグ教室

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

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

ここに書いた文字が動くよー

思い出しました？
ただ、このタグ注意点がありましたよね。
それは、対応していないブラウザーもあるってことです。
（ブラウザについてよく分からない方はこちらを参照下さい）
ブラウザによって動きが違いますし、そもそも「MARQUEE」タグで囲んだ内容を表示しないブラウザも存在します。
全ての人が同じように見えているわけではないことをしっかり覚えておき、
見えない人のために重要な内容を「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>

表示結果）

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

お気に入りの記事を「いいね！」で応援しよう

最終更新日 Oct 12, 2004 12:03:57 AM
コメント(6) | コメントを書く

[タグ教室] カテゴリの最新記事

■コメント

Re:タグを覚えよう【第５５回目】　-　いろいろ動かせるタグ（復習）(10/12)

もとsun さん

おはようございますｗ
文字や画像がウロウロしてるのを見て、思わず笑ってしまいました！！
おもしろいですね。
日記の中でここぞ！という時に使ってみたいですｗ
ありがとう、七鍵さん♪
(Oct 12, 2004 05:50:08 AM)

返事を書く

Re:タグを覚えよう【第５５回目】　-　いろいろ動かせるタグ（復習）(10/12)

ｆｏｏｌｉｓｈ☆ｆｏｏさん

こんにちは。
今日は日記で、タグ練習。
画像を動かして遊んでみました。
凄く気に入りました。
一人でケラケラ笑ってます。o(〃^▽^〃）o♪

試しにトラックバックを送ってみようと思ったら、こちらは利用されてないのですね。 (Oct 12, 2004 10:45:51 AM)

返事を書く

ヽ(*⌒∇⌒*)ﾉやっほー♪

RainbowAngel さん

七鍵ちゃ～ん、お久♪

風邪良くなった？(´･ω･`)
無理しちゃダメよー。。

あら？ピコピコと鍵さんが動いてるｗ
こんなのも出来たのね(⌒▽⌒)面白いね♪

今夜はお話できるかな～と思ったけど…
私、早くに寝ちゃいそう(´･ω･`)
タイミング良ければ多分捕獲できるでしょうｗ
ふふふ(〃⌒▽⌒)またねー♪

(Oct 12, 2004 11:12:35 AM)

返事を書く

Re[1]:タグを覚えよう【第５５回目】　-　いろいろ動かせるタグ（復習）(10/12)

＃七鍵さん

もとsunさん

いらっしゃーい(〃⌒▽⌒)

そうですね(〃⌒▽⌒)
ここぞ！って感覚が大事だと思います（笑
意味無く動いてる上記のような例はだめ例で・・・
動いてても違和感が無いものをさりげなく動かすような使い方が
きっとうまい使い方なんでしょうね(￣▽￣人)

(Oct 13, 2004 11:34:49 PM)

返事を書く

Re[1]:タグを覚えよう【第５５回目】　-　いろいろ動かせるタグ（復習）(10/12)

＃七鍵さん

ｆｏｏｌｉｓｈ☆ｆｏｏさん

いらっしゃいませー(〃⌒▽⌒)

画像って動かし方によっては楽しいですよね。
以前紹介しました
http://plaza.rakuten.co.jp/hacdic/diary/200408230000/
なども参考になるかと思います(￣▽￣人)

ちなみに、トラックバックって何でしょう？（笑
最初に設定した際に良く分からないものは全て「OFF」にしたような気がします(´･ω･`)
勉強しておきますね(〃⌒▽⌒)

(Oct 13, 2004 11:37:38 PM)

返事を書く

Re:ヽ(*⌒∇⌒*)ﾉやっほー♪(10/12)

＃七鍵さん

RainbowAngelさん

やほー(￣▽￣人)

しっかり捕獲されました（笑
風邪？
昨日は日記も書かずに早々に寝たのに（←言い訳
全然治ってません(´･ω･`)
やっぱり「お酢」より「お酒」の方が風邪に効きそうよ(￣▽￣人)

(Oct 13, 2004 11:39:47 PM)

返事を書く