HTML/CSS モバイルのみワンカラムに

質問

Webページのレイアウトについてです。

Wordpressでブログを書いていて、
PCで見たときは

左サイドバーがあり、
本文があり、
右サイドバーがある

３カラムのレイアウトになっています。
http://chanori.biz/xd/introduce

これをモバイルからみたときだけ、
本文のみのワンカラムにしたいのです。

通常ではfloatを使い、
カラム表示していて、

モバイルの時のみ
メディアクエリでfloat解除しているのですが、

PCの画面を小さくした時しか
反映されず困っております。

なぜiPhone(モバイル)から見た時、
ヘッダーの右に本文がfloatで回り込みしたままなのでしょうか？

お詳しい方よろしくお願いします。

回答No.2

paradoxica · ベストアンサー

No. 1のものです。
すみません、ざっと見ただけだったので状況が確認できておりませんでした。

根本設計の部分に関わる 複合的な問題だと思われます。
( こちらの問題を解消するには 根本設計の見直しが必要になる可能性が高いです )

1. #content の所で 右側マージンと左側マージンが設定されているため、左側マージンが適用されてズレて見えているような気がします。

2. CSSのレスポンシブ部分に関しまして、

@media (max-width: 400px) {

と記載されておりますが、
max-width のみを最後に指定する記述法はあまり見かけません(通例 min-width 等で区切ったりします )。
http://sole-color-blog.com/blog/php/71/
こちら等でお手数ですが一度レスポンシブデザインの書き方を参考にしてみてください。
(更にレスポンシブデザインをiPhoneで適切に表示するためには meta の viewport指定が必須となります。崩れてしまったという事でお話を伺いましたが、一般的なスマホ対応を実施する場合、viewport指定をして 且つスマホでもデザイン崩れせず見られるようにコーディングする必要があります )

また iPhone デバイス対応をする場合 max-width:480px が通例です( 縦画面で見た際320px, 横画面で見た際 480pxのため )。

3. また、こちらは憶測ですが、PCのサイトが元々あって、追加でレスポンシブ対応した形になりますか？？

レスポンシブデザインは モバイルファースト設計といって モバイルでの見え方 PCの見え方 それぞれ考慮した上で設計する必要があります( PC版であらかじめガチガチに組んであるものをレスポンシブ対応するのは 既存のPC版のデザインにも影響が出たり、結構難しい作業になってきます )ので、
レスポンシブ対応する場合は SP / PC 両面で設計を見直す、あるいは SP版、PC版で表示するページを変える 等の対応が良いと思われます。

レスポンシブデザインに関してはこちらの文献に丁寧に記載されており、参考になりますので 是非一度書店でぱらぱらと読んでみてください。
http://goo.gl/NI754B

以上となります。
参考になりましたら幸いです。

お礼

3番でおっしゃられている通りです。
レスポンシブのことなど全く考えずデザインし、
あとで自分の携帯で見てみると悲惨な事になっていたので...

レスポンシブデザインについて勉強し直して、
作り直してみます。

PCの方もワンカラムが流行っているみたいなので
モバイルファーストを意識したワンカラムで行きます！！

この度はお世話になりました。
良かったらサイトをまた見に来てやってください<(_ _)>
ありがとうございました。

回答No.1

paradoxica

metaでviewport設定が必要です。
http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/

補足

すいません、
サイトを参考にヘッダーに記述したのですが、

本文が縦１行にずらっと並んでしまい
おかしくなってしまいました。

floatも解除されませんでした。