くまだどうも、くまだです。
コーディングするときに、上から（ヘッダーから）作るか、パーツから作るか。
自分はパーツから作ります。体感、パーツから作ったほうが早い、気がする…。
パーツからコーディングする
コーディングの勉強をし始めてある程度慣れてきたらデザインカンプからコーディングすると思いますが、勉強やり始めのときはヘッダーからコーディングしていました。
ヘッダーやって、メインビューやって、セクションやって….みたいな。
今現在はパーツから先に作ってコーディングしてます。
適当にparts.htmlみたいなパーツ専用のhtmlファイルを作って、そこにひたすらパーツを作っていく。
イメージはこんな感じ（CSSは省略しますが）↓
〇 parts.html
<div class="l-inner">
<a href="" class="c-button">テキスト</a>
<h2 class="c-section-title">セクションタイトル</h2>
<a href="" class="c-boder-button">テキスト</a>
<a href="" class="c-arrow-button">テキストテキスト</a>
<p class="c-common-text">テキストテキストテキストテキスト</p>
<div class="p-card">
<a href="">
<div class="p-card__img">
<img src="images/pic1.png" alt="">
</div>
<h3 class="p-card__title">タイトルタイトル</h3>
<p class="p-card__text">本文本文本文本文</p>
<div class="p-card__button-wrap">
<button class="p-card__button">詳細を見る</button>
</div>
</a>
</div>
</div>
パーツをひたすら作って、レスポンシブもパーツ単位で終わらせます。
パーツを作り終えたら、あとはデザインカンプみながらパーツを組み合わせてコーディングする。あと、上では入れ忘れましたが、hrタグでパーツごとに区切り線、pタグでクラス名のテキストいれておくともっと分かりやすいです。
作るパーツの例
作るパーツの基準としては、基本的に共通パーツがいいかなと思います。
個人的にはたぶんこのやり方のほうが早い…気がする笑
- 共通で使っているボタン
- セクションタイトル、見出し
- パンくずリスト
- ハンバーガーメニュー
- コンテンツの本文（フォントサイズやline-heightなどスタイルがいっしょならこれもパーツ化する）
- コンテンツ内の画像
- カード系のアイテム（お知らせやブログカードみたいなやつ）
- 下層のFV
- トップに戻るボタン…など
デザインや構成によって作るパーツは違ってくるので、上のが正解というわけではないです。
パーツを作るときは、基本的に「横幅」と「外側に余白」は指定しないのだけ注意すればいいかなと。パディングはOKです。
パーツ単位で横幅や外側に余白を付けてしまうと、パーツを配置する場所によっては横幅や余白が違うことがあるので、CSSで詳細度を上げて上書きしなければならなくなる…。（その辺はまた別なときに記事にします）
まとめると、
- パーツ専用のhtmlファイルに、ひたすらパーツをつくる
- パーツ単位でレスポンシブ終わらせる
- デザインカンプみながらパーツを組み合わせてコーディングする
どのページのどのセクションからでもコーディング始められます。ちなみに私は、いつもヘッダーは最後にやります笑
ここまで読んでくださりありがとうございました。