レスポンシブ2カラムレイアウトの作成例C

2カラムレイアウトのパターン

「メイン」カラムと「サイド」カラムの2段を用意した2カラムレイアウトの場合は、以下の4通りのパターンがあります。

• A. 左側にメインを、右側にサイドを配置。HTML内ではメイン→サイドの順に記述してある。
• B. 左側にメインを、右側にサイドを配置。HTML内ではサイド→メインの順に記述してある。
• C. 左側にサイドを、右側にメインを配置。HTML内ではメイン→サイドの順に記述してある。
• D. 左側にサイドを、右側にメインを配置。HTML内ではサイド→メインの順に記述してある。

これらのパターンには、レスポンシブな段組レイアウトが簡単なものと、若干面倒なものとがあります。

記述順に表示すれば良いパターン

HTMLソースに記述してある順序で並べれば良いのはA・Dの2つです。

• Aは、メイン→サイドの順で記述された内容を、そのままメイン→サイドの順に表示するだけです。
• Dは、サイド→メインの順で記述された内容を、そのままサイド→メインの順に表示するだけです。

記述順とは逆順に表示する必要があるパターン

HTMLソースに記述してある順序とは逆順に並べる必要があるのはB・Cの2つです。

• Bは、メイン→サイドの順で記述された内容を、逆にサイド→メインの順に表示する必要があります。
• Cは、サイド→メインの順で記述された内容を、逆にメイン→サイドの順に表示する必要があります。