Shopifyでテンプレートを作っていると、意図しない余白がHTMLに出てしまって困ったことはありませんか？たとえばリストがうまく揃わなかったり、デザインが崩れたり…。そんなトラブルをLiquidの「ホワイトスペース制御」で簡単に解決できます！
本記事では、Liquidテンプレートで余計な空白が発生する原因と、それを解消する方法を初心者向けにわかりやすく解説します。
ホワイトスペースが発生する例とその問題点
Liquidテンプレートでは、意図しない空白や改行がHTMLに含まれることがあります。
問題例:
{% for product in products %}
<li>{{ product.title }}</li>
{% endfor %}
このコードでは、各行の改行やインデントがそのままHTMLに反映され、リストが崩れたり、デザインに悪影響を与える可能性があります。
ホワイトスペース制御の基本構文
Liquidには、余計な空白や改行を削除するための構文があります。
{%- ... -%}: ブロックの両端の空白を削除{{- ... -}}: 値の両端の空白を削除
これを使うことで、意図しない空白を防ぐことができます。
修正版コード例
例1: 改行やインデントを削除
<ul>
{%- for product in products -%}
<li>{{- product.title -}}</li>
{%- endfor -%}
</ul>
この修正版では、改行やインデントが削除され、クリーンなHTMLが生成されます。
例2: データ内の空白も削除
空白を含むデータには strip フィルターを適用することで、さらにスッキリした出力が得られます。
<ul>
{%- for product in products -%}
<li>{{- product.title | strip -}}</li>
{%- endfor -%}
</ul>
よくある質問とトラブルシューティング
質問1: 空白が消えないのはなぜ？
Liquid構文で空白制御を適切に使用していない可能性があります。また、データそのものに空白が含まれている場合もあります。
{% assign text = " Example " %}
{{ text }}
このコードでは空白が残ります。strip フィルターを使用すると解決します。
{{ text | strip }}
質問2: Liquid構文を使っても意図しない空白が残る？
Liquid構文の削除タグ (-) を使用していない場合、余計な空白が保持される可能性があります。以下のように修正してください。
{%- if products.size > 0 -%}
{{- products.first.title -}}
{%- endif -%}
まとめ
Liquidのホワイトスペース制御を理解することで、余計な空白を排除し、テンプレートを効率よく作成できます。これにより、HTMLの見た目を改善し、読みやすいコードを書くことができます。
次は、Liquidのフィルターや条件分岐構文を試して、さらに柔軟なテンプレートを作ってみましょう！