レイアウト枠を設定し、cssでウインドウの大きさによって回りこませる

レイアウト枠をウインドウの大きさによって回りこませるレスポンシブデザインの骨格に相当するレイアウト枠を設定します。

レイアウトは、現在のサイトと同じ、「固定幅＋フールドデザイン」にします。

「固定幅＋フルールドデザイン」は、１部分が固定幅で、その他の要素は、ブラウザウィンドウの大きさに追従して変化する、フルードのレイアウトです。 通常、２カラムで、幅が狭くなると１カラムに変化させます。

現在の私の能力では、書籍のサンプルやテンプレートなどを切り貼りして作成しています。そのため、説明ができません。下で紹介する書籍を参考にしてください。 私が見た中では、最もわかりやすい説明がされています。

ナビゲーションのレイアウトを取り除いた、レイアウト枠のサンプルページを作成しました。 基本のレイアウトは、このページと同じで、２カラム「固定幅＋フルールドデザイン」です。

ブラウザのウィンドウを動かして、レイアウト枠の動きの変化を観察してください。cssは、ページ内に記述しています。「記事に戻ります」のリンクをクリックするとこのページに戻ります。