にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

大きな画像でレイアウトが崩れないように、画像を含むボックスだけを横スクロール可能にするCSSの書き方 [イメージ,ボックス,]

表示しきれない部分は、ボックス内部でスクロールして見えるようにするためのCSSの書き方を紹介。画像が大きすぎる場合に、ページ全体が横スクロール必要になってしまうと困るものの、画像を縮小して表示もしたくない場合には、「ボックス内部で画像だけを横スクロール可能」にする選択肢もあります。どうしても縮小したくないという場合には良さそうな気がします。

大きな画像でレイアウトが崩れないように、画像を含むボックスだけを横スクロール可能にしたい

様々な画面サイズの環境にも対応したいとき、ちょっと困るのが画像の扱いです。最近のPC環境であれば、横幅800px程度の画像ならそのまま表示可能だと考えても良さそうですが、小型タブレット端末だと表示しきれないかも知れませんし、スマートフォンなら確実に横幅が足りないでしょう。

例えば横幅の余裕が400pxしかない領域に、横幅500pxの画像を表示させようと思えば、当然、表示しきれません。その場合は、横スクロールが必要になってしまいます。単に横スクロールで済めばまだ良いのですが、(複雑なレイアウトを作っている場合などでは)ページレイアウト全体が変に崩れてしまう可能性もあります。そうなると困りますよね。

画面(=ウインドウ幅などの描画領域)よりも大きな画像を掲載してもページ全体のレイアウトに影響を及ぼさないように事前に装飾しておく対処方法には、例えば以下のような手段があります。

  1. 描画領域に収まるように、画像を自動縮小する
  2. 表示しきれない部分は非表示にする
  3. 表示しきれない部分は、ボックス内部でスクロールして見えるようにする

最近の正攻法は最初の「自動縮小する」方法だと思いますが、それはAll Aboutで記事にしましたので(※記事「ウインドウ幅に合わせて画像サイズを変化させる方法」をご参照下さい)、ここでは3つ目の「表示しきれない部分は、ボックス内部でスクロールして見えるようにする」方法をご紹介します。ページ全体が「横スクロール必要」になってしまうと困りますが、(ページ内の一部分である)ボックスに横スクロールが必要な仕様になっていても、さほど不便ではありませんから。どうしても「縮小はしたくない」という場合には良い気がします。

表示しきれない部分は、ボックス内部でスクロールして見えるようにする方法

下記のボックス(赤枠)は横幅を300ピクセルに固定していて、それよりも大きな画像などが内部に含まれている場合には、横スクロールバーを表示するようスタイルシートを記述しています。こうすると、大きな画像が貼られても、指定した幅(ここでは300px)よりも大きな空間を占有してしまうことはありません。実際に下記のボックス内には横幅400pxの画像を入れています。しかし、表示されているのは300px分だけで、画像の真下に横スクロールバーが表示されているはずです。このスクロールバーを使ってスクロールさせれば、画像の右側残りの100pxを見ることができます。

▼横幅を300pxに固定したボックス(赤枠)

大きな画像例

※モバイル端末では、スクロールバーは見えないほど細い可能性があります。しかし、画像の上でスワイプさせればスクロール可能です。

上記のボックスの中に入れている画像は、以下の通りです。横幅は400pxあります。

大きな画像例

先ほどはボックスの横幅を300pxに固定しましたが、%などを使って割合で指定することもできます。例えば「80%」に指定すると以下のようになります。
今このページを見ているウインドウ幅が十分あれば、以下の赤枠内にスクロールバーは出ていないでしょう。しかし、ブラウザのウインドウ幅を徐々に狭くしていくと、ある時点からスクロールバーが表示されるようになるはずです。試してみて下さい。

▼横幅を80%に制限したボックス(赤枠)

大きな画像例

このように、描画領域の横幅が足りないときにだけ、画像を含んでいるボックス側に(個別に)横スクロールバーを表示するデザインにしておけば、ページ全体のレイアウトが崩れてしまったり、ページ全体に横スクロールが必要になってしまうことを避けられます。

表示しきれない場合にだけ、ボックス内部で横スクロール可能にするスタイルシート

これを実現するCSSソースはとても簡単で、以下の通りです。

CSSソース

p.sample {
   width: 80%;
   overflow: auto;
}

画像を含んでいるボックス(上記ではp要素)に対してwidthプロパティで横幅を指定し、overflowプロパティの値として「auto」を指定しているだけです。
overflowプロパティは、指定された幅や高さをはみ出さないと表示できないものを、どうやって表示するのかを指定するプロパティです。値に「auto」を指定すると、必要に応じてスクロールバーが表示されます。
上記ではボックスの横幅を80%に設定していますが、ピクセル単位で固定したいなら「300px」などのように書けば良いでしょう。

ちなみに、overflowプロパティの値は、

  • はみ出る部分を一切表示しなくても構わないなら「hidden」を指定します。
  • 常に縦横のスクロールバーを表示させておきたければ「scroll」を指定します。

上記のスタイルシートを用意しておいて、HTMLを以下のように書けば、(描画領域内に収まらないような)大きい画像には横スクロールバーを表示させることができます。

HTMLソース

<p class="sample">
   <img src="画像ファイル名" …>
</p>

今回の例ではwidthプロパティを使って横幅しか指定していませんが、heightプロパティを使えば高さを指定することもできます。その場合には、必要に応じて縦方向にもスクロールバーが表示されます。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---