CSS のデバッグ

CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。セレクターは合っているはずなのに何も起こらなかったり、ボックスのサイズが期待したどおりにならなかったりなどです。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに各モダンブラウザーのデベロッパーツールはどう役立つかを示します。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本(HTML 入門)および CSS に関するアイデア(CSS の第一歩)に関する基本的な知識を得ている。
目的: ブラウザーの開発ツールの基本と、 CSS の簡単な検査と編集の方法を学ぶ。

ブラウザーの開発ツールの使い方

ブラウザー開発者ツールとは」という記事は、さまざまなブラウザーやプラットフォームでツールにアクセスする方法を説明する最新のガイドです。ほとんどの場合、特定のブラウザーで開発することを選択し、そのブラウザーに含まれるツールに最も慣れ親しむことになるかもしれませんが、他のブラウザーでのアクセス方法を知っておく価値はあります。これは、複数のブラウザー間で異なるレンダリングが表示されている場合に役立ちます。

また、DevTools を作成するときに、ブラウザーがさまざまな領域に焦点を合わせていることもわかります。例えば、Firefox には、CSS レイアウトを視覚的に操作するための優れたツールがいくつかあり、グリッドレイアウトフレックスボックス、およびシェイプを検査および編集できます。ただし、ページ上の要素に適用されているプロパティや値を検査したり、エディタから変更を加えたりするためのツールなど、基本的なツールはすべての異なるブラウザーに共通しています。

このレッスンでは、CSS を操作するための Firefox DevTools の便利な機能をいくつか見ていきます。そのために、サンプルファイルを使用します。続けたい場合は、新しいタブでこれを読み込み、上のリンク先の記事で説明したように DevTools を開きます。

DOM とソース表示の違い

DevTools を初めて使用する人が困るのは、Web ページのソースを表示したとき、またはサーバーに配置した HTML ファイルを見たときに表示されるものと、DevTools の HTML ペインに表示されるものが異なることです。「ソースの表示」で表示されるものとほぼ同じように見えますが、いくつかの違いがあります。

レンダリングされた DOM では、ブラウザーはあなたのために書き方の悪い HTML を修正しているかもしれません。例えば <h2> を開いて <h3> で閉じるといったように、要素を誤って閉じてしまった場合、ブラウザーはあなたが何をしようとしていたのかを理解し、DOM の HTML は開いていた <h2> を正しく <h2> で閉じるようになります。ブラウザーはすべての HTML を正規化し、DOM は JavaScript によって行われた変更も表示します。

これと比較して、ソースの表示は、サーバーに保存されている HTML ソース コードにすぎません。DevTools の HTML ツリーには、ブラウザーが任意の時点でレンダリングしている内容が正確に表示されるため、実際に何が起こっているのかを知ることができます。

適用された CSS の調査

ページ上の要素を選択するには、右クリックまたは Ctrl キーを押しながらクリックして [検査] を選択するか、または DevTools ディスプレイの左側にある HTML ツリーから選択します。box1 のクラスを持つ要素を選択してみてください。これは、ページ上の最初の要素で、周囲に枠線で囲まれたボックスが描かれています。

DevToolsを開いたこのチュートリアルのサンプルページ。

HTML の右側にあるルールビューを見ると、その要素に適用されている CSS のプロパティと値を見ることができるはずです。box1 クラスに直接適用されているルールと、box の先祖から継承されている CSS、この場合は <body> に適用されている CSS が表示されています。これは、予想していなかった CSS が適用されている場合に便利です。おそらくそれは親要素から継承されているもので、この要素のコンテキストでそれを上書きするルールを追加する必要があるでしょう。

また、速記プロパティを展開する機能も便利です。この例では、margin の短縮形を使用しています。

小さな矢印をクリックしてビューを展開すると、さまざまなロングハンドプロパティとその値が表示されます。

パネルがアクティブになっているときは、ルールビューの値のオンオフを切り替えることができます。マウスをかざすとチェックボックスが表示されます。border-radius などのルールのチェックボックスのチェックを外すと、CSS は適用されなくなります。

これを使って A / B 比較を行い、ルールを適用した方が良く見えるかどうかを判断したり、デバッグの手助けをしたりすることができます。例えば、レイアウトがおかしくなり、どのプロパティが問題の原因になっているのかを調べたい場合などです。

値の変更

プロパティのオン/オフに加えて、それらの値を編集できます。おそらく、別の色の方が見栄えが良いかどうかを確認したい、または何かのサイズを微調整したいですか。 DevTools を使用すると、スタイルシートを編集してページを再ロードする時間を大幅に節約できます。

box1 を選択した状態で、境界線に適用された色を示すスウォッチ (小さな色付きの円) をクリックします。カラーピッカーが開き、いくつかの異なる色を試すことができます。同様の方法で、ボーダーの幅やスタイルを変更することができます。

カラーピッカーを開いたDevToolsスタイルパネル。

新しいプロパティの追加

