デイトラweb制作中級編 DAY14
nakano
PerfectPixelとは
PerfectPixel ・・・ ブラウザ上でコーディングのズレを確認できる拡張機能
PerfectPixelを使った画面 ↓
矢印キーを使って位置をずらしながら確認する
実際にPerfectPixelで修正
①ヘッダー + メインビジュアル
修正後
.main-visual__lead {
// ======== 24px → 12px ========
margin-top: 12px;
}
}
.main-visual__button {
// ======== 36px → 30px ========
margin-top: 30px;
a {
// ======== 83px → 72px ========
height: 72px;
// ======== 83px → 72px ========
line-height: 72px;
// ======== 32px → 24px ========
font-size: 24px;
}
}
}②横並びカード
修正後
.card {
// ======== 100px → 88px ========
padding: 88px 0 120px;
}
.card__head {
// ======== 28px → 12px ========
padding-bottom: 12px;
}
.card__title {
// ======== 14px → 4px ========
margin-top: 4px;
}
.card__text {
// ======== 14px → 4px ========
margin-top: 4px;
}まとめ
今回はPerfectPixelを使って確認と修正を行いました！
どこまでズレをチェックするのかは案件によるみたいですね。
あまりにもズレがあったらお相手にも申し訳ないので、今のような練習の段階で大きなズレは直せるようにしときたいと思います。
