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

ウサギ
ウサギ

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

イヌ
イヌ

いくつかに分けて説明していきます〜。

ウサギ
ウサギ

楽しみ〜!

どうも、イヌです。

これから、いくつかの記事に分けて、CSSレイアウトについて記事を書いていきます。

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

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

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

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

※ ご注意 ※

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

CSSレイアウトの種類

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

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

があります。

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

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

1カラムレイアウトとは

CSSレイアウトの基本といえる「1カラムレイアウト」です。

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

1カラムレイアウトというのは、縦積みのレイアウトのことです。

ヘッダー領域に、タイトルやメニューなどが入ります。

メイン領域には、Webページの主なコンテンツが入ります。

フッター領域に、コピーライトや利用規約などが入ります。

1カラムレイアウトのHTML

1カラムレイアウトでは、単純にブロックレベル要素を並べるだけでOKです。

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

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

<div class="container"> <div class="header">ヘッダー</div> <div class="main">メイン</div> <div class="footer">フッター</div> </div>
Code language: HTML, XML (xml)

1カラムレイアウトのCSS

実は今回は、レイアウトを調整するために設定しているCSSはありません。

単純にHTMLで div を並べるだけで、

ヘッダー

メイン

フッター

という順番のレイアウトは完成します。

ただ、それぞれの領域に height を設定しないと、以下のようにそれぞれの文字列の高さ分だけの領域になってしまいます。

そのため、ヘッダーとフッターには

height: 80px

のように、固定の高さを設定し、

メインには

height: calc(100vh - 160px)

のように、可変の高さを設定します。


calc というのは、CSSのプロパティの値を計算することができる関数です。

例えば

width: calc(100% - 80px)

のように書いたとき、 width: 100% の値が 800px だった場合、

width: calc(800px - 80px) => width: 720px

として、計算されることになります。


100vhvh という単位は、viewportの高さに対する割合を示しています。

簡単にいうと、今表示されている画面の縦の長さのことです。

縦の長さが 736px であれば、100vh736px になります。

100%であれば、height: 100% でよいのでは?となるかもしれませんが、height: 100% だと、親要素の高さによって影響を受けるため、画面上の高さを設定したい場合は % より vh をおすすめします。


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

.container { color: white; } .header { height: 80px; background-color: #9c95dc; } .main { height: calc(100vh - 160px); background-color: #228cdb; } .footer { height: 80px; background-color: #0b7189; }
Code language: CSS (css)

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

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

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

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

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

イヌ
イヌ

1カラムレイアウトの解説でした〜。

ウサギ
ウサギ

よくわかりました!

続きもよろしくね!

まったね〜

コメントを残す

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