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 → 選択
④デザインカンプを見ながら微調整
この記事が気に入ったらサポートをしてみませんか?