CSSが意図した通りに反映されない場合、以下のチェックポイントを順番に確認してください。
チェック① 記述ミスがないか確認する
CSSが効かない原因で最も多いのが、単純な記述ミスです。以下の点を確認してください。
よくある記述ミスの例
| よくあるミス | 正しい書き方 | 誤った書き方 |
|---|---|---|
| 全角スペース・全角コロン | color: red; |
color：red；（全角） |
| セレクタのスペルミス | .main-banner |
.mainbanner（ハイフン抜け） |
| 閉じ括弧の忘れ | { color: red; } |
{ color: red;（} 忘れ） |
| セミコロンの抜け | color: red; |
color: red（; 忘れ） |
CSSは1箇所でも記述ミスがあると、それ以降のスタイルがまとめて効かなくなる場合があります。
チェック② セレクタがHTML構造と合っているか確認する
書いたCSSのセレクタ（.クラス名や#ID名）が、実際のHTML内の要素と一致しているか確認してください。
確認方法：ブラウザの「検証」ツールを使う
- 該当のページをブラウザで開く
- スタイルを変えたい要素を右クリック →「検証」または「要素を検証」をクリック
- 表示されたHTMLの
class="〇〇"やid="〇〇"の値が、自分のCSSのセレクタと一致しているか確認する
例えば、HTMLが <div class="top-banner"> であれば、
CSSのセレクタは .top-banner と書く必要があります。.topbanner や .Top-Banner では一致しないため効きません（大文字・小文字も区別されます）。
チェック③ CSSの優先順位（詳細度）に負けていないか確認する
同じ要素に対して複数のCSSが当たっている場合、より「詳しく」指定している方が優先されます。
これを「詳細度（specificity）」といいます。
詳細度の強さの順番（強い順）
!important 付きの指定
↓
style属性（HTMLに直接書いたスタイル）
↓
IDセレクタ 例）#header { }
↓
クラス・属性セレクタ 例）.banner { }
↓
要素セレクタ 例）div { } / p { }テンプレートのCSSに負けている場合の対処法
テンプレートの初期CSSよりも詳細度が高い指定に書き換えるか、!important を使って上書きします。
/* テンプレートの指定に負けている場合の例 */
.top-banner img {
width: 100% !important;
}ただし !important の多用はCSS全体が管理しにくくなるため、まずは詳細度を上げる方法を試してください。
チェック④ 書いた場所（CSS欄）が正しいか確認する
クリエイターモードにはCSSを書く場所が複数あります。書いた場所と、スタイルを当てたいページが合っているか確認してください。
| 書いた場所 | 効くページ |
|---|---|
| 全ページ共通CSS | クリエイターモードで編集可能なすべてのページ |
| トップページのCSS欄 | トップページのみ |
| 商品詳細ページのCSS欄 | 商品詳細ページのみ |
| 買い物カゴページのCSS欄 | 買い物カゴページのみ |
→ 詳しくは「【クリエイターモード】全ページ共通「CSS」欄と各ページの「CSS」欄の違いは何ですか？」をご参照ください。
◆フリーページにCSSが反映されない場合は別途対応が必要です
フリーページは通常のショップページと異なり、デフォルトではCSSが読み込まれない仕様のため、全ページ共通CSSに記述していても反映されません。フリーページにCSSを適用させるには、フリーページの<head>～</head>内に以下のいずれかを記述してください。
全ページ共通「CSS」欄の内容を読み込む場合：
<link rel="stylesheet" href="<{$page.css}>">外部CSSファイルを読み込む場合（ファイルサーバーにアップロードしたCSSファイルを指定）：
<link rel="stylesheet" href="https://gigaplus.makeshop.jp/[ショップID]/フォルダ名/○○.css">
→ 詳しくは「【クリエイターモード】フリーページにもCSSを適用させることはできますか。」をご参照ください。
チェック⑤ ブラウザのキャッシュをクリアする
CSSを保存・公開済みにもかかわらずブラウザに変更が反映されない場合は、ブラウザのキャッシュ（一時保存データ）が影響している可能性があります。
以下の操作でキャッシュをクリアして、再度確認してください。
-
Windows：
Ctrl + Shift + R（強制リロード） -
Mac：
Cmd + Shift + R（強制リロード） - または、ブラウザの設定からキャッシュを削除する
スマホ実機でご確認の場合は、以下をご参照ください。
- iPhone（Safari）： iPhoneでSafariの閲覧履歴、キャッシュ、Cookieを消去する - Apple サポート (日本)
- Android（Chrome）： キャッシュと Cookie の削除 - Google アカウント ヘルプ
※上記のページはmakeshopのサービスとは関係がございません。また、Cookieを削除されますとブラウザに保存されたパスワードが消える場合がございますのでご注意ください。
チェック⑥ プレビューではなく「公開済み」の画面で確認する
クリエイターモードの編集画面内のプレビューと、実際にショップを公開した状態では表示が異なる場合があります。保存・公開後に実際のショップURLを別タブで開いて確認してください。
それでも解決しない場合
ブラウザの「検証」ツールを使うと、どのCSSが実際に適用されているか・どの指定が上書きされているかを直接確認できます。取消線が引かれているスタイルは「他のCSSに負けて無効になっている」状態です。
その場合は、取消線が引かれていない（実際に適用されている）CSSのセレクタを確認し、それよりも詳細度の高いセレクタで上書きするか、!important を付けて優先させてください。
（!important の使いすぎには注意が必要です。詳しくはチェック③をご参照ください）
関連記事