リキッドレイアウトについて疑問です。

スマホ用のサイトと1本化もできるので、最近はリキッドレイアウトで組んでいるサイトも
多いですが画像を多用しているサイトの場合は向いていないような気がしています。

ウィンドウの幅によりコンテンツ枠も増減しますが、モニタのサイズや解像度によって
最初の見え方って違いますよね？

左カラム(サイドバー)が30%で右カラム(メインコンテンツ)が65%だとしてもあくまでも
%指定なので画像は何pxで作成すればいいのか？と疑問になります。

自分の環境では、右カラムに画像を配置するには650pxでジャストだとしても他の
環境で見れば必ずしもジャストではないでしょうし、min-widthで650pxを指定すれば
問題ないですが、今度はスマホだとフィットしなくなります。

基本的に、テキストベースのサイトで画像は背景画像のみ使用しかつrepeat-xで
見栄えに差支えないものじゃない限りリキッドレイアウトできれいに見せるのは
無理なのかと思っているのですがいい方法ってあるんでしょうか？

仮にimgにwidth:100%としても作成したサイズより大きくなれば荒く見えますし
overflow:hiddenにすると全てが見せれなくなってしまうので、どうすればいいのか
悩みどころです・・・

No.3 ベストアンサー 回答者： tracer 回答日時： 2012/03/29 13:36

>しかし、結局のところコンテンツ枠を%指定するのは変わらないので

>imgタグで画像を配置する場合に、何pxで作成して配置すればいいのか
>という点について、いまいち理解できていないのですがその点は
>どうするべきなのでしょうか？

フレキシブルと言っても、3、4パターンくらいを用意する場合がほとんどだと思います。つまり、3、4パターンの画像サイズを用意すればよいということになります。CSSで画像サイズを指定できるのはご存知かと思いますが、何らかの最大画像を用意(たとえば960幅レイアウト用の画像)して、あとは、float落ちした時などにCSSで画像サイズを変更するようにすればよいと思います。

答えになっているでしょうか。

この回答へのお礼

お返事遅くなり申し訳ございません。。。
幅に合わせる前提ではなく、幅より大きいサイズの画像を用意して後はCSSで
調整してやればOKということですね！

グリッドレイアウトだと幅に合わせて画像を作成していたので難しく考えて
おりましたが、シンプルにできそうなので挑戦してみたいと思います！

最後までお付き合いいただきありがとうございました！

お礼日時：2012/04/02 12:55

No.2 回答者： dscripty 回答日時： 2012/03/29 10:08

[ANo.1] さんも書いているけれど、メディアクエリ前提。

viewport の maximum-scale で最大スケールを制限して、最大サイズに合わせて原画の大きさを決めればよさそうなきがするよ？


下の文書は、android 用だけど、iOS でもほとんど同じだと思う(未確認)。

「2. ウェブアプリの画面対応 - ソフトウェア技術ドキュメントを勝手に翻訳」
http://www.techdoctranslator.com/android/webapps …

No.1 回答者： tracer 回答日時： 2012/03/29 09:17

現在、スマートフォンなどに利用されているレイアウト方法は、リキッドレイアウトではなく、MediaQueryを利用したフレキシブルレイアウトが多いと思います。

以下のURLが参考になります。

http://design-spice.com/2011/08/31/web-layout7/

この回答への補足

お返事ありがとうございます。
>MediaQueryを利用したフレキシブルレイアウトが多いと思います

そうだったんですね！ウィンドウの幅に応じて、ウィンドウが○○○px以上であれば
文字と画像を横並びにするレイアウトをし、以下であればfloatしないまたは、画像を
表示しないというcssを書くということですね。

しかし、結局のところコンテンツ枠を%指定するのは変わらないのでimgタグで画像を
配置する場合に、何pxで作成して配置すればいいのかという点について、いまいち理解
できていないのですがその点はどうするべきなのでしょうか？

参考urlを拝見しましたが、テキストベースの例ばかりでわかるようでわからない感じです・・・

補足日時：2012/03/29 11:59