ブログに写真をのせるときに面白い効果を持たせるHTMLタグ

写真をブログに貼るときに、少しでも目立つようにできるのが「マーキータグ」というHTML
このマーキータグは、画像を自動で横に動かしたり上に動かしたりすることが可能で
さらに画像だけではなく「文字」も動かすことが可能です

とてもおもしろいタグですので一度は見てはいかがでしょう。
※環境によっては動かない場合があります。もし動かない場合はパソコンで最新のInternet Explorerを使ってみてください。

このマーキータグの特徴はHTMLのみでjavascriptを無効にしても動作するという点がポイントです

写真

使う画像はこちら

マーキータグ

<marquee>　～　</marquee>

デフォルトではこのようなタグの付け方になっています

右から左へ

画像を右から左へ動かしたいときには普通にマーキータグをつけることで動作します

<marquee>
(右から動かしたい文字や写真のURLを入れる)
</marquee>

左から右へ

画像を左から右へ動かすにはマーキータグに「direction=”right”」を追加することでできます

<marquee direction="right">
(動かしたい文字や写真のURLを入れる)
</marquee>

幅を縮める

画像を動かす範囲を縮めたい場合はマーキータグにwidth=”表示させる範囲”を追加することでできます。ここでは、60％を指定。

<marquee width="表示させる範囲">
(動かしたい文字や写真のURLを入れる)
</marquee>

いったり戻ったり

通常は、片方から写真が登場して、片方へ進み消えていきますが、これは壁が反射するようにいったり戻ったりします
行ったり戻ったりする方法はマーキータグにbehavior=”alternate”を追加することで可能になります

<marquee behavior="alternate">
(右から動かしたい文字や写真のURLを入れる)
</marquee>

速度を変える

右から左へと動くスピードがありますが、マーキータグに scrollAmount=”速さ(数字)”これをつけることによって速度をかえることができます
デフォルトでは8で数字が大きいほど早くうごくことができます

<marquee scrollAmount="速さ(数字)">
(動かしたい文字や写真のURLを入れる)
</marquee>

２０

２

下から上へ

右から左へ、左から右へ、今度は下から上へ動かします。マーキータグにdirection=”up”を追加することで使用可能になります

<marquee direction="up">
(動かしたい文字や写真のURLを入れる)
</marquee>

上から下へ

上から下へうごかすにはマーキータグにdirection=”down”を追加。

<marquee direction="down">
(動かしたい文字や写真のURLを入れる)
</marquee>

端っこでストップ

マーキータグにbehavior=”slide”を追加。右から左へ写真が動き左端っこのところでストップします

<marquee behavior="slide">
(動かしたい文字や写真のURLを入れる)
</marquee>

4回走って消える

左から写真が4回流れると消えるタグ。マーキータグにloop=”何回で消えるかの数字”を追加。(ここを読むときにはもうすでに消えているかもしれません。リロードをするとよいでしょう)

<marquee loop="数字">(動かしたい文字や写真のURLを入れる)</marquee>

少し応用

上から下へ動かすタグ、そして右から左へ動かすタグを同時に利用するとこのようなことができます

<marquee direction="down"><marquee>
(動かしたい文字や写真のURLを入れる)
</marquee></marquee>

背景

マーキータグに bgcolor=”色コード”を追加。

<marquee bgcolor=”色コード”><marquee>
(動かしたい文字や写真のURLを入れる)
</marquee></marquee>

まとめ

以上が、マーキータグ、面白いHTMLタグの紹介でした
このタグはjavascriptを無効にしても動くというポイントがあるため
簡単な動きを表現したいなら、このマーキータグを使うと良いでしょう。