質問: 画像を画面右から左にjsのanimateを使って横一列で流すプログラムを書いています。 1つ300pxの画像をいくつか繋げて流しているのですが、流す画像の数が増え、現在指定したwidthの数を超えると、画像が横一列の形が崩れ、画像が二段になって表示されてしまいます。 widthを10,000pxといったように、300px × 画像の最大枚数 のwidthを指定すれば下の段に画像が落ちることはないことはわかるのですが、他にもっといい方法はないのでしょうか? 横に並んだ画像が、もし指定したwidthをはみ出したら、下の段に画像表示するのではなく、そのまま、ウィンドウ上には表示されないが、jsのanimateで動き出すと表示される、といったようなコードなどありますか? ### 該当のソースコード ``` ---html--- ---css--- #container { width:4000px; } #image{ top: 100px; right: -50px; position: absolute; right:-1500; } ``` ### 試したこと ・ #containerのwidthを10000pxに設定 ・ #imageにoverflow:hiddenを設定 ・ #containerにoverflow:hiddenを設定 ### 補足情報(言語/FW/ツール等のバージョンなど)
回答: overflow:hiddenで何かを隠したいときは、表示したいサイズになる要素にかけないと意味がないので ``` ``` ``` #wrapper { overflow: hidden; width: 100%; /* 画面の幅 */ height: 200px; /* 適当 */ } #container { width:4000px; /* 画像width x 枚数 とする */ } ``` こうすれば#containerが4000pxあっても#wrapperのoverflowが効いてはみ出た部分は消えますにゃ。 * * * あとは#containerか#image(imgの親要素)にCSS3のflexible boxを使う手もあります。 flex-direction: row; flex-wrap: nowrap; で横方向折り返し禁止状態になるので、 横幅が足りなくなっても画像は突き抜けて2行になることはなくなりますにゃ。 (そのかわりはみ出たものは見えるのでoverflow:hiddenで隠す必要があります)