• 締切
  • すぐに回答を!

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

  • 質問No.7855634
  • 閲覧数497
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 66% (2/3)

こんにちは

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

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

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

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

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

回答 (全1件)

  • 回答No.1

ベストアンサー率 45% (5062/11035)

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

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

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

お礼率 66% (2/3)

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

今後ともご教授のほど、よろしくお願い申し上げます。
投稿日時:2012/12/26 21:38
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