読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

スマホサイトではwidth100%に注意が必要

リキッドデザインなどを作る際によく用いられる「width:100%」ですが、スマートフォンサイトで使う時は注意が必要です。
よく、ヘッダーなりフッターなりに背景色を横幅いっぱいにつけたい時、CSSで「width: 100%;」と指定しますが、実際に確認すると、途中で切れている場合が多々あります。
f:id:yachin29:20150401192717p:plain

これは、viewportに「width=device-width」を設定しているためで、viewport に「width=device-width」を設定していると[ body の横幅 ] = [スマートフォンの画面の横幅(例えばiPhone5なら320px)]と解釈されてしまうので、headerなりfooterの横幅も320px相当になってしまうため、背景色や背景画像が表示される領域も320pxになってしまうわけです。

解決方法は実際に表示させたい横幅の値を「min-width」で指定してあげれば大丈夫です。例えばcontainerに960pxを指定していれば、「min-width:960px;」とすればOKです。
f:id:yachin29:20150401192550p:plain

body {
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  line-height:1.5;
 background-color:#f5f5f5;
 min-width: 960px;
}

#container {
  width:960px;
  margin:0 auto;
  overflow:hidden;
 background-color:#FFF;
}