### [CSSのトラブルシューティング](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/) **公開日:** 2023年11月23日 **著者:** Umair Majeed **抜粋:** フォームのCSSの問題を修正して、正しく表示されるようにする方法を学びましょう。 **コンテンツ:** フォームにカスタムCSSを作成しましたが、サイトを表示したときにそのスタイルが表示されないということはありませんか？ CSSがサイトに正しく表示されない原因となる一般的な問題がいくつかあります。 このチュートリアルでは、CSSが機能しない理由をトラブルシューティングするためのオプションを検討し、可能な解決策を提供します。 --- **注意:** フォームのスタイル設定にカスタムCSSを使用したくない場合は、[フォームのスタイル設定](https://wpforms.com/docs/styling-your-forms/)チュートリアルを確認して、ブロックエディターでフォームをスタイル設定する方法を学ぶことを検討してください。 ### ブラウザキャッシュ ブラウザは、読み込み速度を向上させるために、アクセスしたWebサイトのリソースをキャッシュまたは一時的に保存することがよくあります。一部のサイトでは、追加のキャッシュのためにプラグインを使用することもあります。カスタムスタイルがサイトに表示されない場合、多くの場合、ブラウザまたは他のシステムがサイトの古いバージョンをキャッシュしていることが原因です。 [サイトとプラグインのキャッシュをクリアする方法](http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/ "WordPressでキャッシュをクリアする方法")を説明するチュートリアルを次に示します。 ブラウザキャッシュのクリアで問題が解決しない場合は、次の追加戦略を試してみてください。 #### 別のブラウザを試す 各ブラウザは、アクセスしたサイトのキャッシュを保持します。サイトを別のブラウザ（またはChromeのシークレットウィンドウなど、一部のブラウザで提供されているプライベートモード）で開くことで、キャッシュされていないサイトのバージョンを確認できることがよくあります。 #### ホストにキャッシュがあるか確認する 一部のホストは、サイトのファイルが保存されているサーバー上で直接サイトのキャッシュを提供しています。不明な場合は、ホストに問い合わせて、サイトをキャッシュしているかどうかを確認し、キャッシュしている場合は、キャッシュをクリアするように依頼することをお勧めします。 #### 別のインターネットソースを試す 場合によっては、別のインターネットソースでサイトを読み込むだけで、既存のキャッシュをバイパスできることがあります。利用可能なデータを持つモバイルデバイスがある場合、最も簡単な方法は、デバイスのWiFiを一時的にオフにしてページを再読み込みすることです。 ### 無効なCSS形式 ブラウザが理解できるように、CSSは特定の形式で記述する必要があります。CSSが無効かどうかを確認するためのオンラインツールは多数ありますが、[W3SchoolのCSSバリデーター](http://validator.w3.org/ "W3Cマークアップ検証サービス")もその一つです。カスタムCSSが多く、CSS作成の経験が少しでもある場合は、これが優れた選択肢です。 ただし、少量のCSSしか使用していない場合は、自分で簡単な形式チェックを行う方が簡単な場合があります。有効なCSSのスニペットを見てみましょう。 ``` div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; margin: 0 0 10px 0; } ``` このCSSが有効またはブラウザで「読み取り可能」である理由は次のとおりです。 - **正しいセレクター形式:** セレクターに複数の部分が含まれている場合は、「最大」から「最小」の順に記述する必要があります。上記の例では、`div.wpforms-container-full`がHTML内の最大のコンテナ要素であり、`.wpforms-form`はそのコンテナ内にあります。セレクターの最後の最小のアイテムである`.wpforms-title`は、これら2つの他の要素の両方の中に含まれています。それ以外の順序では、ブラウザはこのセレクターを読み取ることができません。 - **2つの括弧:** CSSセレクターの直後と、プロパティと値のリストの末尾に、それぞれ開き中括弧（{）と閉じ中括弧（}）が必要です。閉じ括弧（}）を忘れるのはよくある間違いであり、通常はそれ以降のすべてのCSSがブラウザに表示されなくなります。 - **コロンとセミコロン:** 各CSSプロパティと値の間にコロン（:）、各値の後にセミコロン（;）を必ず含めてください。これにより、ブラウザはCSSを読み取ることができます（例: `font-size: 26px;`）。 - **空白文字の正しい使用:** ほとんどの場合、CSSは空白文字（タブやスペースを含む）にそれほど厳密ではありません。ただし、単位に関しては例外です。たとえば、`26px`は機能しますが、`26 px`は機能しません。 適切な構文でCSSを記述する方法の詳細については、[W3Schoolsのこのチュートリアル](https://www.w3schools.com/css/css_syntax.asp "CSS構文")を参照してください。 ### CSSの特異性 すべてのテーマとほとんどのプラグインには独自のスタイルセットが含まれているため、カスタムスタイルが既存のスタイルと「競合」することがよくあります。このような状況では、より特異性の高いCSSセレクターが、特異性の低いセレクターよりもほぼ常に優先されます。 たとえば、WPFormsのフォームタイトルのフォントサイズを設定するデフォルトのCSSを次に示します。 ``` div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; } ``` フォントを大きくするために、このCSSをオーバーライドしてみましょう。次のような短いCSSセレクターを使用すると魅力的かもしれません。 ``` .wpforms-title { font-size: 40px; } ``` このCSSは有効ですが、ブラウザではスタイルが適用されません。デフォルトのスタイルの方が特異性の高いセレクターを持っているため、代わりにデフォルトのスタイルが適用されます。代わりに、カスタムCSSでデフォルトスタイルと同じ、より長いセレクターを使用する必要があります。 ``` div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 40px; } ``` **注意:** セレクターの詳細については、[WPFormsフォームフィールドセレクターとそのデフォルトスタイルのリスト](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "個々のフォームフィールドのスタイルをカスタマイズする方法")を参照してください。 #### CSSでの!importantの使用 状況によっては、セミコロンの前に`!important`ルールを含めることで、特異性の低いCSSスニペットを強制的に機能させることができます。常にまず特異性の高いセレクター（上記のように）を試す方が良いですが、場合によってはこれが簡単な修正となることがあります。 ただし、`!important`ルールを追加しても常に機能するとは限らないことに注意することが重要です。前の例で説明したCSSでこのアプローチを試してみましょう。 ``` .wpforms-title { font-size: 40px !important; } ``` この状況では、ブラウザは`!important`ルールよりもデフォルトのCSSの特異性を優先するため、このCSSはサイトに適用されません。 `!important`ルールが機能する例を見てみましょう。デフォルトでは、WPFormsで「必須」フィールドを示すアスタリスク（\*）は赤色になります。  このスタイルを作成するCSSは次のとおりです（`#ff0000`は赤色の16進コードです）。 ``` div.wpforms-container-full .wpforms-form .wpforms-required-label { color: #ff0000; } ``` これらのアスタリスクを代わりに青色にしたいと考えています。上記のCSSから完全なセレクターをコピーすることもできますが、次のような短いセレクターを使用して`!important`ルールを追加することもできます。 ``` .wpforms-required-label { color: #007acc !important; } ```  `!important`ルールが機能するかどうかを知るのは難しい場合があるため、試してテストする必要があるでしょう。 これで完了です！ CSSが機能しない場合に使用する最も一般的なトラブルシューティング戦略をカバーしました。WPFormsのスタイル設定でまだ問題が発生している場合は、[サポートにお問い合わせください](https://wpforms.com/contact/ "WPFormsお問い合わせページ")。お手伝いさせていただきます。 次に、フォームをさらにカスタマイズしますか？ 詳細と例については、[個々のフォームフィールドのカスタマイズに関するチュートリアル](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "個々のフォームフィールドのスタイルをカスタマイズする方法")を確認してください。 **カテゴリ:** スタイリング、スタイリングとカスタマイズ、トラブルシューティング ---