ささのは

ささのは北九州市小倉南区でITスクール・パソコン教室やホームページ制作をおこなっています

Useful

お役立ち情報

XDの便利機能②-オブジェクトとの距離・余白を確認する

XD

他のオブジェクトの距離

Webデザインカンプを見ながらCSSのコーディングをする際、「オブジェクト間の余白はどのくらい空いているのだろう?」と測りながらコーディングしていませんか?


私はIllustratorやPhotoshopのデザインカンプに余白などの数値をあらかじめ調べてから、CSSをコーディングすることもしばしばあります。

ですが、XDを使ったデザインカンプの場合、オブジェクト間の余白を簡単に調べることができます。
この機能を使えば、あらかじめ余白をすべて洗い出す、といった工程を経ずに、CSSをコーディングしながら余白を調べても、ストレスに感じずに作業ができそうです!!

実際に調べてみよう

例えば、以下の二つの四角。
このオブジェクトの間は、何ピクセル空ければいいのでしょう?

ぱっと見るだけでは、何ピクセル空いているのかわかりません。
もちろん、Y座標を見て計算してもよいのですが、面倒です。

この場合は、どちらかのオブジェクトをあらかじめ選択します。
今回はピンク色のオブジェクトを選択しておきます。

そして、キーボードのAltキーを押しましょう。
すると、アートボードからの距離が表示されます。

これだけでも便利なのですが、Altキーを押したままカーソルを青のオブジェクトにあわせます。
すると、カーソルを合わせたオブジェクトの距離が表示されます。

簡単な操作なのに、とっても便利だと思います。
デザインを行うときはもちろん、コーディングの際もぜひ利用してみてくださいね。