【CSS → ブロックテーマ】レスポンシブレイアウトの「翻訳ガイド」

─ あのCSSはtheme.jsonのここで書く ─

「サイドバーのレイアウト、CSSのflexboxで書いてたけどブロックテーマだとどうするの？」

「max-widthやclampはtheme.jsonのどこに書けばいいの？」

CSSでレスポンシブレイアウトを作ってきた人ほど、ブロックテーマに移行したときに
「あのCSSはどこへ行った？」と
迷子になりがちです。

この記事では
・CSSで書いていたレイアウトの書き方
・ブロックテーマでの対応する書き方

を「翻訳」する形で一つずつ解説します。
「CSSは知ってるけどブロックテーマは初めて」
という方に特に読んでほしい内容です！

CSSとブロックテーマ、何が変わった？

ブロックテーマに移行して最初に戸惑うのが
「レイアウトをどこで制御するのか」がわからなくなることです。
まずここを整理しましょう。

レイアウトの責任者が変わった

CSS時代はstyle.cssやCSSファイルがレイアウトの司令塔でした。
ブロックテーマではtheme.jsonとブロック設定に変わります。

でも考え方は同じ

書く場所と書き方は変わりますが、やりたいことは全く同じです。

コンテナの幅（max-width → contentSize）

CSSで一番よく書いていたレイアウトのひとつがコンテナの最大幅を決める設定です。
ブロックテーマではtheme.jsonに書くだけで完結します。

CSSで書いてたこと

こんなふうに書いていましたよね👇

/* コンテナの最大幅を決める */
.container {
  margin: 0 auto;
  max-width: 1000px;
  width: 95%;
}

/* min()でまとめると */
.container {
  margin: 0 auto;
  width: min(95%, 1000px);
}

theme.jsonではこう書く

同じことをtheme.jsonで書くとこうなります👇

"settings": {
  "layout": {
    "contentSize": "780px",
    "wideSize": "1000px"
  }
}

wideSize（align-wide）との関係

theme.jsonにはcontentSizeの他にwideSizeという設定もあります。
これはブロックに「幅広」を指定したときの最大幅です👇

左右の余白（padding → useRootPaddingAwareAlignments）

CSSでコンテナの左右に余白をつけるとき、
paddingやmax()を使っていましたよね。
ブロックテーマではtheme.jsonの1行で制御できます。

CSSで書いてたこと

/* 左右の余白を可変にする */
.container {
  padding: 0 max(10px, 5vw);
}

/* 画面が広いほど余白が広がり
   最小でも10pxは確保される */

theme.jsonではこう書く

theme.jsonに1行追加するだけです👇

"settings": {
  "appearanceTools": true,
  "useRootPaddingAwareAlignments": true,
  "layout": {
    "contentSize": "780px",
    "wideSize": "1000px"
  }
}

ラッパーdivが不要になった

CSS時代は「ラッパーdiv」で幅と余白を管理していました。
ブロックテーマではその考え方がガラッと変わります。

<div class="wrapper">
  <div class="container">
    <main>本文</main>
    <aside>サイドバー</aside>
  </div>
</div>

/* 親が子の幅を管理 */
.wrapper { max-width: 1000px; }
.container { padding: 0 5vw; }

/* theme.jsonに書くだけ */
"layout": {
  "contentSize": "780px"
}
"useRootPaddingAwareAlignments":
  true

/* 各ブロックが自分で
   幅を守ってくれる！ */

サイドバーのレイアウト（flexbox → columnsブロック）

CSSで一番手間がかかっていたのがサイドバーのレイアウトではないでしょうか。
flexboxで組んで、メディアクエリでスマホ対応して…という作業が
ブロックテーマではエディターの操作だけで完結します。

CSSで書いてたこと

/* サイドバーレイアウト */
.content {
  display: flex;
  gap: max(3%, 16px);
}

main {
  flex-grow: 1;
}

