/public/images/astronotion/eb038f54-f73c-4f2f-aa6a-aaf6ec55be2e_joujaku.jpeg
←back

figmaと奇数px

2022/10/04

奇数pxダメ絶対おじさん≒情弱

すこし前の私です。

それなりに歴の長いエンジニアですと、デザイナーにfont-sizeやmarginの指定をお願いする時、 奇数pxは絶対に使わないで!

ってお願いしてたと思います。 2022年の昨今、そんな絶対はもう存在しないことを懺悔と共にお伝えします。

先に結論

figma使ってたら、奇数px使ってても、まぁ大丈夫です。

(「まぁ」ってつけてるのはそれでも奇数pxつかう理由がないケースが多いからです。後述。)

figmaじゃないデザインツールのとき、、

retinaとかの高解像度ディスプレイ用に2倍サイズでデザインしてなかったでしょうか?

2倍サイズで作ったデザインを、実装の際には1/2にしないといけないので、奇数で作ると割り切れないことがあります。これが奇数はダメよ。の最も大きな理由だったんじゃないでしょうか。

割り切れないと何が問題なのか

切り捨て切り上げ四捨五入をどうするかの議論が、デザイナーとエンジニアでコミュニケーションを取る必要が出ました。じゃあ最初から奇数は禁止すれば話が早かったわけです。

そもそも。小数点はブラウザで正確に描画されないので、非推奨です。

奇数云々は別にして、今小数点つきでデザイン作っちゃってる方は、そっと直しておいてください。 (関係ないけど、zeplinからcssコピペしたらバグって全部+0.1されてるとか昔ありましたね。)

line-heightとmarginの計算

figmaは計算をよしなにしてくれてるので気にする必要なかったんですが、

他のデザインツールは余白計算を自前で頑張らないとデザイン通りに実装できなかったんです。 (デザイナーにはあまり知られてない気がする)

CSS
# こういうmixinつくってたよね

@mixin lineHeightCrop($line-height) {
 &::before {
   display: block;
   width: 0;
   height: 0;
   margin-top: calc((1 - #{$line-height}) * .5em);
   content: "";
 }
 &::after {
   display: block;
   width: 0;
   height: 0;
   margin-bottom: calc((1 - #{$line-height}) * .5em);
   content: "";
 }
}

式を見てもらってわかるように、ここに奇数が入ってくると計算結果が不都合が出るわけです。

CSS
.even {
	font-size: 16px;
  line-height: 1.5;
  /* 24px-16px=8pxが余分なmargin */
	/* ↑のmixinを使うと正しい余白は11px */
}

.odd {
	font-size: 15px;
  line-height: 1.5;
  /* 22.5px-15px=7.5が余分なmargin。すでに少数が登場してる */
  /* ↑のmixinを使うと正しい余白は10.25px。第二少数点まで登場してしまった。。 */
}

なのでエンジニアは奇数はやめて欲しかったわけです。

まとめ

以上が奇数pxダメ絶対おじさんが誕生した背景です。

figmaだとこれらの背景がなくなるので、絶対おじさんが息をしなくなります。

ただ、わざわざ奇数pxを使う理由も依然としてないんじゃないかと、おじさんは思うので

8の倍数メソッドとか、rem/emの概念もあるので、特別な理由がなければ奇数はなるべく避けるでいいんじゃないかと思いました。

←back