※これを書いている今すんごく眠たいので、日本語が破綻していないかどうか心配だ…。
今日のネタは、大きな画像を貼ってしまったためにウインドウ幅の狭い環境でレイアウトが崩れてしまうのを防ぐ方法。

横幅の余裕が400pxしかない環境で、横幅500pxの画像を表示させれば、当然表示しきれません。その場合、横スクロールすることになります。単に横スクロールが必要になるだけならいいんだけど、複雑なレイアウトを作っている場合、ページレイアウト全体が変に崩れてしまう場合もあるかも知れません。
そこで、ウインドウ幅よりもでかい画像があっても、ページ全体のレイアウトに影響を及ぼさないように装飾を作っておくのが良さそうです。

例えば、下記のボックスは、横幅を300ピクセルにしていて、それよりも大きな画像などが内部に含まれている場合には、スクロールバーを表示するよう装飾を指定しています。こうすると、大きな画像が貼られても、指定した幅より大きなサイズを占有してしまうことはありません。実際に下記には、横幅400pxの画像を入れています。表示されているのは300pxだけで、スクロールバーが表示されていると思います。スクロールさせれば、残りの100pxを見ることができます。

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

先ほどは横幅を300pxに固定しましたが、％などを使って割合で横幅を指定することもできます。例えば、80％に指定すると以下のようになります。
（現在閲覧しているウインドウ幅が十分あれば、以下の画像にスクロールバーは出ていないでしょう。でも、このウインドウを徐々に小さくしていくと、ある時点からスクロールバーが表示されるようになるはずです。試してみて下さい。）

これを実現するスタイルシートソースは以下の通り。

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

ただ、ボックスに対して横幅を指定し、overflowプロパティの値に「auto」を指定しているだけです。
overflowプロパティは、指定された幅や高さをはみ出さないと表示できないものを、どうやって表示するのかを指定するプロパティです。値に「auto」を指定すると、必要に応じてスクロールバーが表示されます。はみ出る部分を一切表示しなくても構わないなら「hidden」を指定します。

このスタイルシートを用意しておいて、HTMLを以下のように書けば、大きい画像にスクロールバーを表示させることができます。

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

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