2010年11月17日

スクロールバー対策(1)

HTMLファイルでは、ブラウザに表示されるページの内容がブラウザの高さで収まらない場合には、右側にスクロールバーが表示されて、上下スクロールを助けてくれる。
 逆に、ブラウザに収まる程度の少ない内容だとスクロールの必要もなく、スクロールバーの必要が無く、実際表示されない。
 ところで、CSSなどを使ってメインコンテンツの部分の幅を指定している場合、メインコンテンツ以外の部分の左(右も同じ)の余白の幅は、
(ブラウザの幅−メインコンテンツの幅)/2
となる。しかし、右側にスクロールバーが表示される場合は、
(ブラウザの幅−メインコンテンツの幅−スクロールバーの幅)/2
となり。メインコンテンツの位置が、スクロールバーの幅の半分だけ左にずれる。
従って、ページ間を移動するたびにメインコンテンツが"左右に揺れる"ことがある。各ページの内容量にかかわらず、"左右に揺れない"ようにして視覚的な安定感を与えたい。



 そこで対策だが、調べてみたら、ちゃんとあった。
CSSで、
html {
overflow-y: scroll;
}
とすればよいことが分かった。

 左の画像がその結果で、下は通常のスクロールバーが表示される場合、上がスクロールバーの必要がないのにスクロールバーのスペースが表示されている場合。メインコンテンツの左右のずれは全くない。

 だが・・・上の画像は、スクロールバーが表示されるケースにバーを下げた場合と同じ見え方と同じだ。証拠の画像にならない。

 でも・・・本当なので、「左右の揺れ」対策をしたい人は、お試しください。

posted by kewpie at 08:07| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/41746508
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。