デベロッパーツール、エレメント部分の使い方

pc
出典:https://www.pexels.com/
この記事は約3分で読めます。
スポンサーリンク
Sponsor Link

今回はデベロッパーツールのエレメント部分を使ったCSSのセレクタ確認や変更について
自分はこうやっているよという簡単な説明記事になります
見た感じは難しそうですが、使ってみると簡単なので是非使い方を覚えちゃいましょう^^

起動、設定、表示位置変更など

Windows機の場合ですがChrome、Firefox共にCtrl+Shift+I 又は F12で起動します
dev tool
起動するとこのようになります

dev tool
赤いアンダーラインの部分をクリックすると設定、検索、ツール表示位置変更などが出来ます
ドックの位置は左から別窓、左側、下部、右側となっているので好きな形で表示させましょう
ブラウザをフルサイズで使う場合は下部表示が使いやすいかもしれません

セレクタの探し方

実際に確認したいセレクタを探すには…
dev tool
赤いアンダーラインをクリックして確認したい所をクリックします
dev tool

dev tool
このように指定した部分のセレクタへ移動してくれます
画像の場合はサイドバーウィジェットのタイトル(見出し)部分です

基本はこのようにして確認したい所をクリックしてツール部分に表示させるという形です

Sponsor Link

コードを変更してみる

セレクタ部分が確認できたら変更を掛けたい部分の数値やコードを変更してみます
dev tool
画像にはカーソルが写っていないので分かりづらいと思いますが
赤いアンダーラインの部分にカーソルを合わせると
左画面のように該当セレクタがこのように表示されます
該当セレクタがどの部分に影響しているか、どのコードが使われているかを確認する事が出来ます

今回は例としてタイトル下のマージンを変更してみます

margin: 0 0 1.5em;

現在はこのような指定になっているので、数値を小さくしてみます

dev tool
margin指定部分の数値の所をシングルクリックするとこのように反転するので
数値を変更してあげます

dev tool
dev tool
数値を変えるとこのようにしっかり変化することが分かると思います
今回の例では.5em減らしただけなので、表示画面での変化は少ないですが
変更した部分の変化を確認しながら指定すると良いですよ

モバイル表示の確認方法

デベロッパーツールを使ったモバイル表示の確認方法は以下の通りです
dev tool
dev tool
このようになるので、モバイルでの表示の確認やメディア指定の確認や変更をすることが出来ます
完全に一致はしないですが、わざわざ実機で確認しながらするよりは大分楽だと思います
各種変更をし数値等を反映させたら最終的に実機で確認…という流れですかね

変更した数値を反映させる

確かツール自体からも修正ができたと思うけど、自分は確認してその数値を
子テーマのstyle.cssへ追記なり変更をしています

まとめ

今回はデベロッパーツールを使ったCSSセレクタ、指定コードの確認、変更についての簡単な記事を書いてみました
デベロッパーツールには他にも色々便利な機能がありますがセレクタ部分は
デザイン変更にはほぼ必須と言っていいツールなので、この部分だけでも使い方を覚えると色々捗りますよ
最初は見てもわかんねーし、難しそう…と思うかもしれませんが、使ってみると案外簡単だったりします
自分のブログなどのデザインを変更、カスタマイズしてみたいと思っている方は是非使ってみてくださいね

もっと詳しく知りたい、他の機能も知りたいという方はこちらで確認してみてください

[share]

タイトルとURLをコピーしました