Help us understand the problem. What is going on with this article?

ChromeのデベロッパーツールでCSSのソースを追うメモ

More than 3 years have passed since last update.

概要

自分で作ったCSSならまだしも、他人の(今回はWordPressの任意のテーマの)CSSを追うこともある。
そのときの修正箇所を見つけやすくするためのメモ。
これに気づくまではソース直追いしてたんだ... つら。

行動開始

余計なエリアを「詰めたい」

どうするか??この時点で修正すべきWebページが初見でも大丈夫だ。
image

デベロッパーツールの起動

右クリックで「検証」
image

編集したいエリアをざっと探す

デベロッパーツールが起動するので、ソースを追って編集したいエリアのあたりを探し当てると、なにやら3つにカラーリングされた。
image

編集したいエリアの名前が判明

編集したいエリアをポイントすると緑のエリアは「padding」である、ということがわかった。
「Computed」タブ(タブの名前書いてないけどpaddingだと突き詰めた絵が描いてある場所がComputedタブです)で padding がつくようなところの数字(今回はpadding-topの 4% のやつ)の右のリンクをクリックするとソースに飛べる。
image

値の一時的な増減もできる

なお、「Computed」タブの「4%」のところをクリックすると「Styles」タブの「4%」のところが黄色になって、さらに「Styles」タブの「4%」のところをクリックすると「↑」「↓」で値が変わるので上下してみて、より詳細に場所を突き詰めることもできる。
そして、「Styles」タブでもすぐ横にソースへのリンクがあるので click!
image

ソースの位置が判明

リンクをクリックすると、「Sources」タブに勝手に移って、ソースの場所へ行ってくれる。
同じ要領で好きなだけ編集してくれ。もう何千行ものCSSソースがあっても大丈夫だ!
image

おまけ

WordPressはタブレット用、とかiPhone用、とかのCSSも書いてあるので、切り替えて表示をチェックできる!
image

YoshitakaOkada
フリーランスになってよ(自衛隊→IT(銀行, 証券)+DJ+居酒屋+運送仕分け→旅館+農業→IT(重工業, Web広告))。IT技術の社会実装研究を起点に第一次産業への興味へ派生しています。最近はpython×株にお熱。かなり雑多にアウトプットしますが、じつは最終的にひとつのゴールに向かっています。
https://www.henojiya.net/
veterans
退職予定自衛官、元自衛官のキャリア支援や社会的価値向上に繋げる活動を行うコミュニティです。民間企業で活躍する自衛官OB、今後民間企業に再就職予定自衛官、自衛隊入隊を希望する方々の情報交換の場を作り、自衛隊を起点とした人々が活躍できるキャリア形成に関与して参ります。
https://veteranschannel.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away