【webデザイン小技】CSSをチューンするときはキーボードの上下キーが鬼便利

なにも別にwebデザインに限ったことはないですが、この小技を知ってたら捗ってしかたないはずです@shintarowfreshです。

キーボードの上下キーが鬼便利

だいたい僕クラスのコーダーになってくると、頭の中にある画面で色やら位置やらスペーシングやらレイヤーやらをそれこそ0.1px単位で正確に配置できるし、トライアルアンドエラー出来るんですが、みなさんも出来ますよね？

…え？

……出来ないですか？

1pxの100分の1にこだわってマージンやパディングしてないんですか、ダメですよ、めっ。

上に書いたのは全部嘘で、一回HTMLとCSSをくんだらとりあえずブラウザでリアルタイムに確認しながらデバックしたりチューンしたりしています。

いつもこんなかんじであれこれいろんなパーツをあれこれしているんです。
とくにmargin とかpaddin とかborderとかは1pxで見た目が結構変わってしう、1px間違えばカラムが落ちることだってあります。

なんども数値をいれては消して入れては消してとやっていたら時間がいくらあっても足りません。

↓そこで、変更したい数値あたりにカーソルを持ってきます

数値を消さずに、とりあえず「↑」カーソルを押してみてください。

↑数値がひとつ上がった！画像でいうとmarginのした部分、12が13に変わりました。
もちろん「↓」を押すと一つ下がります。

冒頭でwebデザインだけではないと言いましたが、Illustratorやフォトショップでも同様に上下キーで値を変更することができます。
Illustratorだと、フォントの指定の時とか、上下のフォントに切り替えられます。

ちなみにちなみに、Firefoxの「firebug」だと数値以外でも上下キーでトライアルアンドーさせることも出来ますよ。
例：borderの値を上下キーで「solid」とか「dashed」とかに変えられます。

僕としてはやっぱり細かく数値を変更させまくる必要がたくさんあって、プレビューがリアルタイムな「webデザイン」でもっともよく「上下キー」をつかっていますね。

CSSいじるのがめんどくさくて仕方ない人の何かの参考になれば幸いです。

@shintarowfreshでした。

文：シンタロヲフレッシュ

はてブ

pocket

twitter