レイアウトを考える

ページを作る前に、レイアウトを考えることは、大切な作業なんですよ。
テーブルレイアウトでするときは、ある程度端折ることができるのですが、CSSレイアウトをしようと思うと、幅の計算など、あらかじめしておかないと、思った通りに出来上がらないんですよね。
頭の優れた方ならできちゃうかもしれませんけれどね（笑）

どちらにしても、計算してから、作っていった方が、スムーズに作業が進むと思いますよ。
はじめの内は、手抜きをしないで、確実な方法で作業を進めていきましょう。
私は、暗算が苦手なので、絶対に紙と鉛筆と計算機が必要です（汗）

下に１カラム（１段組）〜４カラム（４段組）のレイアウトの例を描いてみました。
今は、レイアウトを考える練習をしていきましょうね。
慣れない内は、このレイアウトが頭の中で爆発します（笑）
「幅いくつだっけ？」「余白はどうしたっけ？」「各部分の名前…あれ？」「どうやってレイアウト枠を切ったっけ？」などなど、？がいっぱい飛び交います。
えぇ、私がそうなんですよね (^^;)
パニックにならないためにも、ぜひ、レイアウトは紙に描いてから、始めましょう。

実際にどうやって、作っていくかは、また、後ほどお話しますね。
違うレイアウトパターンが思い浮かんだら、この記事に追加していきますので、使いまわしちゃってください。

⇒【１カラム】【２カラム】【３カラム】【４カラム】

【１カラム】

[左] Type1-a [右] Type1-b
　

【２カラム】

[左] Type2-a [右] Type2-b
　
[左] Type2-c

【３カラム】

[左] Type3-a [右] Type3-b
　
[左] Type3-c

【４カラム】

[左] Type4-a [右] Type4-b