【CSSレッスン第2弾】はじめてのCSSレイアウト【2カラム編】

ウサギ
ウサギ

CSSのレッスン、レイアウト編!

2カラム編です!

イヌ
イヌ

1カラム編と比べると、

少し難しいかも!

ウサギ
ウサギ

がんばっていきましょ〜!

どうも、イヌです。

CSSレイアウトについての記事、第二弾!

今日は2カラムレイアウトについてです!

この記事をおすすめできる方

– HTMLの基本を理解している
– CSSの基本が理解している

Progate の HTML / CSS を終えていればOKです!

※ ご注意 ※

この記事は CSSレイアウト 自体を解説する記事です。
説明をシンプルにするため、divタグを利用しています。
本来のマークアップは、意図に合わせたタグを選択する必要があるので、ご注意ください。

CSSレイアウトの種類

主にWebページのレイアウトには、

  • 1カラムレイアウト
  • 2カラムレイアウト
  • 3カラムレイアウト

があります。

複雑に見えるWebページでも、ベースのレイアウトを突き詰めると、上の3種類になることが多いです。

ベースのレイアウトをしっかりと表現できれば、応用のレイアウトもつくりやすくなるので、CSSでのレイアウトの組み方を練習していきましょう!

2カラムレイアウトとは

今回の2カラムレイアウトは、以下のようなレイアウトを想定しています。

2カラムレイアウトとは、ヘッダー領域とフッター領域に加え、メイン部分がコンテンツ領域 + サイドバー領域のように2カラムに分かれているレイアウトです。

ブログなどでよく使われるレイアウトで、サイドバー領域はコンテンツ領域に比べて、狭めにレイアウトされることが多いです。

2カラムレイアウトのHTML

2カラムレイアウトでは、

ヘッダー領域

コンテンツ + サイドバー領域

フッター領域

を並べます。

div.container で囲っているのは、全体のレイアウトを調整する必要があるときに調整するためです。

レイアウトの width を固定して中央に寄せるなど、柔軟に調整するためには、大枠をdivなどのタグで囲うことをおすすめします。

div.main は中央部分のコンテンツ領域とサイドバー領域をまとめるためのdivです。 div.contentdiv.sidebar を調整するために、div.mainにて囲っています。

<div class="container"> <div class="header">ヘッダー</div> <div class="main"> <div class="content">コンテンツ</div> <div class="sidebar">サイドバー</div> </div> <div class="footer">フッター</div> </div>
Code language: HTML, XML (xml)

2カラムレイアウトのCSS

今回ポイントとなるのは、中央部分の div.main です。

ですが、その前に前提の話です。


ヘッダー領域とフッター領域は、固定の height: 80px に設定して、コンテンツ領域 + サイドバー領域 については、calc にて必要な高さを計算して、設定しています。

div.mainheight: calc(100vh - 160px) の考え方は、【CSSレッスン第1弾】はじめてのCSSレイアウト【1カラム編】で、解説しているので、ご参照ください。


さて、本題です。

2カラムのレイアウトを実現するためにはdisplay: flexを利用します。

【ご参考】float: leftfloat: rightclear: both を利用して、2カラムレイアウトを実現している教材やサイトがありますが、2021年現在、新規では、ほぼ利用されません。
プロパティの動きを知っておいて損はありませんが、実務としては利用しないので、ご注意ください。

もし、div.maindisplay: flex を設定していない場合は、以下のようになります。

コンテンツ領域とサイドバー領域が縦積みになってしまいます。

(副次的な影響で高さも反映しなくなっています。)

つまりdisplay: flex は、設定した要素の子要素が横並びになるプロパティなのです。

【ご参考:フレックスボックスレイアウト】

厳密には、display: flex を利用したレイアウトのことを、フレックスボックスレイアウトといい、display: flex を設定したdiv.mainフレックスコンテナーdiv.contentdiv.sidebarフレックスアイテムと呼びます。
ただ、名称自体はそれほど重要でないので、そんな呼び方なんだな。ぐらいの認識でOKです。

以下が、設定したCSSです。(colorやbackground-colorは見やすくするために設定しています)

.container { color: white; } .header { height: 80px; background-color: #1ac8ed; } .main { display: flex; height: calc(100vh - 160px); } .content { width: 100%; background-color: #af7595; } .sidebar { width: 160px; background-color: #5c1a1b; } .footer { height: 80px; background-color: #8c2155; }
Code language: CSS (css)

そして、フレックスボックスの便利なところは、HTMLの構造を変更せずにレイアウトを調整することができます。

以下のように、サイドバーを右から左に入れ替えるのに、

div.mainflex-direction: row-reverse

を1行追加するだけでOKです。

.main { display: flex; flex-direction: row-reverse height: calc(100vh - 160px); }
Code language: CSS (css)

プロパティ: flex-direction

flex-direction はフレックスアイテムの並べ方を決めるプロパティです。

縦方向に並べる column

横方向に並べる row

と、それぞれの逆方向

逆の縦方向に並べる column-reverse

逆の横方向に並べる row-reverse

の4種類の値があります。

display: flex を設定すると、flex-direction: row が初期値として設定されるので、display: flex だけで、フレックスアイテムが横並びになります。

つまり、逆の横方向に並べる flex-direction: row-reverse を設定すると、サイドバー領域が左側に並ぶことになります。

まとめ:2カラムレイアウト

以上のように、HTML / CSS を設定すると、2カラムレイアウトを再現することができます。

以下の JSFiddle の HTML や CSS のタブをクリックすると、実際のコードを確認できます。

また、「Edit in JSFiddle」をクリックすると、このレイアウトの実際のコードを修正できるようになるので、色々変更を試してみてください。

※ 変更自体は別のURLで保存されるので、ジャンプ先で変更しても、このブログに貼っているデータには影響ないので、安心して触ってください。

イヌ
イヌ

2カラムレイアウトの解説でした〜。
フレックスボックスレイアウトはとても便利なので、使いこなせるようになろ〜!

ウサギ
ウサギ

なるほど、よくわかりました!

続きもよろしくね!

まったね〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です