aside {
  width: max(30%, 200px);
  flex-shrink: 0;
}

/* スマホはサイドバーを下に */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }
  aside {
    width: 100%;
  }
}

ブロックテーマではこう作る

テンプレートのHTMLファイルにcolumnsブロックを使うだけです👇

<!-- wp:columns -->
<div class="wp-block-columns">

  <!-- wp:column {"width":"70%"} -->
  <div class="wp-block-column" style="flex-basis:70%">
    <!-- メインコンテンツ -->
  </div>
  <!-- /wp:column -->

  <!-- wp:column {"width":"30%"} -->
  <div class="wp-block-column" style="flex-basis:30%">
    <!-- サイドバー -->
  </div>
  <!-- /wp:column -->

</div>
<!-- /wp:columns -->

メディアクエリはどこへ行った？

CSS時代はスマホ対応のために@mediaを書く必要がありました。
ブロックテーマではcolumnsブロックが自動でスマホ対応してくれます。

margin・paddingはどこへ行った？

CSS時代は各要素にmarginやpaddingを細かく書いていましたよね。
ブロックテーマでは管理の仕方がガラッと変わります。

marginはblockGapで管理する

ブロックテーマでは、ブロックとブロックの間の余白を
blockGapという設定で一括管理します。

p { margin-bottom: 1rem; }
h2 { margin-top: 2rem; }
h3 { margin-top: 1.5rem; }

"styles": {
  "spacing": {
    "blockGap": "1.5rem"
  }
}

paddingはどうなってる？

ブロックのpaddingはデフォルトで0です。
つけたい場合は3つの方法があります👇

"blocks": {
  "core/group": {
    "spacing": {
      "padding": {
        "top": "1.5rem",
        "bottom": "1.5rem"
      }
    }
  }
}

"styles": {
  "spacing": {
    "blockGap": {
      "top": "1.5rem",     ← 縦方向
      "left": "2rem"       ← 横方向（カラム間）
    }
  }
}

フォントサイズの可変（clamp → fluid）

CSS時代はclamp()を使って
フォントサイズを画面幅に応じて自動で伸び縮みさせていました。
ブロックテーマではtheme.jsonのfluid設定で同じことができます。

CSSで書いてたこと

/* フォントサイズをclampで可変にする */
h1 {
  font-size: clamp(1.75rem, (1rem + 3vw), 2.25rem);
}

/* 最小値：1.75rem
   推奨値：1rem + 3vw（画面幅で変動）
   最大値：2.25rem */

clampの考え方はこうでしたよね👇

theme.jsonのfluidではこう書く

theme.jsonに"fluid": trueを追加するだけで
fontSizesに登録したサイズが自動的にclampに変換されます👇

"settings": {
  "typography": {
    "fluid": true,
    "fontSizes": [
      {
        "slug": "large",
        "size": "1.375rem",
        "fluid": {
          "min": "1.1rem",
          "max": "1.375rem"
        }
      },
      {
        "slug": "x-large",
        "size": "1.75rem",
        "fluid": {
          "min": "1.375rem",
          "max": "1.75rem"
        }
      }
    ]
  }
}

clamp(
  1.1rem,   ← 最小値
  3vw,      ← 推奨値
  1.375rem  ← 最大値
)

"fluid": {
  "min": "1.1rem",   ← 最小値
  "max": "1.375rem"  ← 最大値
}
/* 推奨値は自動計算！ */

対応表まとめ（一覧で見る）

ここまでの内容を一覧表で確認しましょう。
「あのCSSはどこに書けばいいんだっけ？」というときのチートシートとして使ってください😊

もっと使いこなしたい人へ

ここまで「CSSからブロックテーマへの翻訳」を見てきました。
最後に2つの大事なポイントをお伝えします。

CSSが完全にいらなくなるわけではない

「ブロックテーマにしたらCSSは一切書かなくていい！」
…というわけでは残念ながらありません😅

つまりこういうイメージです👇