2016年4月26日(火) 12時27分04秒 [仕事]

レスポンシブな2段組レイアウトを作るHTML＋CSSの書き方

ウェブページのレイアウトで「2段組(＝2カラムレイアウト)」はかなり需要がありますよね。
このレイアウトを（HTMLは共通のままで）PCやモバイル端末などのあらゆる端末に楽に対応させるには、

• スマートフォンなどの狭い画面では1カラム(段組なし)で表示、
• タブレットなどの中間サイズでは一部分だけをマルチカラムにして表示、
• PCなどの広い画面では2カラムで表示

……という動的なレイアウト変更ができると便利です。
そのような表示を実現する「レスポンシブ・ウェブデザイン」を使って、2段組(2カラムレイアウト)ページを作成するHTML＋CSSソースの書き方をAll Aboutで解説しました。

■レスポンシブな2カラムレイアウトを作るCSSの書き方（＠All About ホームページ作成）

2段組レイアウトを作る場合、「HTMLソースの記述方法(順序)」と「実際の2段組の構造(表示順)」をパターンにすると、4通りの実現方法があります。
これら4通りについて、それぞれサンプルを用意しています。お望みのソース構造やレイアウトに合わせた解説を参考にしてみて下さい。