やったぜ。

こんばんみ。

昨日はうまくいかなかったレスポンシブWEBデザインのコーディングですが、詳しく解説されている記事を読んでみると案外あっさりできました。

ASCII.jpさんのこちらの記事を参考にしました。
どうやら昨日試した時はスマホのウィンドウ幅に合わせる為の「＜meta name=”viewport” content=”width=device-width “＞」の記述を知りませんでした。
この記述がないとスマホで表示した時、スマホ側がPCサイトを表示することを想定した仮想の大きなウィンドウサイズを設定してしまうみたい。
そっかそっか。

先ほどの記事を参考に昨日やったものを手直しした結果、ちゃんとスマホ用のレイアウトで表示できるようになりました♪

iPhoneでは試せてないのでわかりませんが、AndroidのChrome・Firefox・Operaではきちんと表示できました。

大雑把ではありますが理解できたので、簡単なページだったら作れそうです。
デザインのセンスがあるかどうかは別ですが。