ディベロッパーツールで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のプロパティーの値変更に関するショートカット

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

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

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

Esc でドロワーを表示

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

要素にクラスを追加する

要素をクリックします。

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

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

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

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