画像のスクロール

[新着] Webテンプレートを仮オープンしました



0   名前: ざい : 2006/11/07(火) 22:50  ID:B6tW90XI
画像をブラウザ画面の一番下に隙間なく表示し、かつ横にスクロールできるようにしたいのですが、
画像の表示位置の設定がよく分かりません。

これまでには、

1:「marquee」タグを使って画像をスクロールさせる
2:CSSで背景画像として扱ってみる

とやってみましだが、

1だと、画像と一番したとの間に隙間ができてしまいました
2だと、横にスクロールする方法が見つかりませんでした。

初心者なので説明が分かりにくい場合は言ってください
よろしくおねがいします

1   名前: masao : 2006/11/07(火) 22:50  ID:9BbJXHyf
それは、タイルのように画面いっぱいに並べたいということですか?
その場合は、<body background="画像の場所">でできます。

2   名前: ざい : 2006/11/07(火) 22:50  ID:B6tW90XI
すみません。説明不足でした…

ひとつだけの画像です。
ブラウザ画面の一番下と画像の下との間に隙間を入れないようにしたいです。

3   名前: アヤ : 2006/11/07(火) 22:50  ID:I/L72zbC
画面の下部に同じ画像を1列に帯状に並べて、自動的にスクロールさせたいということでしょうか?
それならば、一番簡単なのは「marquee」を使用する方法だとは思いますが。

他に、私が思いつくのはJavascriptを使用して、表示位置を一定時間ごとに変えてスクロールしているように見せかける方法なのですが、これは延々と処理が続きます(つまり読み込みがずっと繰り返し)。
私的にはおすすめしませんが、そういう方法ならあります。

4   名前: チャンタ : 2006/11/07(火) 22:50  ID:fk3TYl6y
1.の方法を使いつつ、なおかつCSSで

body { margin-bottom: 0px;]


じゃダメ?

ところで<marquee>タグって、今のブラウザではほとんど対応しているんですかね?

5   名前: アヤ : 2006/11/07(火) 22:50  ID:I/L72zbC
あ、そうですね。
隙間をなくすにはbodyのmarginとpaddingを共に0に設定すれば、どのブラウザでも隙間できないみたいです。

一応、現在の最新バージョン(IE、NN、Ff、Operaそれぞれ)だったら、全部サポートしてるみたいですよ。確認してみました。
NNとOperaはボックスで囲んだ場合に横幅指定が必要みたいですけど。

6   名前: チャンタ : 2006/11/07(火) 22:50  ID:fk3TYl6y
>アヤさま

わざわざブラウザの対応を調べてくださったんですね、ありがとうございました!(^^)


7   名前: ざい : 2006/11/07(火) 22:50  ID:B6tW90XI
皆さん回答ありがとうございます。

チャンタさんの方法を試してみたんですが、この場合どのようにスクロールできるようにするのでしょうか?

とりあえず今のホームページの状況を見てもらうためにアドレスをのせておきます。

ttp://1st.geocities.jp/ngw5p/

8   名前: チャンタ : 2006/11/07(火) 22:50  ID:fk3TYl6y
説明をはしょりすぎましたかね・・・(^^;
<marquee>タグで画像をスクロールすることまでは出来ている、と言う前提ですが、

>1.の方法を使いつつ、なおかつCSSで〜

と言うことで、1の方法の「<marquee>タグを使って画像をスクロールさせる」をそのまま使ってください。

body { margin-bottom: 0px;]


と言うのは、ざいさんのおっしゃった、

>1だと、画像と一番したとの間に隙間ができてしまいました

を解決するためにCSSに加えてください、そうすれば隙間は埋まると思います、と言う意味なのです。

ページを拝見しましたが、多分下辺の隙間はなくなると思います。
もしもまだ隙間が空くときは、[marquee]タグでスクロールさせる画像ファイルを表す[img]タグの記述法を変えてみてください。

<marquee>
<img〜>
</marquee>


のように、<img〜>タグの後に改行が入ると、IEでは左がわと下に少し隙間が出来てしまいます。

<marquee><img〜></marquee>


と言う記述に変えてみてください。画像が複数あるときも

<marquee><img〜><img〜><img〜></marquee>


というように、見づらいですがぶっ続けで記述するのがポイントです。

これで試してみてください。 では。

9   名前: チャンタ : 2006/11/07(火) 22:50  ID:fk3TYl6y
訂正します、すいません。

><img〜>タグの後に改行が入ると、IEでは左がわと下に少し隙間が出来てしまいます。

左じゃなくて、右でした!ごめんなさい!

せっかくなので書き加えますと、Fx、Operaあたりは<img>タグの後の改行が入っても隙間が空くことはないと思います。
たしかMac標準のSafariも隙間は空かないと思います。

IEだけが常にズレ気味なようです・・・。

では。

10   名前: ざい : 2006/11/07(火) 22:50  ID:B6tW90XI
ありがとうございました

早速試してみます。

一覧へ戻る