AI 2026.10.31

【制作の記録 · 第4回】この空き、どこから来ている？;

サイトの余白を、一つずつ確かめて整える。margin・padding・gapの使い分け KOOL:CREAT;2026.10.21 見出しの下が、少し空きすぎている。写真と文章が近すぎる。スマホで見ると、一つのセクション […]

SCROLL

ARTICLE 2026.10.31

サイトの余白を、一つずつ確かめて整える。
margin・padding・gapの使い分け

KOOL:CREAT;2026.10.21

見出しの下が、少し空きすぎている。写真と文章が近すぎる。スマホで見ると、一つのセクションがずいぶん長い。

文字や写真を入れた後、そうした「間」が気になることがあります。ただ、空いている場所を見つけても、どの指定を変えればよいのかは、画面だけでは分かりません。

今回は、国東バスケットボールクラブの制作途中の画面と保存されたコードを使い、余白の見方を整理します。後半には、小さなセクションを使って試せるHTMLとCSSも用意しました。

まずは「何と何の間を変えたいか」を決めること。それだけでも、修正する場所を探しやすくなります。画像は当時の制作記録です。画像だけから不具合や原因を断定しているものではありません。比較表示と練習用コードは、本記事の説明用に作成したもので、元のサイトの修正前後ではありません。

この記事に必要な知識

読むだけなら専門知識は必要ありません。画面で余白の場所を分けるところから説明します。コードを試すならWordPressで編集箇所を開き、現在のコードを控え、保存とプレビューができること。今回覚えることmargin、padding、gapの役割。高さや行間と、余白の違い。作業の範囲下書きの練習ページのセクション１か所。最初からページ全体の余白は変更しません。

読む目安：約10〜15分。CSSの保存場所は、テーマやサイトの作り方によって異なります。

この記事の内容

まず、「何と何の間」かを決める。

トップページの活動支援セクションには、見出し、本文、支援の用途、ボタン、集合写真があります。一つの画面の中にも、種類の違う余白がいくつもあります。

制作途中のトップページ。「セクションの端と内容の間」「見出しと本文の間」「文章と写真の間」を分けて見てみます。

例えば「左側が空きすぎる」だけでは、画面の左端のことなのか、見出しと本文の間のことなのか、対象が曖昧です。相談するときは、次のように言い換えます。

「黄色いセクションの上端から、最初のラベルまでの空きを少し減らしたい」
「左の見出しと、その下の説明文の間を詰めたい」
「文章と集合写真の間を、もう少し広げたい」

それぞれ、変更するCSSが異なる可能性があります。先に対象を分けることで、別の場所まで動かしてしまうのを防ぎやすくなります。

スクリーンショットには、気になる空きだけでなく、その両側にある文字や画像も含めます。パソコンでは問題なく、スマホだけで気になるなら、両方の画面を添えてください。

外側・内側・並びの間。
３つに分けて考える。

CSSで余白を扱うとき、最初に覚えたいのが次の３つです。

指定	主に扱う場所	使用例
`margin`	要素の外側	見出しの下から、次の本文までの間
`padding`	要素の内側	背景色の付いた枠の端から、中の文章までの間
`gap`	GridやFlexboxなどで並ぶ要素同士の間	横に並べた文章欄と写真欄の間

marginは外側、paddingは内側の領域を作ります。［1］［2］背景色の付いた箱を考えると、箱の中の文章を端から離すのがpadding、箱そのものを周りから離すのがmarginです。

gapは、GridやFlexboxなどのレイアウトで使います。普通の段落の親にgapを書くだけで、必ず段落間が空くわけではありません。どの方法で要素を並べているかも確認します。［3］

数字を２つ書くときは「上下・左右」

padding: 40px 20px;

この例では、内側の上下に40px、左右に20pxの余白を取ります。１つだけなら４辺共通、４つ書く場合は上・右・下・左の順です。marginの一括指定でも同じ順番を使います。

最初は一括指定を全部書き換えるより、padding-topやmargin-bottomなど、変えたい方向を一つに絞ると、結果を追いやすくなります。

学習用：内側の余白8px

活動を、地域で支える。

一つひとつの応援が、子どもたちの次の一歩につながります。

学習用：内側の余白24px

活動を、地域で支える。

一つひとつの応援が、子どもたちの次の一歩につながります。

