overflowプロパティを使ってスクロールバーを出す
「画像の横幅」が「段の横幅」よりも大きい場合に、自動的にスクロールバーを出して、段組構成を崩さないようにしてみましょう。 そのようなデザインを実現するには、スタイルシートの overflow プロパティを利用します。
overflowプロパティは、はみ出る部分の表示をどうするかを指定できるプロパティです。 値に、「hidden」を指定すれば、はみ出る部分は表示されなくなります。 値に、「auto」や「scroll」を指定すれば、はみ出る部分にはスクロールバーが出るようになります。
先ほどの例は、次のようにソース（スタイルシート）を記述することで実現できます。
width: 100%;
overflow: auto;
}
largeimageクラス(※1)のdiv要素に対して、横幅を「100%」にし、はみ出る部分の指定を「auto」(※2)にしています。
そして、HTMLを次のように記述します。
<img src="big.jpg" width="640" height="200" alt="大きな写真">
</div>
このように記述すると、「div要素内に含まれる内容の横幅」が「段の横幅」よりも大きくなる場合に、 自動的にスクロールバーが表示されるようになります。 段の横幅が十分広い場合には、スクロールバーは出ません。
上記の例では、div要素の中に画像（img要素）しか入れていませんが、画像に加えて文字などを含めても問題ありません。
※1：ここではdiv要素のクラス名を「largeimage」としましたが、もちろんどんなクラス名にしても構いません。
※2：overflowプロパティの値に「auto」ではなく「scroll」を指定すると、大きさに関係なく、常時スクロールバーが表示されます。「hidden」を指定すると、はみ出る部分は非表示になります。（スクロールバーは出ません。）
overflowにはwidthも一緒に
先ほどのソースでは、overflowプロパティと一緒に、widthプロパティも記述しています。
widthプロパティは、ブロックの横幅を指定するプロパティです。値の単位に%を使えば、親ブロックの横幅に対する割合で大きさを指定できます。
widthプロパティの値に「100%」を指定すれば、「元々使用できる空間すべてを占有する」という指定になります。 この指定はなくても望み通りに表示できるブラウザや場面もあるのですが、この指定がないとうまく表示できないブラウザや場面もあります。 overflowプロパティを使うときには、忘れずに同時に記述して下さい。
tableレイアウト内で使う場合には注意
今回ご紹介した方法は、スタイルシートを使って段組を構成している場合には、うまく活用できます。 ところが、table要素を使って段組を構成している場合には、うまくいかない可能性があります。 tableレイアウト内で使いたい場合には、事前に崩れないかどうか様々なブラウザでよく確認してからご使用下さい。
今回の方法に限りませんが、tableレイアウトの中で幅を指定するようなスタイルシートを使う場合に、うまくいかないことがありますのでご注意下さい。
おわりに
今回は、「段の横幅」よりも大きな画像を貼っても、段組構成が崩れてしまわないようにする方法をご紹介致しました。
特にブログなどでは、画像を貼ることもよくありますね。そんな際に、レイアウトが崩れてしまわないように、ぜひご活用下さい。
