📘 公式リファレンス🏷️ リファレンス/タグ初級

stylesheet タグ（CSS定義）

セクション、ブロック、スニペット内で CSS スタイルを定義するタグ。各ファイルにつき1つだけ記述でき、定義した CSS はそのコンポーネント固有の外側スコープで読み込まれて実行される。

用途

セクションやブロック特有のスタイリングを、HTML マークアップの直下に同じファイル内で管理したいとき。外部 CSS ファイルを使わずに、コンポーネント単位でスタイルを閉じ込める。

設置場所

sections/*.liquid、blocks/*.liquid、snippets/*.liquid 内で `{% stylesheet %} ... {% endstylesheet %}` の形で記述し、CSS をその中に配置する。

注意点

Liquid 構文は stylesheet タグ内では処理されないため、Liquid 変数や制御文を含めるとシンタックスエラーが発生する。CSS 内に動的な値（色、余白など）を入れたいときは `<style>` タグと Liquid を併用する、または CSS 変数(custom properties)をスニペット呼び出し時の prop として受け取る設計に変える。

タグ:stylesheetcsssectionblocksnippetscoped-style

仕様

17 行 / json

{
  "category": "theme",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "Each section, block or snippet can have only one `{% stylesheet %}` tag.\n\nTo learn more about how CSS that's defined between the `stylesheet` tags is loaded and run, refer to the documentation for [stylesheet tags](/storefronts/themes/best-practices/javascript-and-stylesheet-tags#stylesheet).\n&gt; Caution:\n&gt; Liquid isn't rendered inside of `{% stylesheet %}` tags. Including Liquid code can cause syntax errors.",
  "parameters": [],
  "summary": "CSS styles included in [section](/storefronts/themes/architecture/sections), [block](/storefronts/themes/architecture/blocks), and [snippet](/storefronts/themes/architecture/snippets) files.",
  "name": "stylesheet",
  "syntax": "{% stylesheet %}\n  css_styles\n{% endstylesheet %}",
  "syntax_keywords": [
    {
      "keyword": "css_styles",
      "description": "The CSS styles for the section, block or snippet."
    }
  ],
  "examples": []
}

出典・ライセンス

Source:: Shopify/theme-liquid-docs/data/tags.json
Repository:: https://github.com/Shopify/theme-liquid-docs
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

stylesheet タグ（CSS定義）

仕様

出典・ライセンス

関連項目

doc タグ（テンプレートの注釈・ドキュメント）

include タグ（スニペットを埋め込む）

javascript タグ（セクション・ブロック内のコード）

sections タグ（セクショングループを描画）

break タグ（ループの中断）

continue タグ（ループをスキップ）