パソコンの家庭教師大塚

ヘッダー



レスポンシブデザインの基礎

※ここはレスポンシブデザインの3段階版。2段階の場合はスマホ・携帯とパソコンでメニューや段組が違うが、3段階ではさらに、その中間形態であるタブレット類も考慮にいれたスタイル。
※iPhoneやipad、Ipadminiのブラウザであるサファリは 764pxくらいに分岐点があると見て、まず800pxが一段階目。 二段階目は480くらいと見て、500を分岐点にしてみた。

ところが

右サイドにもメニューがあるが、ブラウザが狭くなると、メニューを上に、その下の画像類を下に分割しなければならない。
これらは真ん中の本文ボックス「div id="mainContents"」の中にいれておき、あとからポジションでその上か下かをを指定してやる。

なお、ここはテーブル

大仏さんでも拝んでくれ





この部分は、狭い画面ではメニューは上にこちらは下にと、わかれます。