1. ホーム
  2. コラム
  3. Chromeのデベロッパーツールについて(CSSデバッグ編)

Chromeのデベロッパーツールについて(CSSデバッグ編)

みなさま、ブラウザはふだん何を使っていますか?
僕は主にChromeを使用しています。
そこでこのコラムでは、ウェブ開発には欠かせないデベロッパーツールについてご紹介したいと思います。

1.CSSの編集、CSSファイルの表示

編集したい箇所をダブルクリックで、class名、cssプロパティなどを変更できます。

①:class名、②:メディアクエリ、③:cssプロパティの箇所が編集可能。
④の箇所は適用されてるcssファイルと該当の行番号が表示されており、右クリック > open in new tabでcssファイルを表示できます。

2.カラープロパティのフォーマットを変更

cssのカラープロパティは16進数やrgba方式など様々なものがありますが、プロパティの横にある■をshiftを押しながらクリックすると、別フォーマットに変更できます。

3.カラーパレットによる色の変更

プロパティの横にある■をクリックするとカラーパレットが表示され、色、透過値の調整、ができます。(下記画像参照、画像上部の赤字部分の色が変わります)
また、左にあるスポイトでページ上の色からカラーコードを抽出し、真ん中の丸い部分をクリックするとカラーコードをクリップボードにコピーできます。

4.cssが適用されているhtml要素の調査

cssセレクタにカーソルを合わせると、そのcssが適用されている箇所がページ上でハイライトされます。(下記画像参照)

5.cssの変更履歴を調べる方法

デベロッパーツールでcssの変更を繰り返すと、ユーザの変更内容と変更前の記述が混在し、編集した部分が分からなくなることがあります。
しかし、デベロッパーツールはユーザの変更履歴を保存しているため、あとで変更内容を追跡できます。
※下記画像は手順1を飛ばしてます。

  1. 履歴を追跡したい要素を選択する
  2. Stylesパネルに表示されてるcssファイル名の部分をクリックする
  3. Sourcesパネルに移動するので、ソースコードが表示されてる部分で右クリック > Local Modificationsを選択
  4. Changesパネルが開き、変更、削除した記述が赤く、追加した記述が緑色に表示されます。

6.擬似classのスタイルを確認

擬似クラス(hover/focus)の動作を再現・確認するため、要素の状態を強制的に変更することができます。
例えば、画像右上の「:hov」をクリックすると下に「Force element state」という一覧が表示され、確認したい状態のステータスにチェックを入れると、ページ内の要素、cssが指定の状態に置き換わります。

7.html要素に適用されているclassの追加、無効化

選択した要素に対して、classの追加、無効化が可能です。

  • 追加

    1. 画像赤枠部分の「.cls」をクリック
    2. 画像青枠部分のテキストボックスに追加したいclass名を入力し、キーボードのEnterキーを押す
    3. 選択した要素に入力した要素が追加される
  • 追加

    1. 画像赤枠部分の「.cls」をクリック
    2. 画像緑枠部分のチェックボックスを外す
    3. チェックボックスを外したclassが選択した要素から削除される

まとめ

このコラムで紹介したデベロッパーツールの機能はごく一部です。
ほかにもウェブ開発に有用な機能がたくさんありますので、みなさまもぜひ活用してみてください。

コラム執筆者

細川 太輔

BU4-AS11所属
好きなcssプロパティはborder-radiusです。


カテゴリ: Webサイト構築
2018年11月19日

RSS