このデザイン、どうコーディングする？ #4｜Figmaだけにある“あのマージン指定”、CSSで正しく落とし込む方法

「左右に40pxの余白、中央は800px」……これ、CSSでどう書くの？

Figmaのデザインでよく見る「左右に40pxの余白を取りつつ、中央に最大800pxのコンテンツを置く」というレイアウト。
シンプルに見えて、CSSにどう落とし込めばいいか毎回悩むという方、私も含めて少なくないと思います。

以前の私は、margin なのか padding なのか、calc() を使うべきかなど判断に迷いながら、都度コードを書いていました。
でも今では、「この指定ならこのCSS」という定番の書き方がすっかり定着しています。

今回は、そんなFigma特有のマージン指定を、再利用性・保守性を考慮したCSS設計にどう落とし込むかを、実務ベースで解説します。

結論：padding-inline + max-width + margin-inline: auto の組み合わせが鉄板

まず結論です。
Figmaでよくある「左右に40pxの余白を取りつつ、中央に800pxのコンテンツを置く」デザインは、以下のようなCSSで実装するのがベストです。

.container {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 40px;
}

なぜこの組み合わせが良いのか？

◯ max-width

中央に収める最大幅を指定。これが「Figmaで中央800px」の部分に相当します。
画面が広いときは800pxで止まり、狭いときは100%で縮まるため、レスポンシブにも自然に対応できます。

◯ margin-inline: auto

左右の余白を自動的に均等にして、中央寄せを実現します。
ブロック要素の水平センタリングでは、もはやおなじみの指定ですね。

◯ padding-inline

画面サイズに応じて左右に余白を確保します。
これはFigmaで言う「アートボードの左右に40pxのスペース」の再現です。

モダンCSSならではの書き方

• padding-inline / margin-inline を使うことで、左右両対応（LTR/RTL）に自然に対応
• セクションやページ全体に使える、再利用性の高い汎用コンテナクラスとしても優秀
• 古い書き方（例：padding-left / padding-right）よりもコードの明瞭性が高く、可読性も◎

この「max-width + margin-inline: auto + padding-inline」の組み合わせは、今やほとんどの案件でベース設計に使っています。
デザインの意図とCSSの責務を正しく分離しつつ、最小限の指定でバランスの取れたレイアウトが作れるからです。

FigmaとCSSの「視点の違い」を理解する

FigmaのデザインとCSSの実装がうまく噛み合わない原因の多くは、両者が“異なる視点”でレイアウトを扱っていることにあります。
これを理解しておくと、Figmaでの指定を見たときに「どのCSSプロパティを使うべきか」が判断しやすくなります。

Figmaはビジュアル優先、CSSは構造・文脈優先

• Figma：ピクセル単位での見た目や位置を視覚的に設計
  → 「左右40pxの余白」「中央に800pxのブロック」といった指示がよくある
• CSS：コンテンツ構造・レイアウトのルールに基づいて描画
  → 「何に対して余白を取るか」「親子関係の中でどう配置するか」が重要

つまり、Figmaの「40pxの余白」は見た目上の余白であり、
CSSではそれを再現するためにpadding を使うのか、margin を使うのか、文脈に応じて判断する必要があります。

よくある指定と、対応するCSSの考え方

親要素と子要素の役割を混同しない

Figma上ではすべての要素が並列に見えがちですが、CSSでは親要素（ラッパー）と子要素（コンテンツ）で責任を分けて書くのが基本です。

• 親要素（例：.section）
  → 背景色、上下のマージン、全体のpaddingなどを担当
• 子要素（例：.container）
  → max-width・中央寄せ・内部余白を担当

<section class="section">
  <div class="container">
    <!-- 中央寄せされた本文 -->
  </div>
</section>

こうすることで、Figmaのレイアウトを正しくCSSにマッピングできます。

まとめ：Figmaの「見た目の余白」は、CSSでは“親のpadding”で考える

Figmaで「このブロック、左右に余白あるな」と感じたら、
→ まず親要素の padding-inline を疑う

コンテンツが中央に寄っているなと思ったら、
→ max-width + margin-inline: auto を基本とする

