先生と生徒の会話形式で理解しよう

生徒

「カードが横に並んでいるデザインをよく見るんですが、どうやって作るんですか？」

先生

「CSSのフレックスボックスを使うと、とても簡単にカードレイアウトが作れます。」

生徒

「フレックスボックスって、パソコンを触ったことがなくても理解できますか？」

先生

「大丈夫です。箱を並べるイメージで、一つずつ丁寧に説明します。」

1. カードレイアウトとは何かを知ろう

カードレイアウトとは、情報を「カード」のような四角い箱に分けて表示するデザインのことです。ネットショップの商品一覧、ブログの記事一覧、サービス紹介ページなど、さまざまな場面で使われています。初心者の方は、まず「一つの情報を一つの箱に入れる」と覚えると理解しやすくなります。

このカードを横に並べたり、画面の幅に合わせて自動で並び替えたりするために使われるのが、 CSSのフレックスボックスです。フレックスボックスは、要素の並び方を簡単にコントロールできる仕組みです。

2. フレックスボックスの基本的な考え方

フレックスボックスを理解するためには、「親」と「子」の関係を知ることが大切です。親はカード全体を包む箱、子は一枚一枚のカードだと考えてください。親に対して「フレックスボックスを使います」と指定すると、中に入っている子が横並びになります。

たとえば、本棚を想像してください。本棚が親で、本が子です。本棚を横向きに使うと、本は自然と横に並びます。フレックスボックスも同じような考え方で動いています。

3. カードを横に並べる基本コード

ここでは、もっとも基本的なカードレイアウトを作ります。まずはHTMLでカードを用意し、CSSでフレックスボックスを指定します。難しく感じるかもしれませんが、そのまま真似して大丈夫です。


<style>
	.cards {
	    display: flex;
	}
	.card {
	    border: 1px solid #ccc;
	    padding: 16px;
	    margin: 8px;
	    width: 150px;
	}
</style>

<div class="cards">
	<div class="card">カード1</div>
	<div class="card">カード2</div>
	<div class="card">カード3</div>
</div>

ブラウザ表示

displayという言葉は「表示方法」という意味です。 flexと書くことで、「中身を横に並べてください」という指示になります。これだけで、カードは自然に横並びになります。

4. カードの間隔を整える方法

カード同士がくっついていると見づらくなります。そこで使うのが、マージンとパディングです。マージンは箱の外側のすき間、パディングは箱の内側のすき間です。

お弁当箱で例えると、パディングはお弁当箱の中の余白、マージンはお弁当箱同士の間隔です。この考え方を覚えると、レイアウトが理解しやすくなります。

5. 画面幅に合わせてカードを折り返す

パソコンの画面が狭くなると、カードがはみ出してしまうことがあります。そんなときは、折り返しの設定を行います。フレックスボックスでは、折り返しも簡単に指定できます。


<style>
	.cards {
	    display: flex;
	    flex-wrap: wrap;
	}
	.card {
	    border: 1px solid #ccc;
	    padding: 16px;
	    margin: 8px;
	    width: 150px;
	}
</style>

<div class="cards">
	<div class="card">カードA</div>
	<div class="card">カードB</div>
	<div class="card">カードC</div>
	<div class="card">カードD</div>
</div>

ブラウザ表示

flex-wrapは「折り返すかどうか」を決める設定です。 wrapと書くことで、画面に収まらないカードは次の行に移動します。スマートフォンでも見やすいレイアウトになります。