4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-10-27

#概要
自分で作った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

4
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?