2カラムレイアウトのパターン
「メイン」カラムと「サイド」カラムの2段を用意した2カラムレイアウトの場合は、以下の4通りのパターンがあります。
- A. 左側にメインを、右側にサイドを配置。HTML内ではメイン→サイドの順に記述してある。
- B. 左側にメインを、右側にサイドを配置。HTML内ではサイド→メインの順に記述してある。
- C. 左側にサイドを、右側にメインを配置。HTML内ではメイン→サイドの順に記述してある。
- D. 左側にサイドを、右側にメインを配置。HTML内ではサイド→メインの順に記述してある。
これらのパターンには、レスポンシブな段組レイアウトが簡単なものと、若干面倒なものとがあります。
記述順に表示すれば良いパターン
HTMLソースに記述してある順序で並べれば良いのはA・Dの2つです。
- Aは、メイン→サイドの順で記述された内容を、そのままメイン→サイドの順に表示するだけです。
- Dは、サイド→メインの順で記述された内容を、そのままサイド→メインの順に表示するだけです。
記述順とは逆順に表示する必要があるパターン
HTMLソースに記述してある順序とは逆順に並べる必要があるのはB・Cの2つです。
- Bは、メイン→サイドの順で記述された内容を、逆にサイド→メインの順に表示する必要があります。
- Cは、サイド→メインの順で記述された内容を、逆にメイン→サイドの順に表示する必要があります。