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 の使いすぎには注意が必要です。詳しくはチェック③をご参照ください)
関連記事


