模写コーディングを終えてポイントまとめ
Designの確認
カラーの確認
・背景色、文字色、アイテムの色の確認
・カスタムプロパティ化しておく。
:root {
--color-bg-light: #eceff4 ;
}
コンテンツ幅の確認
・sp版、pc版のメイン幅の確認
・container,wrapper,innerの確認
・レイアウトのカスタムプロパティ化
レスポンシブ化するときに横並びになる要素の確認
・横並びにする場合はブロック化しておかなければいけないため
疑似要素をつかうものを確認
繰り返し使うパーツの把握(コンポーネント、モジュール)
例)ボタン、見出し、コンテンツ幅
コンポーネントパーツから先に作るほうがパズルしやすい
コンポーネントパーツ自体には幅や高さ、マージンなどの情報を持たせ ない。
全体共通のスタイルを記述しておく
html {
background-color: var(--color-bg-base);
}
body {
line-height: 1.75;
font-size: 16px;
color: var(--color-font-base);
font-family: var(--font-family-base);
}
@media screen and (min-width: 768px) {
body {
font-size: 18px;
}
}
コーディングする際の注意点
・繰り返しをコピペをする際は、構成に追記しなくてもいいように確認する。
・ブロックに対するコメントアウトを残す
この記事が気に入ったらサポートをしてみませんか?