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

ウサギ
ウサギ

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

3カラム編です!

イヌ
イヌ

2カラム編がわかれば、

こちらは簡単!

ウサギ
ウサギ

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

どうも、イヌです。

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

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

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

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

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

※ ご注意 ※

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

CSSレイアウトの種類

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

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

があります。

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

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

3カラムレイアウトとは

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

3カラムレイアウトとは、ヘッダー領域とフッター領域に加え、メイン部分を左のメニュー領域、中央のコンテンツ領域、右のアーカイブ領域、の3カラムに分かれているレイアウトです。

2カラムと同様、ブログなどでよく使われるレイアウトで、メニューやアーカイブのサイドバー領域は、コンテンツ領域に比べて、狭めにレイアウトされることが多いです。

3カラムレイアウトのHTML

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

ヘッダー領域

左のメニュー領域 + 中央のコンテンツ領域 + 右のアーカイブ領域

フッター領域

を並べます。

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

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

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

<div class="container"> <div class="header">ヘッダー</div> <div class="main"> <div class="menu">メニュー</div> <div class="content">コンテンツ</div> <div class="archives">アーカイブ</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カラムのときと同様、3カラムのレイアウトを実現するためにはdisplay: flexを利用します。

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

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

メニュー領域と中央コンテンツ領域とアーカイブ領域が縦積みになってしまいます。

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

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


フレックスボックスレイアウト考え方は、【CSSレッスン第2弾】はじめてのCSSレイアウト【2カラム編】で、解説しているので、ご参照ください。


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

.container { color: white; } .header { height: 80px; background-color: #1ac8ed; } .main { display: flex; height: calc(100vh - 160px); } .menu { width: 160px; background-color: #424b54; } .content { width: 100%; background-color: #af7595; } .archives { 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: row-reverse を設定すると、

div.left-sidebar

div.content

div.right-sidebar

の下からみて、横並びに左から並べるので、

アーカイブ領域 | 中央コンテンツ領域 | メニュー領域

という風に入れ替えることができます。

flex-direction については、【CSSレッスン第2弾】はじめてのCSSレイアウト【2カラム編】で、解説しているので、ご参照ください。

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

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

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

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

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

イヌ
イヌ

3カラムレイアウトの解説でした〜。
2カラムとあまり変わらなかったですね!

フレックスボックスレイアウトはとても便利なので、使いこなせるようになろ〜!

ウサギ
ウサギ

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

まったね〜

コメントを残す

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