{% stylesheet %} の CSS が 「使うページだけ」に自動で絞られる

図解 ： {% stylesheet %} タグの CSS 自動サブセット配信（Shopify テーマ） Action Required Themes {% stylesheet %} の CSS が 「使うページだけ」に自動で絞られる 2026年4月20日から、Shopify は各ページで実際に描画される section / block / snippet に関連する CSS だけを配信。全ページで全 CSS を読ませる従来方式をやめる。自己完結したテーマは変更不要だが、ファイルをまたいでクラスを参照しているとスタイルが欠落する。 このページの構成 そもそも何が変わるのか（30秒で理解） 仕組み図解 ： 従来配信 vs サブセット配信 影響あり／なしの判定 壊れるパターンの具体例 対応チェックフロー（3ステップ） 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか 今までは {% stylesheet %} で書いた CSS は、 どのページでも全部まとめて 配信されていた。 2026年4月20日からは、 そのページに実際に描画される section / block / snippet に関係する CSS だけ を配信するようになる（CSS サブセット配信）。狙いはストアフロントの表示パフォーマンス改善。 従来 ： 全部まとめて配信 全 {% stylesheet %} の CSS を、内容に関係なく毎回のページ読み込みで配信。使われていない CSS も一緒に運ばれる。 これから ： 関連分だけ配信 そのページに描画される section / block / snippet に関連する CSS だけを配信。不要な CSS が減り、ページが軽くなる。 Action Required タグ付き。 2026年4月20日以降、Shopify 側で自動的に適用される変更。自己完結したテーマは何もしなくてよいが、ファイルをまたいでクラスを使い回しているテーマは 事前にチェックして直しておく 必要がある。 2 仕組み図解 ： 従来配信 vs サブセット配信 ポイントは「 描画されたファイルの CSS だけが積まれる 」こと。あるファイルが {% render %} で呼ぶ直接の子は、親と一緒に描画されるので、その子の CSS も一緒に配信される。問題になるのは「描画されていないファイルの CSS」を当てにしているケース。 3 影響あり／なしの判定 変更不要 CSS が自己完結している 各ファイルの {% stylesheet %} が、 同じファイル内の HTML 要素 か、 {% render %} で呼ぶ直接の子 だけをスタイリングしている。→ すでに互換。何もしなくてよい。 要対応 クラスをファイルまたぎで使っている あるファイルの {% stylesheet %} が定義したクラスを、 無関係な別ファイル の HTML 要素が使っている。→ 定義元が描画されないページでスタイルが当たらない。これが 探して直すべきパターン 。 CSS クラスの使われ方 4/20 以降の挙動 対応 同じファイル内の要素だけに適用 そのまま動く 不要 {% render %} で呼ぶ直接の子に適用 そのまま動く （親と一緒に配信） 不要 無関係な別ファイルの要素に適用 スタイル欠落の恐れ （定義元が未描画のページ） 要修正 4 壊れるパターンの具体例 記事の説明を、典型的な構造に落とすと以下のようなイメージ（コードは理解のための模式例）。 NG ： 定義元と利用元が別ファイル // section-promo.liquid（このクラスを定義しているファイル） {% stylesheet %} .badge-sale { color: red; font-weight: bold; } {% endstylesheet %} // product-card.liquid（別ファイルで .badge-sale を使っている） <span class= "badge-sale" >SALE</span> ← 定義は section-promo 側 section-promo が描画されないページ（例 ： product-card だけ出るページ）では .badge-sale の CSS が配信されず、 赤字・太字が当たらない 。これが記事の言う「他の無関係なファイルで使われるクラス」の問題。 OK ： 定義と利用が同じ／親子で閉じている // product-card.liquid（定義も利用も同じファイル） <span class= "badge-sale" >SALE</span> {% stylesheet %} .badge-sale { color: red; font-weight: bold; } {% endstylesheet %} // render で呼ぶ直接の子も一緒に配信される {% render 'badge', text: 'SALE' %} ← 親と同時に描画 → 子の CSS も同梱 クラスを「定義したファイル自身」または「 {% render %} で呼ぶ子」の中だけで使っていれば、そのファイルが描画される＝CSS も必ず一緒に配信されるので欠落しない。 5 対応チェックフロー（3ステップ） 1 クロスファイル参照を洗い出す {% stylesheet %} で定義したクラス名が、定義元と違うファイルの HTML で使われていないかを全テーマファイルで確認。 2 自己完結になるよう寄せる 該当クラスを利用元ファイルの {% stylesheet %} に移すか、 {% render %} で親子関係に閉じる形へ作り替える。 3 各テンプレで表示確認 商品・コレクション・カート等、定義元が描画されないページでスタイル崩れがないかをプレビューで点検。 修正の詳しいガイドは、記事が案内する「 stylesheet subsetting のドキュメント 」を参照とされている（記事内に具体的な URL の明示は 記載なし ）。 6 技術者が押さえるべき5つのポイント 1. 自動適用・開始は4/20 2026年4月20日から Shopify 側で順次有効化。オプトインではなく挙動側が変わるので、それまでに棚卸し・修正を済ませておく。 2. 配信単位は描画される要素 配信対象は、そのページに描画される section / block / snippet に関連する CSS。描画されないファイルの {% stylesheet %} は積まれない。 3. render の子は一緒に配信 {% render %} で呼ぶ直接の子は親と同時に描画されるため、その子の CSS も同梱される。親子に閉じた設計なら安全。 4. 危険は「クロスファイル参照」 定義元と無関係なファイルでクラスを使い回している箇所が唯一の障害点。定義元が未描画のページで CSS が欠ける。 5. 検証はテンプレ横断で。詳細はドキュメントへ 影響は「定義元が描画されないページ」に出るので、商品 / コレクション / カート / 検索など複数テンプレを実機プレビューで確認する。修正の具体手順は記事が案内する stylesheet subsetting のドキュメント参照（記事本文に手順の詳細・URL の 記載なし ）。 7 業務に活かせる3つのユースケース USE CASE 1 既存テーマの「クロスファイル CSS 依存」一斉監査 課題 長年継ぎ足してきたテーマで、どのクラスがどのファイルで定義され、どこで使われているか把握できていない。4/20 以降にスタイル崩れが出るか分からない。 打ち手 全 {% stylesheet %} のクラス定義と、HTML 側のクラス利用箇所を突き合わせ、定義元と利用元が別ファイルになっている箇所をリスト化する。 効果 4/20 以降に崩れる箇所を事前に特定でき、本番事故を回避。監査結果はそのまま改修見積りの根拠になる。 技術メモ 判定軸は「同一ファイル内 or {% render %} の直接の子で完結しているか」。完結していれば対応不要。 USE CASE 2 パフォーマンス改善提案の「自動で効く施策」として説明 課題 不要 CSS の配信でページが重く、表示速度を改善したいが、CSS 分割は工数が読めず提案しづらい。 打ち手 4/20 から Shopify 側でページ単位の CSS サブセット配信が入ることを説明。テーマを自己完結に整えるだけで、全ページに不要 CSS が乗らなくなる。 効果 各ページで配信される CSS 量が減り、ストアフロントの読み込みが軽くなる（記事の主目的＝パフォーマンス改善）。 技術メモ 削減幅はテーマ構成依存。改善幅の数値は記事に 記載なし のため、前後で実測して提示する。 USE CASE 3 新規・改修テーマの CSS 設計ルールを「自己完結」に統一 課題 複数人で触るテーマで CSS の置き場所がバラバラになり、ファイルまたぎの依存が生まれやすい。 打ち手 「CSS は使う要素と同じファイルか {% render %} の子に閉じる」を設計ルール化。レビュー時にクロスファイル参照を弾く。 効果 サブセット配信と最初から互換になり、将来の崩れリスクを構造的に排除。可読性・保守性も向上。 技術メモ 共通スタイルの集約方法（どこに置けば常時配信されるか等）は記事に明示 記載なし 。ドキュメントで確認のうえルール化する。 8 提案で使える1行サマリ 「2026年4月20日から {% stylesheet %} の CSS は ページに描画される要素の分だけ配信 される。 CSS が 同一ファイル or {% render %} の子に閉じていれば変更不要 。 ファイルまたぎでクラスを使い回している箇所だけ を洗い出して自己完結に直せばよい。」 source ： shopify.dev/changelog/automatic-css-subsetting-for-stylesheet-tags generated 2026-05-24