このように、CSSは“目的ベース”でスタイルを適用するという意識を持つと、Figmaとのギャップが減っていきます。

よくある勘違いと設計ミス

FigmaのデザインをCSSに落とし込む際、初心者だけでなく中級者でも陥りやすいミスがあります。
ここでは、実際に私が現場で何度も見てきた「ありがちな勘違い」と、それに対する正しい対処法を紹介します。

NG：margin-left/right で余白を取ってしまう

間違った例：

.container {
  max-width: 800px;
  margin-left: 40px;
  margin-right: 40px;
}

この書き方では中央寄せされません。
なぜなら、左右に固定マージンが入るだけで、中央に揃えるという指示は含まれていないからです。

正しくは：

.container {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 40px;
}

margin-inline: auto で中央寄せを行い、padding-inline で見た目の余白を作ります。
**“中央に寄せるのはmargin、余白を取るのはpadding”**という役割を明確に分けるのがポイントです。

NG：コンテンツが画面端に張り付いてしまう

これもよくある問題です。
max-width を設定して中央に寄せたつもりでも、画面が狭くなると余白がゼロになり、テキストが端まで詰まって読みにくくなるケースがあります。

原因： padding が未指定、または親要素に余白がない

解決策： padding-inline を付けて、狭い画面でも快適な余白を確保する

.container {
  padding-inline: 20px; /* スマホ用 */
}
@media (min-width: 768px) {
  .container {
    padding-inline: 40px; /* PC用 */
  }
}

NG：box-sizing の指定漏れで横幅がはみ出す

デフォルトでは、CSSは width に padding を含みません。
そのため、max-width: 800px に padding: 40px を加えると、合計880pxになって中央からはみ出すことがあります。

対策：

*,
*::before,
*::after {
  box-sizing: border-box;
}

box-sizing: border-box をグローバルに指定しておけば、paddingやborderを含めてwidthが制御されるため、予期せぬレイアウト崩れを防げます。

NG：子要素だけに margin: auto を指定してしまう

よくあるパターンとして、<p> や <div> などの中の要素に margin: auto を指定しても、幅指定がなければ中央には寄りません。

p {
  margin: auto; /* 効かない */
}

中央寄せしたい要素には必ず横幅の指定が必要です：

p {
  width: fit-content;
  margin-inline: auto;
}

または、親要素（コンテナ）で制御する方がベターです。

まとめ：目的を明確にしてプロパティを選ぶ

FigmaのレイアウトをそのままCSSに変換しようとすると、見た目通りに書いたつもりでも、意図通りに動かないことが多いです。
だからこそ、「見た目」ではなく「構造」と「役割」でCSSを書く意識が大切です。

可変レイアウトで使える calc() の応用

Figmaでよくある指定のひとつに、
「左右40pxの余白だけど、画面が狭くなったら自動で縮めてね」
という、固定でもなければ完全なレスポンシブでもない曖昧な表現があります。

こうしたときに活躍するのが、CSSの関数 calc() や clamp() です。
これらを使えば、画面幅に応じて自然に余白をコントロールできる、今っぽい可変レイアウトが実現できます。

calc() を使った例：固定値＋割合のミックス

/.container {
padding-inline: calc(5vw + 20px);
}

• 5vw は「ビューポート幅の5%」
• + 20px は最低限確保したい余白

つまりこの例では、「最低でも20px、画面が広くなれば5vwまで伸びる」という柔軟な余白設定になります。

実務的には clamp() の方が直感的で使いやすい

最近の案件では、calc()よりも clamp() を使うケースの方が増えています。
理由はシンプルで、最小・理想・最大の3点を一発で指定できるからです。

.container {
  padding-inline: clamp(16px, 5vw, 40px);
}

この指定は、

• 最小で 16px（スマホ）
• 理想的には 5vw（中間）
• 最大で 40px（大画面）

という、スケーラブルかつ破綻しにくいパディングを実現できます。

メディアクエリで切り替える場合との違い

/* メディアクエリ方式 */
.container {
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .container {
    padding-inline: 40px;
  }
}

この方法でも十分機能しますが、ブレイクポイントがはっきりしている場合に限定されます。
対して clamp() や calc() を使えば、**滑らかに余白が変化し、より“デザインに寄り添ったレイアウト”**が可能です。

