WEB/システム/IT技術ブログ

CSSでコンテンツ幅を超えた画像を設置してもブラウザの横スクロールを出さないレイアウト

レスポンシブが主流になった昨今ですが、
レスポンシブはコンテンツ幅に関わらずあらゆるデバイスでダイナミックな表現を実現するメリットがあります。
今回、そんな中でのテクニックを1つ。

例えば、横幅が800pxのコンテンツエリアをもつサイトがあると仮定します。
そこに1000pxの画像を設置すると、ブラウザの横スクロールが表示されてしまい、コンテンツの中央がずれてしまいます。

※当サイトはコンテンツエリア指定のないレスポンシブサイトなので、十分に再現できていません。すみません。。

画像を背景として設置するのも1つの解決策ですが、
コンテンツとして画像を設置したい場合に、以下の方法があります。

h1{
	position: relative;
	min-width: 800px;
	height: 100px;
	overflow: hidden;
}
h1 img{
	position: absolute;
	left: 50%;
	top: 0;
	margin: 0 0 0 -500px;
}

画像の上位要素の「min-width」にはコンテンツ横幅を、画像の「margin-left」には画像横幅の半分のサイズをマイナスで指定します。
このようにすれば、画像はコンテンツ中央に表示された状態で1000pxしっかり表示され、さらにブラウザの横幅を800pxに縮めるまでは横スクロールは表示されません。

こちらにデモとして実際に設置してみましたが、やはり当サイトの構成上うまく表示されていません。。。
恐縮ですが、実際には問題なく表示されるはずです。ここではソースサンプルのみということで。

以上、サイトトップページのメインビジュアルでよく利用されるテクニックでした。

B!

Comment

コメントはありません

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives