牛丼デザイナーのときめきデザイン

典型的O型なデザイナーがぐだぐだと無様に生きている様子をお伝えします。めんどくさがりでもデザインは出来るのよ!

これって何pxだよ!!角丸の半径を簡単に調べる方法

どうも、牛丼デザイナーのぽてこです。

お酒を飲んだあとって、なぜか無性に牛丼が食べたくなりますよね。
食欲の秋、牛丼の秋。
またしても季節を感じます。
どうも、バカです。

これって何pxの角丸?

さて。
今日はタイトル通り、角丸の大きさの調べ方をご紹介します。


コーディングをしよう!
送られてきたPSDを確認しよう!!
角丸だね〜CSSでちょんちょんしようね〜〜

…この角丸の半径、何pxやねん。


うまい方法もわからなかったぽてこは、
いちいち自分でシェイプを使って角丸を作りながら確認していました。
でもこれじゃ、時間もかかるし……
ちゃんとしたサイズが確認できない場合もあります。

…ということに気づいてしまったので、
うまい方法を先輩に聞いてみました!!!

ツールのご紹介。選択ツールって便利なんです

このブログでは、基本的にPhotoshopを使って説明していきます。
なので今回もPSを基準に説明していきまっせ。


というわけで、
今回使うツールは選択ツールのみです。
(四角いシェイプでも可能。)

f:id:moriyamakuru2:20151011211717p:plain
選択ツールは、
選択範囲に合わせた形をつくることもできるし、
マスクを使って切り抜きをするときにも便利です。
また、サイズを測るモノサシ代わりにもなるので、
コーディングのときなどにも使えますぞ。

ツールのご紹介。選択ツールって便利なんです

前置きが長くなってしまいましたが。。。

角丸の半径が何pxなのか調べる方法は、意外と簡単。


画面を拡大してみて、
角丸がどこから始まっているのかを確認します。
どこからはじまっているのか確認できたら、
はじまっている部分の大きさを選択ツールなりシェイプなりで確認します。
そこで確認した大きさが角丸の半径となります。
f:id:moriyamakuru2:20151011204217p:plain


たったこれだけで角丸の半径が調べることができました!

CSSで角丸をつくる。

角丸の半径がわかったらあとはCSSで設定するだけです。

簡単にですが、おなじみの角丸CSSも置いておきます。
参考にしてみてください。


CSS

.kadomaru {
  width: 263px;
  background-color: #73c1d3;
  /* 角丸用CSS */
  border-radius: 20px; 
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}