【初心者向け】HTML、CSSで2カラム構成する方法

2021.09.15

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

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

  • HTMLとCSSで2カラム構成する方法が分かる

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

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

カラムとは

カラムとは、「列」を意味する言葉で、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カラムになる前のコードを紹介します。

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

 

HTML
<header>ヘッダー</header>

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

<footer>フッター</footer>
CSS
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;」を追加すれば完成です。

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

HTML
<header>ヘッダー</header>

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

<footer>フッター</footer>
CSS
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プロパティ

HTML
<header>ヘッダー</header>

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

<footer>フッター</footer>
CSS
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プロパティです。

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

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

CSS
p{
column-count: 2;
}

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

 

2カラム(複数カラム)の注意点

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

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

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

 

まとめ

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

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

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

 

 

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5