カードを横並びにする基本的なFlexboxの使い方
カードを横並びにする基本的なFlexboxの使い方を紹介します。このサンプルでは、HTMLで3枚のカードを作成し、CSSのdisplay:flex;を指定して横方向へ並べます。カード同士の間隔にはgapを使用し、それぞれのカードへ同じ割合の横幅を割り当てる基本的なFlexboxレイアウトです。
サービス紹介、商品一覧、機能説明、ブログ記事一覧、管理画面の情報カードなど、複数の内容を横並びで見せたい場面に利用できます。カードを1つずつ個別に配置する必要がなく、親要素へFlexboxを指定するだけで整った横並びを作れるため、レイアウトを管理しやすい点もメリットです。
カードの見出しや説明文はHTMLから変更でき、CSSではカード同士の間隔、横幅、余白、背景色、枠線、角丸、影などを調整できます。画面幅640px以下ではカードを縦並びへ切り替えるため、スマートフォン・タブレット・PCで利用しやすく、Flexboxの基本的な使い方を確認できるサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
Flexboxを使用して3枚のカードを横並びにしています。
サービスの特徴や内容を簡潔に紹介するカードです。
カード同士の間隔はgapプロパティで設定しています。
各カードには同じ割合の横幅を指定しています。
3枚のカードがFlexboxで横並びになります。画面幅640px以下では縦並びへ切り替わります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>カードを横並びにする基本的なFlexboxの使い方</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- カード全体 -->
<div class="basic-flexbox">
<!-- カード1 -->
<div class="basic-flexbox_card">
<div class="basic-flexbox_card-title">
サービス1
</div>
<p class="basic-flexbox_card-text">
サービスの特徴や内容を紹介するカードです。
</p>
</div>
<!-- カード2 -->
<div class="basic-flexbox_card">
<div class="basic-flexbox_card-title">
サービス2
</div>
<p class="basic-flexbox_card-text">
Flexboxを使って横並びに表示しています。
</p>
</div>
<!-- カード3 -->
<div class="basic-flexbox_card">
<div class="basic-flexbox_card-title">
サービス3
</div>
<p class="basic-flexbox_card-text">
画面幅が狭くなると縦並びへ切り替わります。
</p>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではFlexboxを使用したカードの構造を作成し、CSSではカードを横並びに表示するレイアウトやデザインを設定しています。JavaScriptは使用していないため、ブラウザで開くだけで基本的なFlexboxレイアウトを確認できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlではカード全体の構造を作成しています。カードのタイトルや説明文を変更したり、カードを追加・削除したりする場合は、このファイルを編集します。
style.cssではFlexboxによる横並びレイアウトを設定しています。カードの横幅、間隔、背景色、余白、角丸、影などのデザインを変更できます。また、画面幅640px以下ではカードを縦並びへ切り替えるレスポンシブ設定も行っています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと、カードが横並びで表示されます。
カスタマイズできる内容
index.htmlではカードのタイトル、説明文、カード数を変更できます。style.cssではカードの横幅、カード同士の間隔、背景色、文字色、余白、角丸、影などを用途に合わせて調整できます。
数値調整
style.css
max-width:1200px;
カード全体の最大横幅です。1200pxを大きくするとカードを横方向へ広く表示でき、小さくすると全体がコンパクトにまとまります。
margin:40px auto;
カード全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると詰まったレイアウトになります。
padding:24px;
カード内側の余白です。値を大きくすると文字と枠線の間隔が広がり、ゆとりのある見た目になります。小さくすると内容がコンパクトに表示されます。
gap:20px;
カード同士の間隔です。20pxを大きくするとカード同士が離れて表示され、小さくすると間隔が狭くなります。
border-radius:12px;
カードの角丸です。値を大きくすると丸みが強くなり、小さくすると角ばったデザインになります。0にすると四角いカードになります。
font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが目立ち、小さくすると控えめな表示になります。
margin:0 0 12px;
タイトル下側の余白です。12pxを大きくするとタイトルと本文の間隔が広がり、小さくすると近づきます。
line-height:1.7;
本文の行間です。値を大きくすると文章が読みやすくなり、小さくすると行間が狭くなります。
padding:20px 16px;
640px以下で適用されるカード内側の余白です。上下20px・左右16pxの余白になります。値を大きくするとスマートフォンでも余裕のある表示になり、小さくするとコンパクトに表示されます。
640px
レスポンシブへ切り替える画面幅です。値を大きくするとより大きな画面から縦並びになり、小さくすると小さい画面だけ縦並びになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのdisplay:flexとwidth:100%を使用し、画面幅に応じてカードを表示します。また、640px以下ではmedia queryによりflex-direction:column;へ切り替わるため、スマートフォン・タブレット・PCで見やすく利用できます。
コメント