マーキー

おもしろタグ教室【画像をアップロールで動かしてみよう】

■【画像をアップロールで動かしてみよう】

【初心者のためのＨＰの飾りつけ教室】とは別に、余談のページを作ってみました。
ここではちょっと変わったタグや、趣向を紹介していきましょう。

みなさんのホームページで、時々見かけるのに、スクロールがありますね。文字を動かしていたり、アニメＧＩＦを動かしたりしています。あれを、今度はやってみましょう。

ただ、文字や画像を動かすだけでは、つまらないので、ＴＡＢＬＥの中に写真の画像を入れて、動くアルバムのようにして見ます。

下のような「アップロールのアルバム」のタグを紹介します。

この「テーブル」には、６枚の画像が入っていますが、１枚の画像の重さは、２０Ｋｂ程度に落としてあります。あまり、枚数をおおくしますと、「テーブル」自体が重くなってしまいますから注意してくださいね。

☆私の孫たち☆

シュン＆カイト

カイト

シュン

カイト＆パパ

デスク

☆おしまいです☆

この「アルバムスクロール」はかよさんのページで使用しているものです。

■【画像をアップロールで動かしてみよう】のタグ！

まずは、一番基本になる「MARQUEE」のタグを「TABLE」の中に入れた物を紹介しましょう。みなさんが良く使っている、文字のスクロールのタグです。
「MARQUEE」とは、文字や画像を動かすためのタグだと思ってください。

<TABLE border=4 bordercolor=pink bgcolor=white><TD><marquee direction=up height=100 width=200 scrollAmount=2>これが元の、アップスクロールです。</TD></TABLE>

★↑のタグを貼り付けますと、下のように現れます。★

これが元の、アップスクロールです。

★では簡単ですが、タグの説明をしておきましょう。★

border=4   はテーブルの枠の太さを指定します。
bordercolor=pink   はテーブルの枠の色を指定します。
bgcolor=white   はテーブル内の背景の色を指定します。
direction=up   はスクロールの方向を指定しています。ここでは、UPですね。
height=100 width=200   はスクロールする範囲と大きさを指定しています。
scrollAmount=2   はスクロールの速度を指定しています。

★みなさんも、実際に数字や色を変えて見て、どのようになるか、やってみてくださいね。★

では、画像を動かして見ましょう。簡単に言えば、画像をスクロールさせるには先ほど文字を書いた所に、画像のタグを入れればいいだけです。
ここでは、２枚の写真を入れて見ました。

★↑のタグを貼り付けますと、下のように現れます。★
画像のURLは【http://plaza.rakuten.co.jp/img/user/65/14/1286514/3.jpg】を使っております。

【注意点】

画像をスクロールさせる時に、一番の注意点は、画像の大きさ、
<IMG SRC="～画像のURL～" width="画像の大きさ" height="画像の大きさ">に合わせて、「marquee」のwidth="画像の大きさ" height="画像の大きさ"も合わせる事です。

上では、２つの画像を使っておりますが、
<IMG SRC="～画像のURL～" width="画像の幅" height="画像の高さ">
のタグを増やす事で、数枚の画像をスクロールする事が出来ます。先に述べましたが、あまり、多くの画像でスクロールさせますと、テーブル自体重くなってしまいますので、注意してください。画像は数枚が見る人にも、良いと思うのですが。

画像を複数入れる場合には、画像と画像の間に、改行のタグ<P>を入れたほうがいいと思います。そうしないと、画像と画像がくっついてしまいますので、判りずらくなるからです。

【参考にしてください。】

一番上にある、「スクロールテーブル」のタグをこの下に載せて置きますので、みなさんも参考にしてください。これは、３つの「table」と３つの「marquee」で、出来ています。