カードを並べる——Flexbox実践

前のチャプターで、Flexboxで横に並べる基本を学びました。このチャプターでは、それを実際のWebサイトで一番よく見る形——「カードが横に並んだレイアウト」に仕上げます。サービス紹介、料金プラン、ブログ記事の一覧……あの"3枚並び"を、自分の手で作ります。

まず「カード」を1枚作る

カードといっても、特別なタグがあるわけではありません。正体は、これまで学んだものの組み合わせです。divの箱に、見出しと段落を入れて、ボックスモデルで整える——それだけです。

背景を白に、薄いグレーの枠線、内側に24pxのゆとり。これだけで、もう「カードらしさ」が出ています。チャプター9で学んだ「内側のゆとりはpadding」が、さっそく主役として効いていますね。

さらに、カードによく使われる仕上げを2つ足します。

border-radius は角を丸くするプロパティです。8pxほど丸めるだけで、印象がぐっと柔らかくなります。box-shadow は影です。指定が少し呪文めいていますが、今は「これを書くとふわっと浮いて見える」というコピペ用の道具だと思ってください(左から「横のズレ・縦のズレ・ぼかし・色」を指定しています)。角丸と影——この2つは、現代のWebデザインでカードを"カードらしく"見せる定番の組み合わせです。

カードを3枚、横に並べる

1枚できたら、並べるのは前章の復習です。カードたちを親の箱で囲み、親に旗を立てる。

同じ class="card" を3つの箱につけているところに注目してください。classの便利さはここにあります——1つの .card のスタイルを書くだけで、3枚全部に同じ見た目が適用される。デザインを変えたくなっても、CSSを1箇所直せば3枚まとめて変わります。「同じ見た目は、同じclassで使い回す」——これはこの先ずっと使う、とても大事な考え方です。

カードの幅を揃える

このまま並べると、カードの幅は中身の文章量で決まるため、微妙にバラバラになります。3枚をきれいに等幅にするには、カード側に1行足します。