[WEB制作] フルサイズwidthに関して

質問

こんにちは

今webサイトを制作しています。

フルサイズの幅で設定したデザインを想定して、コーディングをしようとしています。

そこで、width: 100%; 以外の方法で、横の幅をフルスクリーンにする方法を教えていただけたらと思います。

実は以前に作ったサイトがwidth: 100%;で制作して、iPhoneで確認するとどうしても形が崩れてしまいます。

ご教授のほど、よろしくお願いします。

回答No.1

ORUKA1951

画面サイズを参照して巾いっぱいで表示するのはwidth:100%で間違いありません。
その表示幅を基準に、%で指定していくことです。
ブロックのサイズは、直近のstatic以外のコンテナブロックの巾を参照すること。
ブロックのサイズはpadding辺の内辺であること。
を理解していれば良いでしょう。
　その要素が何であるか--ブロックなのかインラインなのか、置換要素なのか非置換要素なのか、分離ボーダーモデルなのか否かなどによってサイズの決定方法は変わります。

　まあ、paddingを使用しないこと、border巾は固定なので小さな画面ではその巾を見越して配置することに注意すれば良いでしょう。

　その上でmin-widthとmax-widthを活用します。
[例] CSSのレイアウトについて - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7847891.html#a3 )
　また、スマホに関してはCSS3のメディアクエリが使用できますので、それでスタイルを切り替える技が使用できます。

お礼

返信遅れましたが、色々と参考にさせていただけました。

今後ともご教授のほど、よろしくお願い申し上げます。