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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(更新日：2019年09月16日)