tamakipedia

かまくらぴよぴよフロントエンジニア

ディベロッパーツールでcssを変更する

最近クロームディベロッパーツールにお世話になりっぱなしなので
改めてディベロッパーツールの操作方法を勉強してみました。

参考はこちら↓
https://www.amazon.co.jp/Chrome-Developer-Tools-%E5%85%A5%E9%96%80-%E6%8A%80%E8%A1%93%E3%81%AE%E6%B3%89%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%EF%BC%88NextPublishing%EF%BC%89/dp/4844398881/ref=asc_df_4844398881/?tag=jpgo-22&linkCode=df0&hvadid=296251887565&hvpos=&hvnetw=g&hvrand=7236795383376667738&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=20637&hvtargid=pla-637403469769&psc=1&th=1&psc=1

cssのプロパティーの値変更に関するショートカット

f:id:okinawanpizza:20200523224546p:plain

上の部分は矢印操作で数字を変更できます。
ショートカットを使えば少数第一位、一の位、十の位、百の位
をそれぞれ一回の操作で変更することができます。

キーボードショートカット 値の増減
「↑か↓」 1
「Alt + ↑か↓」 0.1
「Shift + ↑か↓」 10
「Command + ↑か↓」 100

※下にするとマイナスになります

Esc でドロワーを表示

Esc でコンソールを確認するあれを下部に表示することができます。

f:id:okinawanpizza:20200524043329p:plain

要素にクラスを追加する

要素をクリックします。

inspect の .clsを押して、出てきたAdd new class という入力欄に付けたいクラス名を入力します。
f:id:okinawanpizza:20200524051947p:plain

f:id:okinawanpizza:20200524052103p:plain

Enterを押すと要素にクラス名が追加させた状態になりました。
また.clsボタンの横にある ボタンを押すと
inspectでクラスにcssを追加することも可能です。

f:id:okinawanpizza:20200524052354p:plain

このようにclassやプロパティーの値を変更したり
クラスの有無や強弱を調べることができるわけですね!

是非お試しあれ笑
おしまい