members

members

Chromeのデべロッパーツールについて(スタイルの操作編)

Tweet

 

前回に引き続き、Chromeのデベロッパーツールの便利な機能をご紹介していきます。
前回の記事はこちら

1.要素のスタイルコピー

要素に適用されているスタイルを一括でコピーできる機能です。(Chrome77で追加された新機能)。

CSSは複数のセレクタに分かれて指定されている ことがありますが、この機能は、スタイルの継承関係を解決し、最終的にDOMへ適用されているCSSプロパティとその値を一括コピーします。

  1. ElementsパネルのDOMツリーからノード(要素)を選択し、右クリック
  2. Copy > Copy Stylesを選択
  3. 選択した要素のスタイルがクリップボードにコピーされます。

2.プロパティ追加のショートカット

特定のCSSプロパティを簡単に追加することができます。

デベロッパーツールのStylesパネルの余白にカーソルを合わせると、プロパティのショートカットメニューが表示されます。
左から

  • test-shadow
  • box-shadow
  • color
  • background-color

が設定できます。

下記画像のように、変更された状態をプレビューしながら調整できます。

3.要素を非表示にするショートカット

Elementsパネルで要素を選択し、キーボードの「H」キーを押すだけで要素を表示/非表示を切り替えられます。
要素は不可視(visibility: hidden!important)となるため、後続の要素が詰まるなど、 レイアウトが変わることはありません。

4.CSSのスタイルを検索する

StylesタブにあるFilter機能を使えば、選択した要素に適用されているスタイルを 検索できます。
Stylesタブのテキストボックスに検索キーワードを入力します。

例:classを検索した場合

例:プロパティを検索した場合

5.選択したノードにジャンプする

Elementsパネルで選択したノードまでジャンプ(移動)することができます。

  1. Elementsパネルでノードを選択する
  2. 右クリック > 「Scroll into view」

まとめ

今回はスタイルの操作に関わる機能を中心にご紹介しました。もちろん、デベロッパーツールには開発の手助けとなる機能が他にもたくさんあります。

はじめに紹介した”要素のコピー”機能のように 、Chromeのアップデートによってどんどん新しい機能も追加されています。

よく使う機能はもちろん、他に便利な機能を探してぜひ活用してみましょう。きっと、開発がさらに捗るようになりますよ。特に、Chromeの更新で追加される新機能には注目です!

コラム執筆者

細川 太輔

BU4-AS11所属
ガス溶接の資格を持っていますが、役にたったことはありません。

Web担当者向け資料

デジタルトレンド2019年~海外の有力メディア・企業から抜粋~

デジタルトレンド~海外の有力メディア・企業から抜粋~

海外の有力メディア・企業からトレンド予測を抜粋しました。

資料ダウンロード

カテゴリ: Webサイト
2019年09月26日