今回はデベロッパーツールのエレメント部分を使ったCSSのセレクタ確認や変更について
自分はこうやっているよという簡単な説明記事になります
見た感じは難しそうですが、使ってみると簡単なので是非使い方を覚えちゃいましょう＾＾
起動、設定、表示位置変更など
Windows機の場合ですがChrome、Firefox共にCtrl+Shift+I 又は F12で起動します
起動するとこのようになります
赤いアンダーラインの部分をクリックすると設定、検索、ツール表示位置変更などが出来ます
ドックの位置は左から別窓、左側、下部、右側となっているので好きな形で表示させましょう
ブラウザをフルサイズで使う場合は下部表示が使いやすいかもしれません
セレクタの探し方
実際に確認したいセレクタを探すには…
赤いアンダーラインをクリックして確認したい所をクリックします
このように指定した部分のセレクタへ移動してくれます
画像の場合はサイドバーウィジェットのタイトル(見出し)部分です
基本はこのようにして確認したい所をクリックしてツール部分に表示させるという形です
コードを変更してみる
セレクタ部分が確認できたら変更を掛けたい部分の数値やコードを変更してみます
画像にはカーソルが写っていないので分かりづらいと思いますが
赤いアンダーラインの部分にカーソルを合わせると
左画面のように該当セレクタがこのように表示されます
該当セレクタがどの部分に影響しているか、どのコードが使われているかを確認する事が出来ます
今回は例としてタイトル下のマージンを変更してみます
margin: 0 0 1.5em;現在はこのような指定になっているので、数値を小さくしてみます
margin指定部分の数値の所をシングルクリックするとこのように反転するので
数値を変更してあげます
数値を変えるとこのようにしっかり変化することが分かると思います
今回の例では.5em減らしただけなので、表示画面での変化は少ないですが
変更した部分の変化を確認しながら指定すると良いですよ
モバイル表示の確認方法
デベロッパーツールを使ったモバイル表示の確認方法は以下の通りです
このようになるので、モバイルでの表示の確認やメディア指定の確認や変更をすることが出来ます
完全に一致はしないですが、わざわざ実機で確認しながらするよりは大分楽だと思います
各種変更をし数値等を反映させたら最終的に実機で確認…という流れですかね
変更した数値を反映させる
確かツール自体からも修正ができたと思うけど、自分は確認してその数値を
子テーマのstyle.cssへ追記なり変更をしています
まとめ
今回はデベロッパーツールを使ったCSSセレクタ、指定コードの確認、変更についての簡単な記事を書いてみました
デベロッパーツールには他にも色々便利な機能がありますがセレクタ部分は
デザイン変更にはほぼ必須と言っていいツールなので、この部分だけでも使い方を覚えると色々捗りますよ
最初は見てもわかんねーし、難しそう…と思うかもしれませんが、使ってみると案外簡単だったりします
自分のブログなどのデザインを変更、カスタマイズしてみたいと思っている方は是非使ってみてくださいね
もっと詳しく知りたい、他の機能も知りたいという方はこちらで確認してみてください
[share]
