BLOG

領域より大きな画像でも横スクロールバーが出ないCSSテクニック

キービジュアルのみ迫力を出すために1500pxの領域を使い以降のコンテンツは1000pxで収める
ブラウザの幅を1500px以下にしても横スクロールバーは出したくない
そんな時のCSSテクニックです。

サンンプルページです。

以下はサンプルのソースです。

.innerが大きく見せたい領域です。親要素の.blockは境界がよくわかるように背景色とパディングを設定しています。

.block02が通常のコンテンツエリアです。

ポイントは親要素.blockの

と.innerの

です。

親要素は100%でoverflow: hidden;が掛かっているため、見えていない領域がカットされます。 そのため子要素である.innerに設定してある横幅よりもウィンドウサイズが小さくなっても横スクロールバーが表示されないのです。

.innerは中央に配置されるようにポジションとネガティブマージンで調整しています。 案外使う機会は多いのでは?と思います。

    Sponsored Links

    Nina にコメントする コメントをキャンセル

  • たなべ より:
    はじめまして。cssが苦手な私ですが、ブラウザを小さくすると横スクロールが出たり、背景画像が切れてしまう処理にcssのmin-widthだけでは効かず、途方にくれておりましたところこちらを見つけまして、無事解決できました! overflowの扱いがスクロールを出さないために表示をオフにするというアハ体験でした。勉強させていただきました。
  • Nina より:
    助かりました!!わかりやすい解説有難うございます:)