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

style タグ（CSS ルールを動的に埋め込み）

HTML の `<style>` タグを生成し、テーマエディタで色設定を変更すると、ページをリロードせず CSS ルールが即座に反映される。color settings をタグ内で参照すると、リアルタイムで更新される。

用途

テーマカスタマイザーの色設定パネルで色を変更したとき、見出しや背景色を即座に反映させたい場面で使う。セクション内でローカル CSS を定義するときにも活用できる。

設置場所

section や snippet 内の任意の場所で `{% style %}...{% endstyle %}` ブロックで囲み、その中に CSS ルールを直接記述する。複数の style タグを使っても OK。

注意点

style タグ内で settings や variables を参照すると、テーマエディタでの変更がリアルタイム反映される（page refresh 不要）。ただし `display_type` や `show_data_tab` などの内部仕様フィールドは `data-shopify` 属性自動付与に影響するため、手動で削除・変更しないこと。複雑な CSS 計算が必要なときは、asset CSS ファイルに切り出すほうが保守しやすい。

タグ:stylecsstheme-settingscolordynamic

仕様

28 行 / json

{
  "category": "html",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "&gt; Note:\n&gt; If you reference [color settings](/themes/architecture/settings/input-settings#color) inside `style` tags, then\n&gt; the associated CSS rules will update as the setting is changed in the theme editor, without a page refresh.",
  "parameters": [],
  "summary": "Generates an HTML `&lt;style&gt;` tag with an attribute of `data-shopify`.",
  "name": "style",
  "syntax": "{% style %}\n  CSS_rules\n{% endstyle %}",
  "syntax_keywords": [
    {
      "keyword": "CSS_rules",
      "description": "The desired CSS rules for the `&lt;style&gt;` tag."
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{% style %}\n  .h1 {\n    color: {{ settings.colors_accent_1 }};\n  }\n{% endstyle %}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ]
}

出典・ライセンス

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

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

style タグ（CSS ルールを動的に埋め込み）

仕様

出典・ライセンス

関連項目

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

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

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

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

stylesheet タグ（CSS定義）

break タグ（ループの中断）