エラスティックレイアウトがうまくいきません。

質問

エラスティックレイアウトがうまくいきません。
横幅をemでサイズ指定しています。
うまくいかないのはIE6です。
ctrlキー　+　ホイールで文字サイズを小さくすると、
限りなく小さくなっていき、<img>タグで挿入してある画像（px指定）より
小さくなるとカラム落ちします。（当たり前ですが・・・）

firefoxはmin-widthが指定できるので問題ありませんが、
IE6ではどう設定すればいいのかわかりません。
イメージはyahooみたいなエラスティックレイアウトです。

なにか良い方法があれば教えてください。
よろしくお願いします。

回答No.1

noname#66720 · ベストアンサー

http://labs.unoh.net/2007/04/elastic-layout.html
javascriptで実装できるようですね。

もし私がエラスティックレイアウトで同じようにimgで悩んだ場合、imgにはwidthとheightを指定しない方法を取ると思います。
その場合画像は、横幅に応じて縦横比を保ったまま縮小されていきます。

お礼

minmax.jsを利用することにしました。

便利なjavascriptっていっぱいあるんですね…

勉強不足でした。

助かりました。有難う御座いました。

ひとつ聞きたいのですが、

>もし私がエラスティックレイアウトで同じようにimgで悩んだ場合、
>imgにはwidthとheightを指定しない方法を取ると思います。
>その場合画像は、横幅に応じて縦横比を保ったまま縮小されていきます。

ってどういう事ですか？なにかjavascriptのライブラリを使うのですか？

IE7やOperaみたいなページズーム機能をIE6、Firefoxで実装したいので、
画像の拡大縮小も課題なのですが、上記の方法をIE6、Firefoxで実装できますか？

よろしくお願いします。

回答No.3

noname#66720

例えば

<style type="text/css">
div {
width:10em;
}
</style>

<div>
<img src="image.jpg" alt="">
</div>

画像の大きさは100×100で上記のような指定をしたとします。
そうすると、文字サイズを小さくすることでボックスの幅が画像より小さくなった場合にimgがボックスの幅に収まるように縮小されて表示されます。
imgにwidthやheightを指定した場合には使えないのですが、widthやheightは必須属性では無いため記述しなくても問題ありません。

＞ページズーム機能をIE6、Firefoxで実装したい・・・

ちょっとした裏技ですが、画像がそんなに多くない場合であれば、imgに対してem指定でwidthやheigthを指定することで、文字サイズを変えた場合にズームのような表示にすることもできます。

ただ、Firefox3ではブラウザ側で文字のサイズとズームを切り替えられるようになっています。
ですが、もし実際に上記のようなem指定の方法で実装してしまうと、切り替えが実質機能しなくなるということは覚えておいたほうが良いかもしれません。

エラスティックレイアウトはある部分でユーザーが期待している動作と別の動作をしてしまうので、レイアウトに配慮しつつもユーザビリティも損なわないように気をつける必要があります。

お礼

なるほど…

丁寧に回答していただいて有難う御座います。

がんばって勉強します。

回答No.2

ran_2323

http://gyauza.egoism.jp/clip/archives/2007/04/ie6minwidthminheight/

ここのページに、いろいろ方法が載ってますよ（^^）
私だったら、javascriptでmin-widthを実装する方法をとるかな。