セクションのCSS / JS
セクション固有のCSS / JSを適切な場所に置き、設定値をCSS変数で渡せる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、セクション固有のCSSとJavaScriptを正しい場所に置き、設定値をCSS変数で渡せるようになります。
受託では「同じセクションを3つ置いたらCSSが3回出た」という事故を、置き場所のルールで防げます。
{% stylesheet %} / {% javascript %}とは
セクション・ブロック・スニペットのファイルの中に書けます。
中身はテーマ全体で1本のCSS / JS（styles.css / scripts.jsなど）に結合され、content_for_headerから読み込まれます。
そのファイルが何回使われても、出るのは1回だけです。
CSSは、ページの描画に使うファイルの分だけに絞られます（サブセット化）。
中身は静的でLiquidは使えず、1ファイルに1つまでです。
設定に依存する値は、CSS変数で渡す
設定値に依存する見た目は、style="--columns: {{ section.settings.columns }}"のように要素へ渡します。
静的なCSS側ではvar(--columns)で受けます。
静的な見た目は{% stylesheet %}に、動的な値はCSS変数に書きます。
この2分割だけ覚えます。
{% style %}とは何が違うか
{% style %}はLiquidが使える<style>タグで、その場に出力されます。#shopify-section-{{ section.id }}でスコープすれば、同じセクションの複数配置にも耐えます。
ただし、ループの中で出すとN回出力されます。
ブロック単位の動的なスタイルも、CSS変数で渡します。
発展：assetsとの使い分けと、JSの注意
複数のセクションで共有するCSS / JSはassets/に置き、stylesheet_tag / script_tagで読みます。
Dawnはセクションごとのasset CSS、HorizonとSkeletonは{% stylesheet %}中心です。{% javascript %}はdeferで読まれ、こちらも1回だけです。
Custom Elementsの定義はcustomElements.getでガードして、二重定義を防ぎます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。