領域より大きな画像でも横スクロールバーが出ないCSSテクニック
キービジュアルのみ迫力を出すために1500pxの領域を使い以降のコンテンツは1000pxで収める
ブラウザの幅を1500px以下にしても横スクロールバーは出したくない
そんな時のCSSテクニックです。
以下はサンプルのソースです。
|
1 2 3 4 5 6 7 8 9 |
<article id="wrapper"> <h1>DEMO PAGE</h1> <div class="block"> <div class="inner">inner</div> </div> <div class="block02"> <p>contents</p> </div> </article> |
.innerが大きく見せたい領域です。親要素の.blockは境界がよくわかるように背景色とパディングを設定しています。
.block02が通常のコンテンツエリアです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.block{ width:100%; padding:50px 0; margin-bottom:20px; position: relative; overflow: hidden; height: 400px; background:#0CF; } .inner{ width: 1500px; height: 300px; padding: 50px 0; position: absolute; left: 50%; margin-left: -750px; background: #FC3; } .block02{ width:1000px; padding:200px 0; margin:0 auto; background:#eee; } |
ポイントは親要素.blockの
|
1 2 3 |
width:100%; position: relative; overflow: hidden; |
と.innerの
|
1 2 3 |
position: absolute; left: 50%; margin-left: -750px; |
です。
親要素は100％でoverflow: hidden;が掛かっているため、見えていない領域がカットされます。 そのため子要素である.innerに設定してある横幅よりもウィンドウサイズが小さくなっても横スクロールバーが表示されないのです。
.innerは中央に配置されるようにポジションとネガティブマージンで調整しています。 案外使う機会は多いのでは？と思います。
- 2014年06月22日日曜日
- ：Naruhiko Wakai
たなべ より: 
Naruhiko Wakai 
Nina 
コメントを残す