DAY33.デザインカンプからコーディング編 横並びカードのコーディング

01.カードのコーディング

横並びをするために”display: flex;”

改行するために”flex-wrap: wrap;”

1.フレキシブルな横並びをつくる

width: calc(33.3% - 24px * 2 / 3);
（100% / カード枚数 - 余白の幅 * 余白の数 / カード枚数 )

ポイント
行の最初のカードだけは除外する形でmargin-leftで余白をつける

02.PerfectPixelを使ったチェック＆修正

PerfectPixelを導入

PerfectPixelは、実際のサイトの上に透過した画像を重ねる
というシンプルな拡張機能

重ねる画像はデザインカンプ自体（アートボード）の画像

コーディングしたサイトに重ねる
①デベロッパーを幅をカンプと合わせる
②カンプの画像を読み込む
③設定変更
・X → 0
・Y → 0
・Scale → 1
・Lock → 選択
④デザインカンプを見ながら微調整