HTMLのカラムを変えると、サイトの印象が大きく変わります。そこで今回は、HTMLのカラムレイアウトを変える方法について、解説していきます。また、各カラムのメリット・デメリットについても紹介しています。
本記事を参考に、自分のサイトが何カラム構成のレイアウトに適しているかを考えてみましょう。
HTMLのカラムとは
カラム（column）とは、直訳すると「縦列」のことで、HTMLでは「段組み」を意味しています。
Webサイトは、サイトによって様々なレイアウトで構成されています。その中でも、サイトで使われる段組みレイアウトのことを、カラムレイアウトと呼びます。
サイトのレイアウト構成が、2段組みになっていれば2カラムレイアウト、3段組みになっていれば3カラムレイアウトと呼びます。また、段組みになっていなければ、1カラムレイアウトもしくは、シングルカラムレイアウトと呼びます。
HTMLのカラムを変えてレイアウトする方法
HTMLのカラムレイアウトを変えるには、CSSのfloatプロパティを使用します。実際に、カラムを変えて出力する方法を紹介するので、ぜひ参考にしてください。また、各カラムレイアウトのメリット・デメリットについても、併せて紹介していきますね。
1カラムでレイアウトする
1カラムレイアウト（シングルレイアウト）では、CSSのfloatプロパティは使用しません。
1カラムレイアウトは、次のように記述します。
See the Pen
mdEGoGO by sho-go (@sho-go)
on CodePen.
上記コードでは、メインコンテンツの他にも、カテゴリや関連商品を表示しています。後述する2カラムレイアウト、3カラムレイアウトでは、これらクラスの配置を変えていきます。
1カラムレイアウトのメリットは、ユーザーに伝えたいメインコンテンツに集中させることができます。そのため、ランディングページなどで、頻繁に使われるレイアウト構成です。また、スマホ普及の影響により、スマホ画面での表示には、1カラムレイアウトが使われることが、一般的です。
しかし、1カラムレイアウトの場合、サイドバーからの誘導ができなくなってしまうデメリットがあります。広告収入をメインとしたサイトなどでは、特に影響の大きいデメリットですね。
2カラムでレイアウトする
2カラムレイアウトでは、floatプロパティで、配置位置を指定します。その際、各クラスが、どれだけの幅をレイアウトするかは、widthプロパティで指定します。なお、widthプロパティは、パーセント（%）表示でも指定可能です。
2カラムレイアウトは、次のように記述します。
See the Pen
wvWEOEr by sho-go (@sho-go)
on CodePen.
上記では、「main」と「related」のクラスを2カラムレイアウトで、表示しました。mainクラスは、左側に配置し、600pxの幅を指定しました。一方、relatedクラスは、右側に配置して、200pxの幅を指定しました。
2カラムレイアウトのメリットは、ユーザーの回遊率が上がるということです。サイドバーに、関連商品などを配置することで、メインコンテンツ目的で、サイトに訪れたユーザーを、別ページにも誘導することができます。
しかし、1カラムレイアウトに比べて、メインコンテンツに、集中できなくなります。また、スマホ表示の場合は見づらくなってしまうデメリットがあります。
3カラムでレイアウトする
3カラムレイアウトにするには、レイアウト構成を2カラムを分けて、片方のカラムを、さらに2カラムに分けることで実現します。
3カラムレイアウトは、次のように記述します。
See the Pen
pobOYOZ by sho-go (@sho-go)
on CodePen.
上記サンプルでは、「main-wrapper」と「category」のクラスを、2カラム構成で表示させ、main-wrapperクラスの中が、「main」と「related」のクラスを、2カラム構成で表示させているため、合計3カラムになります。この使い方を応用すれば、4カラム以上の、レイアウト構成も可能というわけですね。
3カラムレイアウトのメリットは、1ページに表示できる圧倒的な情報量です。特にECサイトなどで利用すると、有効でしょう。例えば、もし見ている商品が、気に入らなかった場合、カテゴリ一覧から、類似商品を探したり、人気商品を確認したりする可能性が、高くなります。
しかし、3カラムレイアウトにすることで、情報量が増えすぎて、ユーザーの欲しい情報を見つけづらくなるデメリットがあります。もちろん、スマホ表示時は見づらいので、表示を変える必要があります。
まとめ
いかがでしたか？HTMLのカラムレイアウトの変更方法について、理解してもらえたでしょうか？
サイトを、何カラムのレイアウトにするかで与える印象は、大きく変わります。紹介した各カラムのメリット・デメリットを理解して、ご自身のサイトが、より良くなるカラムレイアウトに、変更してみましょう。