同じ幅の枠で、内側の余白だけを変えた学習用の表示です。左右の余白が増えると、文章を置ける幅も狭くなるため、折り返しが変わる場合があります。

余白は多いほどよい、少ないほどよい、とは限りません。離しすぎると関係が分かりにくくなり、近すぎると違う情報がひとまとまりに見えます。何を一緒に読んでほしいかで考えます。

空いて見える原因は、
余白だけとは限らない。

活動支援ページの冒頭は、文章と人物の画像を左右に配置する構成でした。

活動支援ページの冒頭。トップページ内の案内とは別の箇所です。高さや配置の指定も、見えている空間に関わります。

保存されたコードには、文章側にpadding: 90px 0;を設定する記述がありました。一方で、文章と写真を囲む部分には、min-height: 700px;という指定もありました。

/* 当時のコードから、関連する指定だけを抜粋 */
.kb-support-page__hero-inner {
  min-height: 700px;
}

.kb-support-page__hero-content {
  padding: 90px 0;
}

min-heightは最低限の高さです。この例では、内容が少なくても、対象の要素は少なくとも700pxの高さを持つ指定です。［5］実際のページには、画面幅ごとの調整や画像の配置など、ほかの指定もあります。

そのため、見えている空きを全部marginだと思って減らしても、期待したほど変わらないことがあります。高さを保つ指定が残っていたり、隣にある画像の高さにそろえていたりするためです。空きの正体を確かめる順番

まず、どの要素の領域かを確認します。その上で、外側の余白、内側の余白、要素同士の間隔、高さや配置の指定を調べます。画面だけで分からない場合は、対応するHTMLとCSSを一緒に確認します。

上の抜粋は仕組みを説明するための記録です。700pxや90pxを、そのまま別のサイトへ使うための推奨値として示しているものではありません。

練習：余白を一つずつ変えてみる。

ここでは、説明文と案内欄を持つセクションを作ります。狭い画面では縦に並び、広い画面では横に並ぶ練習用の例です。

１．下書きページにHTMLを用意する

カスタムHTMLを扱える箇所に、次のHTMLを入れます。元のサイトのコードを変更する場合は、先に変更対象を控えておきます。

<section class="kcj-space-demo">
  <div class="kcj-space-demo__layout">
    <div class="kcj-space-demo__text">
      <h2>子どもたちの挑戦を、地域の力で。</h2>
      <p>一つひとつの応援が、次の一歩につながります。</p>
    </div>
    <div class="kcj-space-demo__panel">
      <p>遠征・大会参加や、練習環境を整えるための支援を案内します。</p>
    </div>
  </div>
</section>

classはCSSから対象を指定する名前です。この例では、セクション全体、並びを決める部分、文章欄、案内欄を区別しています。

２．対応するCSSを用意する

次のCSSは、サイトでCSSを管理している場所に入れます。HTMLの文章として貼るものではありません。どこへ入れるか分からない場合は、今の編集画面と保存場所を先に確認します。

.kcj-space-demo {
  box-sizing: border-box;
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  background: #fff4cc;
}

.kcj-space-demo .kcj-space-demo__layout {
  display: grid;
  gap: 1.5rem;
}

.kcj-space-demo .kcj-space-demo__text h2 {
  margin: 0 0 1rem;
}

.kcj-space-demo .kcj-space-demo__text p,
.kcj-space-demo .kcj-space-demo__panel p {
  margin: 0;
}

.kcj-space-demo .kcj-space-demo__panel {
  padding: 1.5rem;
  background: #ffffff;
}

