#31  ピクセルパーフェクト｜デザインデータとのズレをチェックして実装の精度を高めよう

ピクセルパーフェクトとは？

ピクセルパーフェクトとは「デザインデータ」と「コーディングデータ」見た目を1pxのズレもないように実装することです。

以下のようにデザインデータ画像とコーディングデータを重ねてそのズレをチェックしていきます。

例ですが、メインコピー部分が大きくずれていますよね。

ただ、動画でも説明しますが、1pxのズレもなくコーディングするのは現実的ではないのでピクセルパーフェクトの概要とズレの調整方法を身に着けることができればOKです。

本講座の流れ

1. まずはこちらの記事を見る
2. 次に動画を見ながら一緒にPC版のズレを調整する
3. 余裕があればPC版と同様の流れでスマホ版を調整してみる

ピクセルパーフェクトを記事でざっくりと理解

動画を見ながら一緒に手を動かしてみよう

補足｜line-heightの単位について

動画内でline-heightの単位を今までは150%のように%の単位を用いて記述をしていました。

これは初学者の皆さんが混乱しないように便宜上Figmaで記載されている単位にそろえましたが本来はline-heightの単位は値なしの一択です。

単位なしというのは、デザインデータの行間の値が仮に「120%」となってい場合、「1.2」という100分の1で記述する記法のことです。

なぜ単位なしがベストかを理解するために、まずはこれまでに習った単位なし、%、emの単位ごとの違いについて確認します。

単位なしの場合は各要素のfont-sizeに基づいて行間が設定されています。例えばh1であれば20pxに対してline-height: 2なので40pxになっていますよね。

しかし、emと%については全ての行間が60pxになっています。

これは%とemで指定した場合、line-heightは親要素のfont-sizeを元に計算された値が適用されてしまいます。

つまり、30pxに対して200%なので60pxが全ての子要素に継承されてしまうという訳です。

見た目の差を見ると歴然ですね。

明らかに意図しない行間の広さとなってしまいます。これらの理由からline-heightは単位なしで記述するのがベストというわけですね。

<div>
  これはdivのテキスト
  <h1>見出し</h1>
  <p>文章</p>
</div>

div{
  font-size: 30px;
  line-height: 200%;
}

div{
  font-size: 30px;
  line-height: 200%
}
h1{
  font-size: 20px;
  line-height: 200%
}
p{
  font-size: 10px;
  line-height: 200%
}

補足｜flex-growについて

flex-growはflexアイテム（中の子要素）の広がり方をコントロールするプロパティです。

このプロパティに関しては以下の記事が非常にわかりやすいのでこちらをご覧ください。

flexプロパティの実践的な使い方を徹底解説

スマホ版も同様の手順でチェックして修正をしてみよう

ここからは余裕があればでOKです👍

Perfect Pixelを使った調整の要領を掴んでもらえればここに時間をかけすぎる必要はありません。

チャレンジする中で不明点があればご質問ください。

完成版のコード