ブラウザ開発ツールでCSSをデバッグする方法

CSSはプログラミング言語ではありません。 しかし、あなたが尋ねる人に応じて、良いCSSを書くことは、JavaやJavaScriptのようなプログラミング言語で書くのと同じくらい難しいことがあります。

この記事では、CSSの問題をデバッグして解決する方法をいくつか紹介したいと思います。 優れたweb開発者として、ブラウザ開発者ツール(Google Chromeなど)に精通している必要があるため、それらを使用します。

ワイヤフレームモード

レイアウトの問題に苦労していますか? たぶん、より多くのワイヤーフレームのような外観は、あなたのレイアウトをよりよく理解するのに役立ちます。 次のCSSルールは、すべての要素に黒の背景、緑のテキストの色、赤の境界線を持たせます。 スタイルシートにルールを追加するか、ブラウザに直接追加することができます。 ユースケースに応じて、このルールを改善することもできます。 本番環境でこれを無効にすることを忘れないでください!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

計算されたスタイルプロパティ

いくつかのブラウザ開発ツール(例えば Chrome開発者ツール)は、特定の要素に適用されるスタイルプロパティを表示するビューを提供します。 ここでは、それが設定されている各スタイルプロパティについても見ることができます。

ブラウザーでCSSクエリを直接テストする

スタイルをインライン化しない限り、有効なCSS宣言ブロックを作成する必要があります。 時には、CSSセレクタの読み書きが複雑になることがあります。 CSSセレクタが正しく動作するかどうかを確認する簡単な方法は、ブラウザ開発ツールで直接検索することです。 テキストセレクタとCSSセレクタの両方を探すことができます。

要素の状態を切り替える

入力フィールドのような特定の要素は、フォーカスされたときにスタイル設定されます。 ボタンのような他の要素は、あなたがそれらの上にマウスを置いたときに反応します。 ほとんどのブラウザ開発ツールでは、フォーカスやホバーなどの要素の状態を切り替えることができます。 しかし、DOMリスナーがこのイベントをリッスンしている場合、要素の状態を切り替えると、通常、このリスナーによって登録されるイベントはスローされま

結論

コメントを残す

メールアドレスが公開されることはありません。