HTMLが意図した通りに反映されない場合、以下のチェックポイントを順番に確認してください。
チェック① タグの閉じ忘れ・記述ミスがないか確認する
HTMLが崩れる原因で最も多いのが、タグの閉じ忘れや記述ミスです。
1箇所でも閉じタグが欠けていると、それ以降の構造がすべて崩れてしまう場合があります。
| よくあるミス | 正しい書き方 | 誤った書き方 |
|---|---|---|
| 閉じタグの忘れ | <div>〇〇</div> |
<div>〇〇（</div> 忘れ） |
| 全角文字の混入 | <p class="title"> |
＜p class="title"＞（全角の山括弧） |
| 属性値のクォート忘れ・不一致 | class="title" |
class=title / class='title"（クォート不一致） |
| タグ名のスペルミス | <section> |
<secion> |
◆商品詳細ページで商品ごとに表示が崩れる・変わる場合
商品詳細ページのテンプレート（HTML欄）は全商品共通です。特定の商品だけ表示が崩れる・内容が変わる場合は、商品説明・商品説明2・商品説明3・商品説明4のHTML記述で、タグの閉じ忘れなどが影響している可能性があります。
その場合は、商品ごとの記述を確認してください。
■ 商品説明（商品説明・商品説明2〜4）の編集場所
各商品の商品説明は、以下のメニューから商品ごとに編集できます。特定の商品だけ表示が崩れる場合は、この画面で該当商品の記述を確認してください。
商品管理 / 商品一覧 / 商品登録・編集
「基本情報」内の商品説明／商品説明2／商品説明3／商品説明4
クリエイターモードでは、各欄が下記の変数タグに対応しています。
デバッグで削除するタグと、実際に編集する欄の対応は以下のとおりです。
| 編集する欄（基本情報） | 対応する変数タグ |
|---|---|
| 商品説明 | <{$item.description}> |
| 商品説明2 | <{$item.description2}> |
| 商品説明3 | <{$item.description3}> |
| 商品説明4 | <{$item.description4}> |
簡易なデバッグ方法として、商品詳細ページの「HTML」欄に記述されている
<{$item.description}>
<{$item.description2}>
<{$item.description3}>
<{$item.description4}>のタグを順繰りに削除してプレビューすることで、どの箇所（どの商品説明欄）が影響しているかを判断できます。
プレビューページでは特定の商品をプレビューすることもできるため、原因の特定にご活用ください。
【クリエイターモード】ショップデザインの編集中に特定のカテゴリーや商品ページをプレビューする方法を教えて下さい。
※タグの削除はデバッグ（原因の特定）のための一時的な操作です。確認後は削除したタグを元に戻してください。作業前にデザインセットのバックアップを取得しておくことをおすすめします。
よくある質問：【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。
チェック② 変数タグの記述が正しいか確認する
クリエイターモードの変数タグ（<{ }>で囲まれた記述）は、通常のHTMLタグとは別に、以下の点を確認してください。
| よくあるミス | 正しい書き方 | 誤った書き方 |
|---|---|---|
| if文の閉じ忘れ | <{if 〇〇}>〜<{/if}> |
<{if 〇〇}>〜（<{/if}> 忘れ） |
| section（ループ）の閉じ忘れ | <{section name=i loop=〇〇}>〜<{/section}> |
<{section name=i loop=〇〇}>〜（<{/section}> 忘れ） |
| 変数タグのスペルミス・大文字小文字 | <{$item.name}> |
<{$Item.Name}> |
※モジュール内でモジュールタグ（
<{$module.〇〇}>）を使用することはできません。
チェック③ 書いた場所（HTML欄）が正しいか確認する
クリエイターモードにはHTMLを書く場所が複数あります。書いた場所と、反映させたいページが合っているか確認してください。
| 書いた場所 | 効くページ |
|---|---|
| トップページのHTML欄 | トップページのみ |
| 商品詳細ページのHTML欄 | 商品詳細ページのみ |
| 商品カテゴリーのHTML欄 | 商品カテゴリーページのみ |
| モジュール | そのモジュールタグを呼び出しているページのみ |
チェック④ HTMLの構造・クラス名がテンプレートの想定と合っているか確認する
テンプレートのCSSやJavaScriptは、特定のクラス名やHTML構造に対して動作するよう作られています。独自にdivタグを追加・削除したり、既存のクラス名を変更・重複させたりすると、CSSが効かなくなったり、JavaScriptによる表示切り替え（スライダーやモーダルなど）が正しく動作しなくなる場合があります。
記述を変更する際は、既存のクラス名や入れ子構造をできるだけ保ったまま、必要な箇所だけを追記・修正するようにしてください。
チェック⑤ ブラウザのキャッシュをクリアする
HTMLを保存・公開済みにもかかわらずブラウザに変更が反映されない場合は、ブラウザのキャッシュ（一時保存データ）が影響している可能性があります。
以下の操作でキャッシュをクリアして、再度確認してください。
- Windows：
Ctrl + Shift + R（強制リロード） - Mac：
Cmd + Shift + R（強制リロード） - または、ブラウザの設定からキャッシュを削除する
チェック⑥ プレビューではなく「公開済み」の画面で確認する
クリエイターモードの編集画面内のプレビューと、実際にショップを公開した状態では表示が異なる場合があります。保存・公開後に実際のショップURLを別タブで開いて確認してください。
それでも解決しない場合
ブラウザの「検証」ツールを使うと、実際に読み込まれているHTMLの構造を直接確認できます。想定しているタグや変数タグの出力結果が正しく反映されているか、閉じタグの過不足がないかをあわせてご確認ください。
関連記事
【クリエイターモード】CSSを書いたのに反映されない、意図した通りにならない場合のチェックポイントを教えてください。
【クリエイターモード】全ページ共通「CSS」欄と各ページの「CSS」欄の違いは何ですか？
どの要素にどのCSSが適用されているの？ブラウザ上でカンタンに確認する方法 （makeshopサポート）