DevTools を使ってプロパティを追加することができます。おそらく、<body> 要素のフォント サイズを継承せず、ボックスに独自のサイズを設定したいことに気がついたのではないでしょうか?これは、CSS ファイルに追加する前に DevTools で試すことができます。

ルールの閉じ中括弧をクリックすると、ルールへの新しい宣言の入力が開始され、その時点で新しいプロパティの入力を開始することができます。font-size を選択したら、試したい値を入力します。また、[+] ボタンをクリックして同じセレクタで追加ルールを追加し、そこに新しいルールを追加することもできます。

DevToolsパネル、新しいプロパティをルールに追加し、フォントのオートコンプリートを開く

メモ: ルールビューには他にも便利な機能があります。たとえば、無効な値の宣言には取り消し線が引かれています。詳しくは、CSS の確認と編集をご覧ください。

ボックスモデルについて

前のレッスンでは、ボックスモデルについて説明しまし。また、指定したサイズに基づいて要素のサイズの計算方法を変更する代替のボックスモデルと、パディングおよび境界線があることを説明しました。DevTools は、要素のサイズの計算方法を理解するのに役立ちます。

レイアウトビューでは、選択した要素上のボックス・モデルのダイアグラムと、要素のレイアウト方法を変更するプロパティと値の説明が表示されます。これには、要素で明示的に使用していないが初期値が設定されているプロパティの説明も含まれます。

このパネルでは、詳細なプロパティの 1 つに box-sizing プロパティがあり、これは要素が使用するボックスモデルを制御します。

box1box2 のクラスを持つ 2 つのボックスを比較してみましょう。どちらも同じ幅 (400px) が適用されていますが、box1 の方が視覚的には広くなっています。レイアウトパネルを見ると、content-box を使用していることがわかります。これは、要素に与えたサイズを受け取り、パディングとボーダーの幅を追加する値です。

box2 のクラスを持つ要素は border-box を使用しているので、ここでは要素に与えたサイズからパディングとボーダーが差し引かれています。つまり、ページ上でボックスが占めるスペースは、あなたが指定したサイズ(この例では width: 400px)と同じになります。

DevToolsのレイアウトセクション

メモ: 詳細については、ボックスモデルの調査と検査をご覧ください。

詳細度に関する問題の解決

開発中に、特に既存のサイトの CSS を編集する必要があるときに、いくつかの CSS を適用させるのに苦労することがあります。何をしても要素が CSS を適用してくれないのです。このような場合、一般的には、より具体的なセレクタが変更を上書きしていることが考えられますが、ここでは DevTools を使用することで解決することができます。

この例のファイルでは、<em> 要素に包まれた 2 つの単語があります。1 つはオレンジ色で、もう 1 つはホットピンク色で表示されています。CSS では、以下のようにしています。

css
em {
  color: hotpink;
  font-weight: bold;
}

しかし、スタイルシートの上には .special セレクタ―を持つルールがあります。

css
.special {
  color: orange;
}

カスケードと継承のレッスンで特異性について説明したことを思い出していただけると思いますが、クラス セレクタは要素セレクタよりも特異性が高いため、この値が適用されます。特に情報が巨大なスタイルシートのどこかに埋もれている場合は、DevTools を使用することで、このような問題を見つけることができます。

.special のクラスを持つ <em> を検査すると、DevTools がオレンジ色が適用されていることを示し、また、em に適用されている color プロパティが取り消されていることを示しています。これで、クラスが要素セレクタをオーバーライドしていることがわかります。

emを選択し、DevToolsを見て、何が色を上書きしているかを確認します。

Firefox の開発ツールについて

MDN には、Firefox DevTools に関する多くの情報があります。DevToolsのメインセクションをご覧くださいこのレッスンで簡単に説明した内容の詳細については、ハウツーガイドをご覧ください。

CSS 不具合のデバッグ

CSS の問題を解決する場合、DevTools は非常に役立ちます。CSS が期待どおりに動作しない状況に陥った場合、どのように解決すればよいでしょうか。次の手順が役立ちます。

問題から一歩離れてみる

コーディングの問題はどんなものでもイライラすることがありますが、特に CSS の問題は、解決策を見つけるのに役立つようなエラーメッセージをオンラインで検索しても出てこないことが多いので、イライラします。イライラしてきたら、しばらく問題から離れてみましょう。散歩に行ったり、飲み物を飲んだり、同僚とおしゃべりしたり、しばらく他のことに取り組んでみましょう。問題を考えるのをやめれば、魔法のように解決策が現れることもありますし、そうでなくても、スッキリした気分の時に取り組むと、ずっと楽になります。

HTML と CSS が正しく記述されていますか?

