United Unlimited - ユナイテッド アンリミテッド -

Internet

CSS

CSS:横スクロールとwidthの問題

twitter
RSS

CSS:横スクロールとwidthの問題

2009年 08月 03日(月曜日) 17:08, posted by sacocha

当サイトのバグを直しつつ、いつかまた苦戦しそうな気がするので書いておきます。

検索するとよくヒットするFirefoxで背景画像が表示されない件ではなくて、横スクロールとwidthにからんで、背景画像が途切れてしまう症状についてです。

検索してもヒットできなかったので、みんなこんなことには悩んでないのかなぁ。
普通にクリアできちゃう現象なのかも。(^^;

でもMovableTypeの管理画面も同じ症状になるし、対応できてないサイトももしかしたら多いかも?


当サイトを例にして書きます。
背景を除くページコンテンツ幅は950pxです。

当然、950pxより小さいサイズのウインドウでサイトを表示すると、横スクロールバーが表示されます。

横スクロールバーで右の方を表示しようとすると・・・
CSS backgroundこのように(黒帯より下の部分)、最初のウインドウ幅(左側途中)の部分までしか背景画像が表示されない状態になってしまいます。
画像じゃなく背景色を使っても同様になります。

「width: 100%」を指定していればなんとかしてくれそうなものですが、これはウインドウサイズに対しての幅%指定なので、ウインドウサイズが950px以下の状態で当サイトを開いた場合、100%<950pxということになり、横スクロールで右側を表示すると(横幅100%以上の領域なので)背景がつかなくなります。

ウインドウ右下とかつまんで、ウインドウサイズ自体を広げる分には、ウインドウwidth自体が広がるので、背景画像も追随して横に広がってくれます(width: 100%で)。


横幅800pxサイズで見ている人もいるでしょうし、なんか格好悪いので、解消方法を検索してみたのですが、そもそも検索が下手なのか同症状に遭遇せず。orz
地道にテスト検証しました。

直ってみれば、至極簡単だったんだけどね。(^^;

min-width: 950px;
と入れるだけです。
(最小幅を950pxとする)

背景画像を入れてるところでも良さそうだけど、当サイトではbodyのクラスに指定しました。
min-widthだけだと、ウインドウ幅が950px以上の状態でページを開いた時に背景画像が表示されない場合があるようなので、width: autoも指定してあります。

これで、横スクロールを動かしても背景が表示されるようになりました♪

Mac: Safari 4, Firefox 3, Opera 9
Windows: IE 7, Firefox 3, Chrome 2, IE 8(テストツール)
で確認。

Windows Internet Explorer 6 はmin-widthに対応していませんので、ダメです。
もうバージョン 8 が出ている時代なので、6は切り捨てても良いかもしれませんが。。(^^;

当サイトはIE6で見ると、外部読み込みコンテンツ含めて崩れるので、対応が面倒なのでIE6はスルー気味です。

「CSS min-width IE6」でグーグル先生に訊くと、実装方法がヒットしますので参考まで。

トラックバック

http://unitedunlimited.net/mt/mt-tb.cgi/1282

コメント

サブカテゴリー
最近のコメント
月間アーカイブ
2018年4月
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Profile : sacocha
ウェブ業界で17年程、起業12年目のWebディレクターです。
Apple製品好き。ガジェット好き。

MacやiPhoneに関する情報、気になるITニュースなどを紹介しています。

■愛用品♪
iMac 27inch (2017)
MacBook Pro (2013)
Apple iPhone
Apple iPad
Apple Watch
Xperia XZ Premium
OLYMPUS OM-D E-M5

■他サイト
⇒さこ茶屋
気まぐれに撮ったご飯写真。(^o^

Follow me on Twitter
twitter

iPhone用 United Unlimited.
ケータイ用 United Unlimited.
タグクラウド
ページの先頭へ戻る