みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

こんにちは

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

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

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

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

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

投稿日時 - 2012-12-21 21:11:36

QNo.7855634

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

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

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

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

投稿日時 - 2012-12-21 23:31:39

お礼

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

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

投稿日時 - 2012-12-26 21:38:14

あなたにオススメの質問