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

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

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

<article id="wrapper">
  <h1>DEMO PAGE</h1>
  <div class="block">
    <div class="inner">inner</div>
  </div>
  <div class="block02">
    <p>contents</p>
  </div>
</article>

<div class="inner">inner</div>

</div>

<p>contents</p>

</div>

</article>

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

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

.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{

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の

width:100%;
position: relative;
overflow: hidden;

width:100%;

position: relative;

overflow: hidden;

と.innerの

position: absolute;
left: 50%;
margin-left: -750px;

position: absolute;

left: 50%;

margin-left: -750px;

です。

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

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

2014年06月22日日曜日
：Naruhiko Wakai

BLOG

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

Sponsored Links

comments コメントをキャンセル

Sponsored Links

Naruhiko Wakai