Troubleshooting CSS

カスタムCSSをフォームに作成したのに、サイトを表示したときにそのスタイルが表示されないということはありませんか？CSSがサイトに正しく表示されない原因となる一般的な問題がいくつかあります。

このチュートリアルでは、CSSが機能しない理由をトラブルシューティングするオプションと、可能な解決策をいくつかご紹介します。

この記事の内容

ブラウザキャッシュ
無効なCSSフォーマット
CSSの優先度

注意：フォームのスタイル設定にカスタムCSSを使用したくない場合は、ブロックエディターでフォームをスタイル設定する方法を学ぶために、フォームのスタイル設定チュートリアルをご覧ください。

ブラウザキャッシュ

ブラウザは、読み込み速度を向上させるために、訪問したウェブサイトのリソースをキャッシュ（一時保存）することがよくあります。一部のサイトでは、追加のキャッシュのためにプラグインを使用することもあります。カスタムスタイルがサイトに表示されない場合、ブラウザやその他のシステムが古いバージョンのサイトをキャッシュしていることが原因であることがよくあります。

ここでは、サイトとプラグインのキャッシュをクリアするための主な手順を説明するチュートリアルをご紹介します。

ブラウザキャッシュのクリアがうまくいかない場合は、次の追加戦略をいくつか試してみてください。

別のブラウザを試す

各ブラウザは、訪問したサイトのキャッシュを保持します。サイトを別のブラウザ（またはChromeのシークレットウィンドウなど、一部のブラウザで提供されているプライベートモード）で開くことで、キャッシュされていないバージョンのサイトを表示できることがよくあります。

ホスティング会社にキャッシュがあるか尋ねる

一部のホスティング会社は、サイトのファイルが保存されているサーバー上で直接サイトのキャッシュを提供しています。不明な場合は、ホスティング会社に連絡して、サイトをキャッシュしているかどうかを尋ね、キャッシュしている場合は、キャッシュをクリアするように依頼してください。

別のインターネットソースを試す

場合によっては、別のインターネットソースでサイトを読み込むだけで、既存のキャッシュをバイパスできることがあります。モバイルデバイスで利用可能なデータがある場合、最も簡単な方法は、デバイスのWiFiを一時的にオフにしてページを再読み込みすることです。

無効なCSSフォーマット

ブラウザがCSSを理解するには、特定のフォーマットで記述する必要があります。CSSが有効かどうかを確認するためのオンラインツールは多数あり、W3SchoolのCSSバリデーターもその一つです。カスタム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のこのチュートリアルをご覧ください。

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のフォームフィールドセレクターとそのデフォルトスタイルのリストをご覧ください。

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ルールを追加することもできます。このCSSスニペットのように。

.wpforms-required-label {
    color: #007acc !important;
}

青いアスタリスク付きのフォーム

!importantルールが機能するかどうかを知るのは難しい場合があるため、試してみてテストする必要があるでしょう。

これで完了です！CSSが機能しない場合の最も一般的なトラブルシューティング戦略をすべて確認しました。WPFormsのスタイル設定で引き続き問題が発生している場合は、サポートにお問い合わせください。お手伝いさせていただきます。

次に、フォームをさらにカスタマイズしますか？詳細と例については、個々のフォームフィールドをカスタマイズする方法に関するチュートリアルをご覧ください。

CSSのトラブルシューティング

AI要約