@media (min-width: 768px) {
  .kcj-space-demo {
    padding: 4rem 2rem;
  }

  .kcj-space-demo .kcj-space-demo__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

この例のremは、ページのルートの文字サイズを基準にする単位です。基準が16pxなら、1remは16pxです。768pxはこの練習で決めた表示の切り替え位置で、機種名で判定しているわけではありません。

練習コードの場所	担当する余白
セクションの`padding`	薄黄色の背景の端と、内容の間
見出しの`margin`	見出しの下と、本文の間
並びの`gap`	文章欄と案内欄の間
案内欄の`padding`	白い枠の端と、その中の文章の間

margin: 0 auto;は、ここでは幅を制限したセクションを横方向に中央へ置くための指定です。見出しの下の空きとは、役割が違います。

３．一つの数値を変え、画面で比べる

例えば、狭い画面で薄黄色の背景の上下を詰めたいなら、最初のpadding: 2.5rem 1.25rem;の2.5remを、試しに2remへ変えます。左右の1.25remは、そのままにします。

案内欄と文章欄の間だけを変えたいなら、gapを調整します。広い画面では後半のgap: 3rem;が使われるため、どの幅向けの数値を変えるかも確認してください。

一度に複数の値を変えると、どの変更が効いたか分かりにくくなります。変える、保存する、確認する。この順番で一つずつ進めます。このコードを新しく追加すると、練習用のセクションが表示されます。既存の活動支援セクションを直接修正するコードではありません。実際の修正では、現在の名前と構造に合わせて変更対象を特定します。

思ったように変わらないときは。

上下のmarginは、単純な足し算にならないことがある

通常のブロックの並びなどでは、隣り合う上下のmarginが一つにまとまる「相殺」が起きる場合があります。例えば、正の余白24pxと16pxが相殺される条件では、間は40pxではなく24pxになります。［4］

最初から条件を全部覚える必要はありません。「上下の余白が必ず足し算になるわけではない」と知っておき、値と見た目が合わないときに確認します。GridやFlexboxのアイテム同士では、この相殺は起きません。

文字の行間と、見出しの下の余白を分ける

２行の見出しの行間が広いなら、まずline-heightを確認します。見出し全体と、その次の本文が離れているなら、marginなどが対象です。文章内と要素間を分けると、見直す場所が絞れます。

空のブロックや、テーマ側の指定も見る

WordPressでは、空の段落、スペーサー、ブロック側の余白設定が残っている場合もあります。カスタムHTMLのCSSだけでなく、その前後のブロックや、囲んでいる部分も確認します。

空きが変わらないからといって、先にマイナスのmarginで引き寄せると、別の画面幅で重なることがあります。まず元の空きを作っている指定を特定し、必要な変更を考えます。

また、ボタンの内側の余白を減らすと、押せる面積まで小さくなることがあります。見た目が詰まったかだけでなく、操作しやすいかも確認しましょう。

変えたい間隔を、
具体的に伝える。

AIには、気になる場所、希望する変化、動かしたくない部分を伝えます。次の例は、見出しと本文の間を調整したい場合の相談文です。

相談文の例｜当時の会話の転載ではなく、本記事の学習用です

WordPressのトップページにある活動支援セクションです。
画像１はパソコン、画像２はスマホの画面です。
現在のHTMLとCSSを添付します。

左側の見出しと、その下の説明文の間を、少し詰めたいです。
写真やボタンの位置は、まず変えずに確認したいです。

この間隔が、margin・padding・gap・高さの指定など、
どの部分によって作られているか確認してください。

変更するCSSの範囲を示し、追加か置き換えかも説明してください。
スマホ向けに別の指定がある場合は、それも示してください。

実際に使うときは、比較する画面と現在のコードをそろえます。添付していない画面について書くのではなく、確認できる情報に合わせて相談文を変えてください。

修正後は、周りまで確認する

変えたかった間隔だけが、意図した方向へ変わったか。
同じ内容の見出しと本文が、ひとまとまりに見えるか。
違う内容のセクションとの境目が、分かるか。
スマホで縦並びになっても、空きが不自然でないか。
文字を拡大して行数が増えても、重ならないか。
ボタンが押しにくくなっていないか。

最後にページ全体をスクロールして、同じ役割のセクションと見比べます。一つの場所だけに集中すると気づきにくい、全体のリズムも確認できます。

今回の制作メモ

余白は、内容の関係を伝える。

余白を整えることは、空いている場所を減らすことだけではありません。近づけて一緒に読んでもらうものと、離して区切りを伝えるものを考える作業です。

制作画面を見て「空きすぎる」と感じたら、まず、その両側に何があるかを言葉にします。その上で、内側なのか、外側なのか、並びの間なのか、高さによるものなのかを確かめます。

場所を決める。原因を確かめる。一つ変えて、別の幅でも見る。この順番を覚えておくと、余白の修正を少しずつ進めやすくなります。

次回は「写真の切れ方と縦横比」を取り上げます。全員を見せたい集合写真と、枠いっぱいに見せたい写真で、何を変えるかを整理します。

START A PROJECT

あなたの想いを、
聞かせてください。

CONTACT ↗

【制作の記録 · 第4回】この空き、どこから来ている？