ブラウザーは CSS と HTML が正しく記述されていることを期待しますが、ブラウザーは非常に寛容であり、マークアップまたはスタイルシートにエラーがある場合でも、最善を尽くして Web ページを表示します。コードに誤りがある場合、ブラウザーはあなたが何を意味するのかを推測する必要があり、それはあなたが考えていたものとは異なる決定をするかもしれません。さらに、2 つの異なるブラウザーが 2 つの異なる方法で問題に対処する場合があります。したがって、適切な最初のステップは、HTML および CSS をバリデーターで実行し、エラーを見つけて修正することです。

プロパティと値は対象ブラウザーでサポートされていますか?

ブラウザーは、理解できない CSS を単に無視します。使用しているプロパティまたは値が、テストしているブラウザーでサポートされていない場合、何も壊れませんが、その CSS は適用されません。DevTools は一般的に、サポートされていないプロパティと値を何らかの方法で強調表示します。下のスクリーンショットでは、ブラウザーは grid-template-columns のサブグリッド値をサポートしていません。

grid-template-columns:サブグリッド値がサポートされていないため、サブグリッドに線を引いたブラウザーDevToolsの画像。

また、MDN の各プロパティページの下部にあるブラウザーの互換性の表を見ることもできます。これらの表は、そのプロパティのブラウザーのサポート状況を示しており、そのプロパティの一部の使用法がサポートされていて、他の使用法がサポートされていない場合は分類されていることが多いです。以下の表は shape-outside プロパティの互換性データを示しています。

{{Compat}}

どこかで CSS が上書きされていませんか?

ここで、特異性について学んだ情報が非常に役に立つでしょう。自分が行おうとしていることをより具体的にオーバーライドしているものがある場合、何が何だかわからないという非常にイライラするゲームに突入してしまうことがあります。しかし、上記のように、DevTools を使用すると、どのような CSS が適用されているかが表示されるので、新しいセレクタをオーバーライドするのに十分なほど具体的なものにする方法を見つけることができます。

問題の縮小テストケースを作成する

上記の手順で問題が解決されない場合は、もう少し調査する必要があります。この時点での最善の方法は、縮小テストケースとして知られているものを作成することです。問題を減らす」ことができるということは、非常に有用なスキルです。自分のコードや同僚のコードの問題を見つけるのに役立ちますし、バグを報告したり、より効果的に助けを求めたりすることができるようになります。

縮小テストケースとは、関連のない周囲のコンテンツやスタイリングを削除して、可能な限りシンプルな方法で問題を示すコード例のことです。これは、問題のあるコードをレイアウトから取り出して、そのコードや機能だけを示す小さな例を作ることを意味することが多いでしょう。

縮小されたテストケースを作成するには:

  1. マークアップが動的に生成される場合—例えば、CMS を介して—問題を示す出力の静的バージョンを作成します。CodePenなどのコード共有サイトは、オンラインでアクセスでき、同僚と簡単に共有できるため、テストケースを減らすのに役立ちます。まず、ページで[ソースの表示]を実行し、HTML を CodePen にコピーしてから、関連する CSS と JavaScript を取得して、それも含めます。その後、問題がまだ明らかかどうかを確認できます。
  2. JavaScript を削除しても問題が解決しない場合は、JavaScript を含めないでください。JavaScript を削除ても問題が解決しない場合は、できるだけ多くの JavaScript を削除して、問題の原因はすべて残してください。
  3. 問題の原因となっていない HTML を削除します。コンポーネントまたはレイアウトの主要な要素を削除します。繰り返しになりますが、まだ問題を示している最小限のコードになるようにしてください。
  4. 問題に影響を与えない CSS をすべて削除します。

その過程で、何が問題を引き起こしているのかを発見したり、特定の何かを取り除くことで、 少なくとも問題のオン/オフを切り替えることができるようになるかもしれません。あなたが物事を発見したときに、あなたのコードにいくつかのコメントを追加する価値はあります。助けを求める必要がある場合は、それがあなたがすでに試したものを助けてくれる人に伝えてくれます。これにより、考えられる問題や回避策を検索するのに十分な情報が得られる場合があります。

問題を解決するのにまだ苦労している場合は、テストケースを減らすことで、フォーラムに投稿したり、同僚に見せたりして、助けを求めることができます。助けを求める前に、問題を軽減し、どこで問題が発生しているかを正確に特定する作業を行ったことを示すことができれば、助けを得る可能性が高くなります。経験豊富な開発者であれば、問題を迅速に発見して正しい方向に導くことができるかもしれませんが、そうでない場合でも、テストケースを縮小したことで、開発者はすばやく確認することができ、少なくとも何らかの助けを提供できるようになるでしょう。

問題が実際にブラウザーのバグである場合、テストケースの縮小を使用して、関連するブラウザーベンダーにバグレポートを提出することもできます(例:Mozilla のbugzilla サイト)。

CSS を使いこなせるようになると、問題を発見するのが早くなることに気づくでしょう。しかし、最も経験豊富な人でも、「一体何が起こっているのか」と疑問に思うことがあります。体系的なアプローチをとり、テストケースを減らし、他の人に問題を説明すると、通常、修正が見つかります。