大きな画像でレイアウトがあばばばばば

Posted at 2005-10-13T08:08:00+09:00 in Web Design

大きな画像を利用するとレイアウトや見た目がメチャクチャになる場合があります。このサイトのように本文のカラム(つまり様々な画像を利用するカラム)が左でメニューのカラムが右にあるような場合や要素の内容物によりその要素のボックス幅が修正されてしまうというバグのあるInternet Explorerでは顕著です。幅固定なレイアウトの場合は、本文のカラムの幅は確実に把握できるので、それに合わせて画像をリサイズした上で利用すれば良いわけですが、幅可変なレイアウトの場合は、当然本文のカラムの幅が不定なのでそういうわけにはいきません。こういったケースにはoverflowの値にhiddenやscrollを指定することでレイアウトや見た目の崩れを回避することが可能です。

overflowは要素のボックスからはみ出す内容物をどう表示するかを指定するプロパティで、値にhiddenを指定するとはみ出した部分は表示されません。つまり、

<div id="contents">
  <div class="image_container">
    <img src="foo.png" alt="でかすぎ・・・" width="100000000" height="100" />
  </div>
</div>

というHTMLコードに対して、

div.image_container {
  width: 100%;
  overflow: hidden;
}

と、CSSのルールを書いておけば、foo.pngは#contentsの横幅をはみ出す部分は隠されるので、foo.pngの幅がどんな大きさでも問題ありません。

「レイアウトや見た目を崩したくないけど、せっかくの画像を隠すのも嫌だ」とかいう場合にはhiddenではなくscrollを使うと良いです。ブラウザによってscrollによる表示はかなり異なるのでちょっとアレな感じですが。

img要素に対してmax-widthを指定するというアプローチの方がよりスマートかもしれません。が、Internet Explorer(以下略)。Internet Explorerでもexpression()を使ってゴニョゴニョすればmax-width相当(またはそれ以上)のことが実現可能ではありますけど。

以上は特に画像に限った話ではなく、pre要素やiframe要素などのボックス幅で折り返されない要素でも同じ話です。特にAdSenseで利用されているiframe要素では幅と高さが指定されておりimg要素とほとんど同じケースです。「AdSenseのせいでレイアウトが崩れてる！」とかあまり笑えない話なので、このようにoverflowを使ってレイアウトの崩れを回避するようにしておくと「広告うざ・・・」と思われる回数が多少は減ることでしょう。