どちらを使うべき？

CSS関数を活用すれば、「この画面幅のときだけ崩れる…」といったレイアウトのブレを減らすことができます。
特にスマホとPCで余白の感じ方が大きく変わるUIでは、実装後の微調整を減らせるメリットも大きいです。

サンプルコード：レスポンシブ対応の中央寄せレイアウト

ここでは、これまでの内容をふまえた再利用可能な .container クラスの実装例を紹介します。
このパターンは、私の現場でもLPやコーポレートサイト、ブログなど幅広い案件で定番として使っているレイアウトのベースです。

◯ HTML構造＋CSS実装例（シンプルで再利用しやすく、モダンな中央寄せコンテナ）

• .section は背景色や上下マージンなどセクション全体の装飾用
• .container は中央寄せ＋余白の制御用

各プロパティの意味と意図

スマホでも安心のレスポンシブ対応

この .container を使えば、スマホ〜タブレット〜PCまで自然な余白感を保ちつつ中央寄せを実現できます。
特に clamp() を使うことで、細かいブレイクポイントをいちいち書かなくても良いのが最大の利点です。

応用例：.container--narrow, .container--wide の派生

複数の幅バリエーションを使い分けたい場合は、以下のようにクラスを拡張するのがおすすめです。

• ブログ本文 → .container--narrow
• ヒーロービジュアル → .container--wide
• 汎用パーツ → .container

といった具合に、設計としての一貫性を保ちながら柔軟に使い分けられます。

この .container パターンを持っておくことで、Figmaの「なんとなくそう見える」マージン指定にも迷わなくなります。
実装ルールとしてチーム内で共有しておくのもおすすめです。

実務Tips：複数コンテナ構造の整理術

実際の案件では、1ページの中に複数のセクションごとに異なる幅のコンテンツが出てくることは珍しくありません。
そのたびにスタイルを個別対応していると、CSSが複雑化し、保守しづらくなる原因になります。

ここでは、私が普段から実践している「コンテナの整理ルールと命名の工夫」を紹介します。

.container をページ内で何度も使うのはOK＋幅が異なる場合は修飾クラスを使う

.container はあくまで中央寄せ＋左右のpaddingを担う汎用クラスなので、
1ページに何度使っても構いません。
むしろ使い回すことで、レイアウトの一貫性が保てるというメリットがあります。

max-width を切り替えたい場面では、以下のように修飾クラスで派生パターンを作るのがスマートです。

NG例： max-width を都度インラインやID指定で個別に書く
→ 保守性が低く、クラス名の意味も不明瞭になります。

OK例： .container--[目的] で意味を持たせる
→ チーム開発でも読みやすく、再利用性◎

上下のマージンは .container に持たせない

中央寄せ・余白制御を .container に持たせるのは良いのですが、
上下のマージン（セクション間の余白）まで含めるのはNGです。

理由：

• 複数のセクションが並ぶと意図しない余白の重複が発生しやすい
• .container は「構造を整えるための器」なので、装飾や間隔はセクション側で制御すべき

推奨パターン：

よく使う命名パターンまとめ

CSS設計で重要なのは、「役割を分ける」「責任を明確にする」こと。
.container と .section を分離しておくことで、余白や背景の調整も柔軟になり、デザインの再現性も格段に上がります。

まとめ：Figmaの「それっぽい余白」を構造的に再現する

Figmaでよく見る「左右に余白があって中央に収まっている」デザインは、**CSSでいえば「max-width + margin-inline: auto + padding-inline」**の組み合わせが基本です。

大事なのは、“見た目の余白”ではなく、“構造的に意味のある余白”としてコーディングすること。
そのためには、役割を分けた .container の設計と、clamp() や box-sizing といったモダンCSSの活用が鍵になります。

複雑な指定も、基本の「型」を知っていれば迷いません。
Figmaの意図を読み解きつつ、CSSでシンプルに再現する設計力が、現場では一番求められています。

次回は、Figmaでよく指定される透明なヘッダー＋スクロール時の固定化を、position: sticky を使ってスマートに実装する方法を解説します。

次回もお楽しみに！