「webサイトで2カラム構成にしてみたいけどやり方が分からない」

こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。

HTMLに少しずつ慣れてきたら、よりユーザに多くサイト訪問してもらうために、webサイトのデザイン構成を検討してみることは非常に重要です。

是非本記事をお読みいただき、理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

カラムとは

カラムとは、「列」を意味する言葉で、1カラムは1列、2カラムは2列を意味しています。

最近のwebサイトのデザインは「1カラム」「2カラム」がメインだと思いますが、具体的な数の制限はありませんし、正解もありません。

大切なことは、「自分のwebサイトのコンテンツでは、どのようなデザインにするとユーザにとって見やすいか」と考えることです。そこまでコンテンツの種類が多くなければ1カラムで十分です。1カラムの方がコンテンツを強調しやすいので、1カラムの方が良い場合も当然あります。

逆にコンテンツの種類が多すぎるのに1カラムにしていると縦に長くなりすぎてしまい、非常に見にくくなります。そのようなサイト設計になっていると当然ユーザにとっては見づらく、サイトの離脱に繋がります。

「〇〇さんが2カラムが良いと言っていたから」という理由ではなく、是非自分のサイトにはいくつのカラムが良いのか？とまずは考えてみてください。

本記事では、タイトルにもある通りHTMLとCSSを利用して2カラム構成の作り方を紹介します。

HTMLとCSSで2カラム構成を作って見よう

それでは、早速2カラム構成を作って見ましょう。1つずつ細かい内容を解説してから全体のコードを試すというのが本来は正しい進め方だと思うのですが、筆者自身もHTMLやCSSを勉強していて思うのは、よくわかっていない状態で長い解説を読んでも頭に入りづらいということです。

ですので、まずは2カラムにするコードを紹介します。コピーアンドペーストで動くので、是非試してみてください。その後に、簡単な解説をしていきます。

2カラム構成前のコード

どの部分のコードが2カラム構成に効いているのか理解するために、まずあは2カラムになる前のコードを紹介します。

実際にコピーアンドペーストをして、どのように表示されるか試してみてください。

<header>ヘッダー</header>

<div class="main">
<div class="contents1">
1つ目のコンテンツ
</div>
<div class="contents2">
2つ目のコンテンツ
</div>
</div>

<footer>フッター</footer>

header{background: #7fff7f;}
.contents1{background: #ffff7f;}
.contents2{background: #7f7fff;}
footer{background: #ffbf7f;}

.contents1,.contents2{
width: 50%;
height: 100px;
}

上記のHTMLとCSSで、ヘッダーとフッターは横に長く、「1つ目と2つ目のコンテンツ」は左半分に寄った状態で表示することができます。

やりたいことは、この1つ目のコンテンツの右側に2つ目のコンテンツを表示すること（＝2カラム構成にすること）です。

では、早速完成のコードを見ていきましょう。

2カラム構成用のコード

2カラム構成にするために必要なコードの追加は実は非常にシンプルで、CSSに「display: flex;」を追加すれば完成です。

言葉で説明されても分かりづらいと思うので、完成用のコードを見ていきましょう。

<header>ヘッダー</header>

<div class="main">
<div class="contents1">
1つ目のコンテンツ
</div>
<div class="contents2">
2つ目のコンテンツ
</div>
</div>

<footer>フッター</footer>

header{background: #7fff7f;}
.contents1{background: #ffff7f;}
.contents2{background: #7f7fff;}
footer{background: #ffbf7f;}

.contents1,.contents2{
width: 50%;
height: 100px;
}

.main{
display: flex;
}

「2カラム構成前のコード」と見比べていただければわかりますが、実は変わっているのはCSSの最後の「.main～」の部分だけです。

2カラム構成にするための方法はいくつかありますが、その内の1つが今回紹介したフレックスボックスを使う方法です。フレックスボックスを使うには、2カラムにしたい要素の親要素に「display: flex;」を追加すれば完成です。

とても便利に2カラムにできることが実感いただけたのではないでしょうか。

その他の2カラム構成のやり方

2カラム構成のやり方は他にもいくつかありますが、初心者の方はまずは先ほど紹介したフレックスボックスを使えるようになれば十分でしょう。

他にもfloatプロパティやcolumn-countプロパティを使うやり方もありますが、フレックスボックスを使ってみた後に、興味があれば是非試してみてください。念のため、コードを紹介しておきます。

floatプロパティ

<header>ヘッダー</header>

<div class="main">
<div class="contents1">
1つ目のコンテンツ
</div>
<div class="contents2">
2つ目のコンテンツ
</div>
</div>

<footer>フッター</footer>

header{background: #7fff7f;}
.contents1{background: #ffff7f;}
.contents2{background: #7f7fff;}
footer{background: #ffbf7f;}

.contents1,.contents2{
width: 50%;
height: 100px;
}

.contents1{
float: left;
}

.contents2{
float: right;
}

footer{
clear: both;
}

「float: left;」と「float: right;」を設定することで、各要素の配置場所を指定し2カラムを再現できています。

column-countプロパティ

このやり方は他とは少し特殊です。webサイト上で、商品紹介等で長い文章を書くこともあると思います。そのとき、自動で2カラム設定してくれるのがcolumn-countプロパティです。

<p>本日は新しい商品のご紹介です。新商品〇〇は大人数の家族様だけでなく、1人暮らしの方にも最適です。また、日持ちもするため、まとめ買いをして長期間保存しておけることも魅力の1つです。本日から1週間キャンペーンが始まるので、もしご購入を迷われている方はこの機会に是非お買い求めください。、</p>

※文章が筆者が任意で作成したものです。

p{
column-count: 2;
}

column-countを使うだけで、自動で長い文字を2カラム設定にしてくれるので非常に便利です。

2カラム（複数カラム）の注意点

最後に、2カラムや複数カラムの注意点について紹介します。

HTMLやCSSを学んでいくと、「もっと凝ったサイト設計にしてみたい」「こういう技術を試してみたい」と思うようになるでしょう。それ自体は全く悪いことではないですが、注意しないといけないのは「凝ったサイトを作ること」が目的になってしまい、いつの間にかユーザにとって見づらく、離脱に繋がりやすいサイト設計になりやすいことです。

複数カラムのサイトは冒頭でもお伝えしたとおり、情報量が多い場合は有効ですが、あまりに凝ったサイト設計にしてしまうと逆に見づらいサイトになりますので、「このサイトはユーザにとって見やすいか／必要な情報がすぐに見つけられるか」を十分に考えた上で設計してください。

まとめ

いかがでしたでしょうか。HTML、CSSで2カラム構成のやり方を紹介しました。まずは直感的に分かりやすいフレックスボックスを使えるようになりましょう。その後で、興味があればその他として紹介した2つのやり方も試してみてください。

本記事でも何度かお伝えしましたが、大切なのは「凝ったサイトを作ること」ではなく「ユーザにとって見やすく、再訪してもらえるサイトを作ること」です。

慣れてくると「凝った技術を使うこと」自体が目的になりがちですが、本来の目的を見失わずにサイト設計を進めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP