「paddingとmarginの違いがわからない…」
このように悩んだことはありませんか？
実はこの2つ、カード型レイアウトを作ると一気に理解しやすくなります。
今回は、図解とコード付きでやさしく解説します。
余白を使って、見やすいデザインに仕上げていきましょう。
僕にもできるかな？
こんな方にオススメ
- カード型デザインを整えたい方
- CSSの余白設定に悩んでいる方
この記事でわかること
- カード型レイアウトの基本構造
- padding・marginの使い分け方
- 余白調整で見た目を整えるコツ
paddingとmarginの基本
paddingとmarginの違いは、こう覚えよう
padding＝内側の余白・margin＝外側の余白
このように覚えると、違いがわかりやすくなります。
それぞれの役割や使い方について、詳しい図解は別記事で紹介しています。
【図解あり】paddingとmarginの違いをやさしく解説
カード型レイアウトって？
カード型レイアウトとは、カードやタイルのようなパーツを並べて配置するデザインのことです。
ブログの記事一覧や、企業サイトの制作実績紹介や商品紹介などで使われ、同じような種類の情報を一覧で見せたいときの便利なレイアウトです。
複数行にわたって表示される場合は、コンテナの中で左から順にカードが並ぶように配置されるのが一般的です。
PC表示を意識したデザインであることが多いため、画面の幅に合わせてカラム数（カードの表示数）を変えるなど、レスポンシブ対応にも工夫が必要です。
なぜ、カード型レイアウトは見やすくなるの？
❶ 情報がグループ化されているから
それぞれのカードに、タイトルや画像、説明文などの情報がひとまとまりになっているため、何の情報かがすぐにわかり、内容を直感的に理解しやすくなります。
❷ レイアウトが整っているから
情報の配置がそろっていることで、全体が整って見え、視線も自然と流れていきます。どこに注目するといいのか、わかりやすくなるのもポイントです。
❸ 視線の流れが自然にできるから
人の視線は左上から右下へと流れる傾向がありますが、カードが規則的に並んでいることで、その流れに沿って自然に情報を追うことができます。
スムーズに読み進められるよう、視線の動きまで計算されたデザインになっているのが特徴です。
❹ 余白がしっかりあるから
カードの内側のpaddingで文章や画像が詰まりすぎず読みやすくなり、外側のmarginでカード同士にゆとりができます。この余白が全体のバランスや読みやすさにつながっています。
実践｜カードレイアウトをCSSで作ってみよう
ここでは、実際にdisplay:flex; とgridを使って、カードレイアウトを作っていきます。
初心者の方でも取り入れやすいシンプルな構成です。
まず、before / afterで違いをチェックしてみましょう。
Before：paddingとmarginがないカード
- カードが詰まって見える
- 文字と枠の間に余白がなくて見づらい
- カードの外側にスペースがない
このレイアウトでは、以下のようなCSSが使われています。
- .card.before に padding:8px; を指定
→ カード内の要素が枠に近接しており、全体的に余裕のない印象です。 - .card_wrapper に gap:0; を指定
→ カード同士の間に十分な余白がなく、詰まって並んでいるように見えます。
結果
- カード内の情報が詰まって見える
- 視線の区切りがなく、読みにくい
- 全体的に「息苦しい」印象に
After：paddingとmarginがあるカード
- カード同士に間隔が取れていて読みやすい
- 文字のまわりに余白があって読みやすい
- カードのまわりにほどよく余白がある
こちらでは、次のような点が改善されています。
- .card に padding:20px; を指定
→ 内側のコンテンツに余裕ができ、読みやすくなりました。 - .card-wrapper に gap:24px; を指定
→ カード同士の間にゆとりが生まれ、スッキリした印象になりました。 - ボックスシャドウや角丸などの装飾も追加され、視認性アップです。
Beforeと比べて
- 情報が整理されて見える
- 視線の区切りができ、内容を追いやすい
- デザインに「プロっぽさ」が出る
素敵な写真をありがとうございます。
画像のコードは、CodePen用に書き換えています。
そのため、コードを使う際は、必要に応じてご自身の環境に合わせて調整してくださいね。
よくある失敗と解決のヒント
カードの見た目は整ってきたけど、「余白がなんだか変」「指定したのに反映されない」と悩むことありませんか？そんなときに役立つ「よくある失敗」と「対処のヒント」をまとめておきますね。
余白が効かない
box-sizing の指定や、指定ミスが原因の可能性があります。
box-sizing:border-box;を指定していないと、思ったように余白が反映されないことがあります。
marginが効いてない
marginの相殺が起きているかもしれません。
上下の margin が打ち消し合って、余白がなくなることがあります。
【対処法】まずはoverflow:hidden; を使ってみるのが手軽な方法です。
横方向の余白だけ効かない
displayの指定や幅（width）の設定をチェックしてみましょう。
特に インライン要素は margin が効きづらいときがあるので、
display:block; や inline:block; に変更してみてください。
まとめ｜paddingとmarginを使いこなせばデザイン力がUPする
paddingは内側の余白、marginは外側の余白です。
さらにFlexboxやGridでは、要素同士の間隔を整える gap も便利です。
この違いを意識するだけで、レイアウトのバランスが整い、見た目の印象も大きく変わります。
余白はただの空白ではなく、読みやすさと見やすさを生む大切なデザイン要素です。
ゆとりを持たせることで、情報が伝わりやすくなります。
とくにカードレイアウトは、情報の整理にも応用にも使える万能スタイルです。
シンプルなので、初心者の方にも気軽に挑戦できます。
今回も読んで頂き、ありがとうございました。
