背景色のないセクションで、見出しの上が詰まる現象について

2026年8月22日より前に、「フレーム」または「パーツ対応のテンプレート（完成形テンプレ）」をダウンロードされた方が対象です。

はじめに：そのままお使いいただけます

どういう現象か

これまでのCSSでは、セクションの上下の余白を2つの違う方法で作っていました。

• 背景色ありのセクション … .bg-parts の padding で作る
• 背景色なしのセクション … section の margin で作る

そのため「ボックスの上端から見出しまでの距離」が背景の有無で変わり、次のことが起きていました。

1. 背景色のないセクションだけ、見出しの上の余白が狭くなる。実測すると距離がゼロ、つまり見出しがボックスの上端にぴったり接した状態になっています
2. アンカーリンク（#menu など）で飛んだとき、止まる位置が背景の有無でズレる。背景色のないセクションへ飛ぶと、見出しが画面の一番上に張り付きます
3. 背景色のセクションが続くと隙間ができるので、それを打ち消すためのCSSが必要だった

余白の数値（--content-space-l）を小さくしているほど目立ちます。もともとの数値が大きいテンプレートでは気づきにくい現象です。

何を変えたか

セクションの上下の余白を、padding だけで作るように統一しました。これで上の3つが同時に解決します。

あわせて、上下の余白専用の変数 --content-space-v を追加しました。左右の --content-space-l とは役割が違うため分けています。

実際の変化です（画面幅1300px、--content-space-l: 5vw のフレームで、セクションを6つ並べたときの「ボックスの上端から中身の先頭までの距離」）。

	背景なし	背景あり	背景なし	背景あり	背景あり	背景なし
変更前	0px	65px	0px	87px	65px	0px
変更後	52px	52px	52px	52px	52px	52px

変更後は、背景色のあり・なしに関わらず同じ距離になります。アンカーリンクの停止位置も自動的に揃います。

直したい場合の手順

変更するのはCSSの2ファイルだけです。HTMLは触りません。

手順1　theme.css に1行追加する

--content-space-l の行のすぐ下に、次の1行を足します。

	--content-space-v: 4vw;	/*セクションの上下の余白。0にはせず、--content-space-l より小さい値にしてください。*/

数値の目安は --content-space-l の 0.8倍くらいです。

• --content-space-l: 5vw なら → 4vw
• --content-space-l: 6vw なら → 5vw
• --content-space-l: 7vw なら → 6vw
• --content-space-l: 10vw なら → 8vw

お好みで増減して構いません。ただし 0 にはしないでください。0 にすると見出しの余白が外へ逃げてしまい、この現象が再発します。

手順2　style.css の section を書き換える

変更前

section {
	padding: 0 var(--content-space-l);
	margin: var(--content-space-l) 0;
}

変更後

section {
	padding: var(--content-space-v, var(--content-space-l)) var(--content-space-l);
}

/*section内の最初と最後の要素のマージンはリセット（余白はsectionのpaddingで管理する為）*/
section > :first-child {margin-top: 0;}
section > :last-child {margin-bottom: 0;}

/*見出しの上のマージンもリセット*/
main h2 {margin-top: 0;}

いくつか、フレームによって違うところがあります。

• 左右が var(--content-space-s) になっているフレームがあります。その場合、左右は -s のままにしてください。変えるのは上下だけです
• display: flow-root; の行が入っている場合は、削除して構いません。padding が同じ役目を果たすので不要になります

手順3　style.css の .bg-parts を書き換える

変更前

.bg-parts {
	padding-top: var(--content-space-l);
	padding-bottom: var(--content-space-l);
}

変更後

.bg-parts {
	padding-top: var(--content-space-v, var(--content-space-l));
	padding-bottom: var(--content-space-v, var(--content-space-l));
}

手順4　style.css の「背景色が続く場合」の指定を削除する（ここが一番大切です）

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}

これは margin があった時代の打ち消しです。消し忘れると、背景色のセクションが続いたときに、次のセクションが余白1つ分めり込みます。マージンが 0 になったのに、マイナスのマージンだけが残ってしまうためです。

削除しても隙間はできません。マージンを使わない設計なので、背景色が続いても最初からぴったり繋がります。

手順5　section.mb0 の指定があれば書き換える

次の2行が入っているフレームがあります。

変更前

section.mb0 {margin-bottom: 0;}
section.mb0 + section {margin-top: 0;}

変更後

section.mb0:not(.bg-parts) {padding-bottom: 0;}
section.mb0 + section:not(.bg-parts) {padding-top: 0;}

手順6　そのほか、入っていれば

フレームによっては、次の指定が入っています。どちらも見当たらなければ、何もしなくて構いません。

(1) 下層ページの先頭セクション　次のブロックは、削除してください。マージンが無くなったので働かなくなります。削除すると、下層ページの先頭も他のセクションと同じ余白に揃います。

body:not(.home) main > section:first-child {
	margin-top: 0;
}

(2) サイドバー付き（2カラム）のフレーム　次の指定がある場合は、削除ではなく書き換えてください。サイドバーの1行目と本文の見出しの高さを揃えるための指定です。

変更前

.main > section:first-child {
	margin-top: 0;
}

変更後

.main > section:first-child:not(.bg-parts) {
	padding-top: 0;
}

手順7　パーツのCSSも新しいものにする

パーツのCSSにも、上下の余白を扱っている箇所があります。フレームのCSSだけを直すと、背景色のあるセクションだけ余白が揃いません。

パーツコーナーから貼り付けたCSSをお使いの場合は、該当するパーツのコードを新しいものに貼り替えてください。対象は次のパーツです。

• 背景タイプ（bg2 / bg3 / bg4 / bg5 / bg6 / bg7）
• ui-tools-cta4、ui-tools-flex2、ui-tools-access1
• list-before-after1

これ以外のパーツは、上下の余白を扱っていないので貼り替え不要です。

HTMLは触らなくて大丈夫です

class="bg-parts" はこれまでどおり残してください。外す必要はありません。全ページを検索して直す、といった作業は発生しません。

デモページとの見え方の差について

パーツコーナーのデモとプレビューは、新しいフレームで作り直しています。そのため、2026年8月22日より前のフレームにパーツを貼ると、縦の余白がデモと少し違って見えます。

これは壊れているわけではありません。上の手順で移行していただくと、デモと同じ見え方になります。

同時に直した点

今回の更新にあわせて、次の2つも直しています。

• ui-tools-access1（地図）の bleed 版 … 前後のセクションとの余白のとり方を見直しました。これまでは地図が前後の本文にぴったり接していましたが、セクションの余白の分だけ間隔が空くようになります
• title8（枠線つきの見出し） … 背景色に「メインカラー」などの濃い色を選んだとき、見出しの文字が背景と同じ色になって見えなくなっていました。背景色に応じて文字色が切り替わるように直しています

うまくいったかどうかの確かめ方

ブラウザの検証ツールで、いくつかのセクションの「ボックスの上端から見出しまでの距離」を測ってください。背景色のあり・なしに関わらず、すべて同じ値になっていれば成功です。

アンカーリンクも、どのセクションでも見出しが同じ高さで止まるようになります。

ご不明な点は、サポート掲示板からお気軽にどうぞ。