ここ数日、初めてレスポンシブ・ウェブデザインでサイトを作っていて、(自分の)既存サイトを移行しているところです。
まだまだ調整が必要な所が沢山ありますが、公開しながらちょっとずつ修正して行こうと思ってます。

上記サイトなどを参考にさせて頂いてサイトを作っています。
すごく丁寧に分かりやすく説明してあるので、思っていたより早く進んでいる気がします。
ありがとうございます。


サイトですが、iPhoneなど小さい画面のレイアウトからPCサイトの大きい画面のレイアウトの順番で、全体のレイアウトを考えてから作るのが良いようですが、初めてなのであまり想像も出来なかったので、とりあえず慣れているPCサイトを作ってみました。

更に一番単純そうなワンカラムレイアウトのサイトを作る事にします。
メインコンテンツの一部に3段表示と2段表示があります。
画面サイズによって2段にしたり1段にしたり表示しないなどを考えてます。

HTMLはだいたいこんな感じで作りました。

かなり省略したCSSです。

max-width: で表示幅を制御します。
今回は1238px, 980px, 650px, 480pxで分けてます。

小さいサイズになるにしたがって、
・横並びを縦並びにしたり
・コンテンツを非表示にしたり
している所をオーバーライドして、設定を新たに適用するのでしょうね。


こういうブログもありました。

人気のあるブログ: