デベロッパーツールで100ずつ調整するコマンドが超便利だった!

はてなブログやWordPressなんかでサイトのカスタマイズを行っていると、デベロッパーツールで値を確認したり調整したりしますよね。

 

そのような場合に値を0.1ずつや100ずつ、10ずつ調整する方法があるので紹介します。

はじめに

 

今回紹介する内容はGoogleChromeの「デベロッパーツール」で値を調整する時に、0.1ずつ変更したり100ずつ変更するためのコマンドです。

この方法を使えば「0.5」を「0.6」に変更する時などで、わざわざ値を入れ直す必要がなくなります。

 

0.5pxを0.6pxに書き換えるのって意外と面倒なんですよね。簡単で便利なコマンドなので是非覚えてみてください。

 

デベロッパーツールとは

 

コマンドをチェックする前に、今回登場するデベロッパーツールとはどんなものか確認しておきましょう。

GoogleChromeを使っている状態でサイトに行き、右クリックした中に表示される以下の項目をチェックしてください。

 

20170718235040

 

クリックするとデベロッパーツールが起動して、ブラウザ上で要素ごとのスタイルを直接調整できます。cssをカスタマイズする人なら当然知ってますよね?

 

20170718235213

 

では実際のコマンドを見ていきましょう。

 

0.1ずつ操作する

 

デベロッパーツールで値を調整する時、以下のようなコードを操作するかと思います。

 

20170718235355

 

通常の値であれば、キーボードの上や下を押すことで値を変化させることができるのですが、画像のように小数点を含む値の場合はキーボードで操作しても「1.5」や「-0.5」になってしまいます。

 

20170718235527

 

これではうまく値を調整できませんよね。ではどのようなコマンドを使えば良いのでしょうか。

実は「option + 上下」を使うことで0.1ずつ値を変化させらるんです!Windowsだったら「alt」なのかな。ここは未確認ですすいません...。

 

Point
Alt + 上下で 0.1ずつ調整できる!!

 

20170718235742

 

これで0.1ずつ細かく変化をチェックできますね!

 

100ずつ調整する

 

逆に値が大きな時に、キーボードの上下で1ずつ変更させるのは大変ですよね。デベロッパーツールには、100ずつ値を変化させるコマンドもちゃんと用意されていました。

キーボードの「command + 上下」を押してみてください。

cssの値が「100」「200」と変化しました。

 

Point
Command + 上下 で100ずつ調整!!

 

20170719000017

 

これで値を大幅に変更したい時もキーボードから徐々に調整できますね!

 

10ずつ調整する

 

おまけに10ずつ調整する方法も見ておきましょう。

デベロッパーツールで10ずつ値を調整する場合は「shift + 上下」を押すことで一気に変更できます。

 

Point
Shift + 上下 で10ずつ調整!!

 

20170719000224

 

先ほどの「100ずつ移動」と合わせれば、一気に移動させてからだんだん細かく調整していきなんて使い方もできますね!

 

まとめ

 

今回紹介した「0.1ずつ」「100ずつ」「10ずつ」値を変更させるコマンドを覚えておけば、デベロッパーツールで値を調整するのがもっと楽になるかと思います。

ぜひ覚えておきましょう。

 

 

ではまた。

過去にレビューしたアイテム