CSSでレイアウトを整える方法をコード例を用いて徹底解説
Webサイトには、HTMLに記述した内容が表示されます。しかし、HTMLだけでは要素が上から下に表示されるだけで、レイアウトは存在しません。レイアウトを整えるために必要なのが、CSSです。
レイアウトを整えるCSSは様々な方法がありますが、シュチュエーションによって使い分ける必要があります。
この記事では、特にレイアウトを整えることに関係性が深いCSSの記述例を紹介しているので、ぜひ参考にしてください。
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 |
レイアウトを整えるためのCSSプロパティを紹介
CSSでレイアウトを整えるために使用するプロパティは数種類あります。
その中でも今回は主要な3種類を紹介します。レイアウトを整える上では重要なプロパティになるので、必ず理解しておきましょう。
CSSでレイアウトを整える3種類のプロパティは、
- float
- flex-box
- grid
それぞれの記述方法をコード例を用いながら解説していきます。
float
floatは「浮く」という意味を持つ単語で、喫茶店のコーヒーフロートなどと同じです。CSSにおいては、要素を横に並べるという役割を持つプロパティになります。
flex-boxやgridの登場により使われることが少なくなりましたが、シュチュエーションによってはまだまだ使われます。古いWebサイトを改修するときなどにもfloatが使われていることがあるので、理解しておく必要があります。
ここからコード例を紹介します。
まず以下のように記述します。
HTML
<div class=”example”><img src="sample1.png"></div>
<div class=”example”><img src="sample2.png"></div>CSS
.example {
float:left;
}これで二つの画像が左寄せで横並びになりました。rightと記述すると、右寄せで横並びになります。他にnoneという値がありますが、これは初期値なので、実際に記述する機会はほとんどありません。
floatを使う際には注意点があります。
それは解除しないと、下にある要素が隙間に入り込んでしまうことがあるのです。
HTML
<div>
<div class=”example”><img src="sample1.png"></div>
<div class=”example”><img src="sample2.png"></div>
</div>
<p>サンプル</p>CSS
.example {
float:left;
}上記のコードの場合、下のテキストが画像の右側に表示されてしまいます。
これを解除する方法が、clearfixです。
HTML
<div class=”clearfix”>
<div class=”example”><img src="sample1.png"></div>
<div class=”example”><img src="sample2.png"></div>
</div>
<p>サンプル</p>CSS
.clearfix::after {
content:"";
display:block;
clear:both;
}
.clearfix{ zoom: 1; }
.example {
float:left;
}このようにfloatをかけている親の要素に、clearfixを指定すると解除できます。floatとは必ずと言っていいほどにセットで使われる、大変有名なコードです。
floatはメインカラムとサブカラムなど、要素を横に並べるレイアウトのときは頻繁に使われていましたが、他にもっと適した記述法が登場したことによって、あまり使われなくなりました。
しかし、floatには独自の特徴があるため、現在も廃れたわけではありません。
テキストの回り込み
ページの左側先頭に画像が配置され、その右側からテキストが始まるというレイアウトをニュースサイトなどで目にしたことがあるでしょう。
そのようなレイアウトのときに、floatは使われています。
HTML
<div class=”clearfix”>
<div class=”example”><img src="sample1.png"></div>
<p>本文</p>
</div>CSS
.clearfix::after {
content:"";
display:block;
clear:both;
}
.clearfix{ zoom: 1; }
.example {
float:left;
}
.example {
float:left;
padding-right:10px;
padding-bottom:10px;
}画像とテキストがくっつかないよう、画像の右に10ピクセルの余白を設けました。本文の高さが画像の高さを上回る場合、画像の真下の領域にもテキストが表示されます。
flex-box
flex-boxは現在、もっともよく使われている要素を横並びにする方法です。floatと比べると非常に理解しやすく、簡単にレイアウトを組むことができます。
コード例を用いながら使い方を解説します。
HTML
<div class=”container”>
<div><img src="sample1.png"></div>
<div><img src="sample2.png"></div>
</div>CSS
.container {
display:flex;
}このように親要素にdisplay:flexを記述するだけで、子要素が横並びになるのでとても簡単です。親要素がflexコンテナ、子要素がflexアイテムと呼ばれています。
親要素にflexと同時に記述することで、並び方を細かくしていできるプロパティが存在します。簡単に紹介します。
flex-direction
要素の並び順を決めるプロパティです。
| 値 | 説明 |
| row | アイテムが左から右に表示されます。初期値なので、設定の必要はありません。 |
| row-reverse | アイテムが右から左に表示されます。rowの逆です。 |
| column | flex-boxを指定していないときのように、アイテムが上から下に表示されます。 |
| column-reverse | アイテムが下から上に配置されます。columnの逆です。 |
flex-wrap
要素の折り返しを指定するプロパティです。
| 値 | 説明 |
| nowrap | 折り返さず、アイテムが一列に並びます。初期値です。 |
| wrap | アイテムが折り返されます。 |
| wrap-reverse | アイテムが折り返され、下から上に表示されます。 |
justify-content
水平方向の配置を指定するプロパティです。
| 値 | 説明 |
| flex-start | 左揃えでアイテムが表示されます。初期値です。 |
| flex-end | 右揃えでアイテムが表示されます。flex-startの逆です。 |
| center | 中央にアイテムが固まって表示されます。 |
| space-between | 横幅いっぱいにアイテムが均等に表示されます。左右の端にだけ余白がありません。 |
| space-around | 横幅いっぱいにアイテムが均等に表示されるのはspace-betweenと同じですが、こちらは左右の端にも余白が設けられます。 |
align-items
垂直方向の配置を指定するプロパティです。
| 値 | 説明 |
| stretch | すべてのアイテムが、最も高いアイテムの高さに合わせて表示されます。初期値です。 |
| flex-start | アイテムが上揃えで表示されます。 |
| flex-end | アイテムが下揃えで表示されます。 |
| center | アイテムが縦に中央に表示されます。 |
| baseline | アイテムがベースラインを起点として表示されます。 |
align-content
複数行の場合の垂直方向の配置を指定するプロパティです。
| 値 | 説明 |
| stretch | align-itemsと同じくすべてのアイテムが、最も高いアイテムの高さに合わせて表示されます。初期値です。 |
| flex-start | 複数行のアイテムがすべて上に寄って表示されます。 |
| flex-end | 複数行のアイテムがすべて下に寄って表示されます。 |
| center | 複数行のアイテムが縦に中央に表示されます。 |
| space-between | 複数行のアイテムが縦いっぱいに表示されます。上下に余白はありません。 |
| space-around | space-betweenと同様、複数行のアイテムが縦いっぱいに表示されます。上下に均等な余白が挿入されます。 |
このようにflex-boxは簡単に横並びにできるだけでなく、アイテムの並び方も細かく指定できるので大変便利です。さまざまなレイアウトに使用されています。
聖杯レイアウト
聖杯レイアウトとは、ヘッダーとフッター、3カラムのコンテンツエリアのあるぺージのことです。コンテンツエリアは、中央がメインで左右がサブの役割を果たします。さまざまなページで使われている基本のレイアウトです。
flex-boxを使って聖杯レイアウトを組むには、以下のように記述します。
HTML
<header>ヘッダー</header>
<div class=”container”>
<div class=”main”>メインコンテンツ</div>
<div class=”sub1”>サブコンテンツ1</div>
<div class=”sub2”>サブコンテンツ2</div>
</div>
<footer>フッター</footer>CSS
.container {
display:flex;
justify-content:space-between;
}
.main {
width:60%;
order:2;
}
.sub1 {
width:18%;
order:3;
}
.sub2 {
width:20%;
order:1;
}まず、ヘッダーとフッターはそのままです。重要なのはコンテンツが入る3つのdivです。
真ん中に配置するメインコンテンツは幅60％とし、他の2つより大きくしています。左右に配置するサブコンテンツ1、サブコンテンツ2は18%です。
これを1つのdivで囲いflexコンテナとしました。これでメインコンテンツ、サブコンテンツ1、サブコンテンツ2が横並びになります。
60%＋18%＋18％で100％に4%足りないのは、余白をとるためです。justify-content:space-between;を指定しているので3つのdivが横幅いっぱいに配置され、それぞれのdivの間に2%の余白が生まれます。
これで3つのflexアイテムが綺麗な横並びに表示されましたが、このままでは先頭に記述されているメインコンテンツが一番左にきてしまいます。
この並び順を変更するのがorderです。メインコンテンツには「2」と記述しました。これで左から2番目、つまり中央に表示されるようになります。サブコンテンツ1は3番目で右カラムに、サブコンテンツ2は1番目で左カラムです。orderは、表示の順番を変更できるプロパティなのです。これを用いることによって、表示の順番を気にせず、HTMLに最も重要な要素を、最初に記述することができるようになります。
レスポンシブレイアウト
同一のHTMLを使用し、CSSの切り替えによってPCとスマートフォンの表示を変えるという手法です。PCは横に、スマートフォンでは縦に並べたいといったシチュエーションでflex-boxが役立ちます。
HTML
<div class=”container”>
<div><img src="sample1.png"></div>
<div><img src="sample2.png"></div>
<div><img src="sample3.png"></div>
</div>CSS（PC）
.container {
display:flex;
}
CSS（スマートフォン）
.container {
display:flex;
flex-direction:column;
}まずPCはflex-boxを指定しただけです。flex-directionは初期値のrow、左から右になっています。これで3つの画像が横一列に並びました。
PCではとても見やすいレイアウトですが、スマートフォンは画面の幅が狭いので、横並びのレイアウトが適さないケースが度々あります。
スマートフォンの場合縦並びの方が見やすいので、flex-directionにcolumnをかけて横並びを解除しました。columnはflex-boxを使用しない場合と同じ並びになるので、意味が無いようにも思われがちですが、このように横並びを解除したいときなどに便利です。
grid
gridもアイテムを並べて配置するのに優れた記述法です。ただし、flex-boxとは大きく異なる点があります。flex-boxは1つの軸しか存在しなかったのに対し、gridは縦と横、2つの軸が存在しているのです。
gridは以下のように記述します。
HTML
<div class="container">
<div><img src="sample1.png"></div>
<div><img src="sample2.png"></div>
<div><img src="sample3.png"></div>
<div><img src="sample4.png"></div>
<div><img src="sample5.png"></div>
<div><img src="sample6.png"></div>
</div>CSS
.container{
display: grid;
}まずコンテナにgridを指定します。しかし、これだけでは何も起きません。縦軸と横軸を何も指定していないからです。
CSS
.container{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px;
}grid-template-columnsは、縦軸を指定するプロパティです。3つの値を指定したので、3つの列ができます。数値は横幅です。上記のコードの記述は、幅100ピクセルのアイテムが3つ並ぶということになります。
grid-template-rowsは横軸を指定するプロパティです。100ピクセルを2つ指定したので、高さ100ピクセルの行が2つ並ぶということです。これによって、6つのアイテムが3列2行に並びます。
縦と横を操作するので、CSSの記述は複雑です。しかし、シンプルなHTMLで聖杯レイアウトなども作れるようになります。
タイルレイアウト
タイルレイアウトとは、タイルのように四角いアイテムがいくつも並ぶレイアウトです。
ここではgridを用いてタイルレイアウトを表現するコード例を紹介します。
HTML
<div class="container">
<div><img src="sample1.png"></div>
<div><img src="sample2.png"></div>
<div><img src="sample3.png"></div>
<div><img src="sample4.png"></div>
<div><img src="sample5.png"></div>
<div><img src="sample6.png"></div>
</div>CSS
.container{
display: grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:100px 100px;
gap:10px;
}grid-template-columnsの1fr 1fr 1frは1:1:1という意味です。これで画面いっぱいに3つのアイテムが同じ幅で均等に並びます。画面サイズが変わってもコンテナの幅に合わせてくれるので、とても便利です。
gapはアイテムごとの隙間です。縦横に10pxの余白が生まれます。これによって、6つの四角いアイテムが、3列2行で画面の横幅いっぱいに敷き詰められます。
CSSでレイアウトを整える方法：まとめ
レイアウトを整える際に便利なCSSを解説してきました。
紹介した3つはそれぞれに優れた特徴があります。
特にflex-boxとgridは現在では頻繁に使用される記述法なので覚えておく必要があります。
