CSSやHTMLを確認する方法。Chromeのデベロッパーツールを使ってみる。

f:id:mikanusagi:20180504150209p:plainテンプレートを使っていて、CSSをカスタマイズしたいとき。

     もとのCSSを上書きして、変更していきますので、、

     もとがどうなっているか調べなくてはいけません。

     簡単にCSSを見る方法を探していたら…

     Google Chrome デベロッパーツール

     使いやすいということを知りました。

     …え?常識なんですか? (゚-゚;) さっき知った (笑)。 

 

 

私は普段はEdgeだけど。

Chromeってかゆいところに手が届く仕様が多いですよね。

たまに使うのでパソコンにはダウンロード済み。

 

さっそく私のサブブログでやってみます。 

 

 

① Google Chromeでサイトを開く。

② サイトの適当な箇所で右クリック。
  一番下の「検証」を選択。

f:id:mikanusagi:20180505224353p:plain

 

 

③ そしたら、こんな画面が開きます。

f:id:mikanusagi:20180505224728p:plain

うちわけはこんな感じ。

f:id:mikanusagi:20180505224756p:plain

 

 

④ 要素を選択。

このHTML関連の左上に、矢印のついたマークがあるので、ここを選択すると…

「Select an element in the page to inspect it」

つまり、ページの要素を選択することができるようになります。

f:id:mikanusagi:20180505220837p:plain

たとえば、ここを選択します。

f:id:mikanusagi:20180505221511p:plain

すると該当するHTMLと (この場合、<p>Cascading....</p>)

f:id:mikanusagi:20180505222058p:plain

CSSの領域が選択されます。(この場合、p の設定)

f:id:mikanusagi:20180505222209p:plain

 

これで、CSSでどんな指示が出ているかわかるんですねぇ。

これに沿って、変更指示をだせば、元のものが上書きされる形で、

CSSを変更することができるんですね。 

 

 

⑤ 変更をプレビューしてみることもできる。

Chromeは、設定変更をプレビューできる機能付きです。

この見出しで試してみます。

f:id:mikanusagi:20180505225547p:plain

ちなみに、この見出しをCSSで選択すると、

こんな風に表示されます。

f:id:mikanusagi:20180505225637p:plain

▲▼ まわりの空白がどのように指定されているか分かります。

f:id:mikanusagi:20180505225738p:plain

さて…今回は、

paddingの10pxを変更してみます。

f:id:mikanusagi:20180505230339p:plain 

ここの部分ですね。

 

③のCSS関連のところに表示されているところで、

paddingの10pxを

f:id:mikanusagi:20180505230411p:plain

50pxに変更。

f:id:mikanusagi:20180505230447p:plain

 

すると、これが、、

f:id:mikanusagi:20180505225547p:plain

こうなりました。文字の始まりが40px分、後退しました。

f:id:mikanusagi:20180505230538p:plain

 

これは、あくまでテストなので、直接このブログのCSSには反映されませんが、

どんな風になるかを見ることができるので、変更後のイメージがつかみやすいです。

これをもとに、自分のCSSを変えていくと楽ですね。

 

 

★★他の方法★★

私は使っていないので、今回は試していませんが、

Firefoxも同じような仕様だということです。

EdgeやIEなどでも、開発者ツールなどからHTMLを開いて、

そこから該当するCSSにたどり着く方法があるようですが…

詳しい方のページをご参照ください。

 

それでは今回はこのへんで (*'▽')/

 

 

【追記:2018/5/6】

EdgeもIEも、「要素の検査」で似たような画面がでますね。

プレビューできるのも同じ。失礼しました (*´Д`)