紙の段組、Webの段組み

新聞や雑誌などのデザイン（エディトリアルデザイン）で段組というと、文章を読みやすくするために、1行あたりの文字数を適度に区切って、複数の列に分割するレイアウトのことをいう場合が多いです。
一方、Webデザインで段組みというと、Webサイトを使いやすくするために、機能や役割ごとにエリアを仕分けるレイアウトのことをいいます。
エディトリアルデザインでは可読性のためだけれど、Webデザインでは操作性のため、というふうに目的が違うんですね。なので、Webデザインで“段組みレイアウト”というと、文章まわりに限らず、ページ全体のレイアウトを指すことが多いです。

とはいえ、Webでも、文章を読みやすくする目的のレイアウトを組むこともできる（※詳しくは後述）ので、ごっちゃになるといけないから、この記事では、可読性の方を“段組（だんぐみ）”、操作性の方を“段組み（カラム）”と呼び分けることにします:)。（※Webの方だけ送り仮名を付けて、心の中で「カラム」と読みます。）

Webの段組みレイアウト

Webで段組みレイアウトといえば「2段組みレイアウト」が、いわゆるいちばん普通なレイアウトです。専（もっぱ）ら、「メニューの段」と、「コンテンツの段」に分けられることが多いです。
企業サイトやECサイトみたく、紹介するサービスや情報が多くサイトの構造が複雑になっちゃいそうなサイトでよく採用されてますねー。

下準備

HTMLは以下のようにマークアップしました。
ページ全体を、ヘッダー（header要素）と、コンテンツ（#content要素）と、フッター（footer要素）のエリアに分けて、コンテンツの中に、メインコンテンツ（main要素）と、サイドメニュー（aside要素）が入っていて、メインコンテンツとサイドメニューの中に、商品一覧や記事一覧などのセクションがあります。

レイアウトを作るにあたって、以下のルールを決めます。横幅に対してレスポンシブなレイアウトになる想定です:)。なので、スマホで見ている人にはわけわかめかもしれません、ごめんなさい…X(！

• 2段組みレイアウトになるのは、ウィンドウ幅が768px以上の時。最大幅は1200pxで中央揃え。
• 1200px未満はウィンドウ幅に合わせて、メインコンテンツとサイドメニューを同じ比率で伸縮。
• 768px未満（＝767px以下）の時には、1段組みレイアウト。

つまり下図のようなことになります！その他の細かなところは、コーディングしながら決めてゆきます。:D

デザインは決まってるので、段組みレイアウト以外のスタイルだけ先に作っちゃっときます:D！ サイトのタイトルをロゴっぽくしたり、リンクを推しやすくしたり、画像が親要素からはみ出ないようにしたり、角を丸くしたり、フォントサイズを調整したり…。

ぜんぶ縦に並んでるだけですけれど、768px未満の時はもともと1段組みの予定なので、このままでもほとんど完成してますね…。はてさて、前提条件はこんなところで、早速レイアウトしてまいりましょー！X)
下のリンクから、各CSSでのレイアウトの記事へ移動します。