今回は実際にフロントエンドのコーディング業務において基礎となる考え方について書籍を読み、かつ実践で経験したことをまとめます。
内容としては、コーディングを進めていく上でまずやるべきレイアウト設計についてメインにまとめます。
これをするとコーディングを進めていく時に大掛かりな修正を回避することができますし、全体像を把握した上でコーディングを進めていくことができます。
レイアウト設計・・
まず、ここでの「レイアウト構成」とはウェブページ上でコンテンツとUI要素（ボタン、ナビゲーションバー、画像、テキストなど）がどのように配置されるかを設計するプロセスを指します。
私の会社ではデザイナーからもらったfigmaのデザインをもとにコードに起こします。
そのため、業務の流れとしては、下記のような流れになると思います。
コーディングまでの流れ
1.デザインの全体的な理解
→デザインの意図と目的を把握する、ビジュアル要素(色、フォント、画像、アイコンなど、使用されている要素)の確認
2.コンテンツ構造の分析
→どのHTMLタグ（「header」、「footer」、「main」、「aside」 など）が適切か考え、コンテンツを適切に構造化
3.コーディング
→コーディング段階ではまず、「header」、「footer」、「main」、「aside」タグを用いてHTMLの大枠を配置（※この時にwidthで絶対値を設定しておきます。ただしhightは指定しない。）
各項目の説明
「デザインの全体的な理解」について
・操作した時にどのような挙動になるか
・どのページにリダイレクトするか
・flexを使用する場合、要素の増減があるかどうか
・画像かテキストかどうか
・表示する文字数は何文字か
※不明点があればデザイナーの方に確認
「コンテンツ構造の分析」について
ここではデザインするサイトのパターンを把握して使用するタグを選別します。
選定の流れ：
- 最初にどのパターンのレイアウトか確認
※基本的にサイトの構成パターンは写真の５パターン
画像参照：
【知っておきたい】Webサイトの5つのレイアウト種類！メリットやおすすめサイトも解説 | 株式会社ニジボックス
-
タグ選定
基本的に使用するタグは「header」、「footer」、「main」、「aside」タグです。
例えば「マルチカラムレイアウト」では、「header」「main」「aside」「footer」であると絞り込めます。 -
実際のコンテンツに当てはめる
必要なタグを把握したら実際のコンテンツに選定したタグを当てはめます。
※ノートなどに書いて当てはめるといいと思います。
「コーディング」について
コーディングでは、実際のコンテンツの構造に合わせてタグを配置します。
この時クラスはシンプルに設定するとスタイルシートのコードの可読性が向上します。
例：
<main class="main"></main>
<header class="header"></header>
次にスタイルではwidthを設定して要素の絶対値を設定します。
その後に、flexなどで「main」、「aside」を横に並べるなどがあった場合にはdivで囲うよう設定します。
大枠ができたら本格的にコーディングを進めていきます。
コーディングの流れ
まず、サイト内でスタイルが使いまわされている最小単位のパーツのみを切り取っていきます。
下記の写真では「About」「Bicycle」などが使いまわされています。
このほかにも「ボタン」や「リンク」などがあると思います。またほかにもカラーなどをひとまとめにして設定することで再利用性を高めていきます。
画像参照：
【HTML/CSS コーディング練習】入門編：プロフィールサイト／1カラム
例：
下記のようにカラーを個別に設定することで、HTMLではクラス名を変更するだけで簡単にカラーを変更することができます。この例では要素に「category-color__〇〇（カラー名）」というクラス名を設定することででカラーを設定できます。
.category-color{
&__yellow {
color: #F2D332;
border: 1px solid #F2D332;
}
&__orange {
color: #FE8901;
border: 1px solid #FE8901;
}
&__purple {
color: #945FD7;
border: 1px solid #945FD7;
}
&__red {
color: #F84B6C;
border: 1px solid #F84B6C;
}
&__blue {
color: #4ABFD7;
border: 1px solid #4ABFD7;
}
&__brown {
color: #7C4503;
border: 1px solid #7C4503;
}
&__gray {
color: #898989;
border: 1px solid #898989;
}
}
これらの使いまわされているパーツの共通スタイルはそれぞれ汎用的なクラス名を与えて使いまわせるようにしましょう。
ほかにもページ全体に設定する内容は「＊{」で事前に設定することで全体にスタイルを反映できます。
例：
＊{
margin: 0;
padding: 0;
box-sizing: border-box;
}
注意点
ここまでできたら上から順番にCSSを当ててコーディングを進めていきましょう。
ただ、設計の中で「SEO的にNG」という点があるため、記載しておきます。
・divの中に直接テキストを記述する
→この場合には「pタグ」を使用しましょう。理由はdivではブラウザのクローラーが適切にコンテンツをテキストとして認識してくれないことで、検索順位が下がってしまう可能性があるためです。
<div class="column-box__list category-color__yellow">
机・テーブル・テレビ台
</div>
・h1がないのにh2タグを使用する
→この場合には必ず先に「h1タグ」が設定されているかチェックしましょう。理由は先ほどと同様にブラウザのクローラーが適切にコンテンツを評価してくれなくなり、検索順位が下がってしまう可能性があるためです。
以上のことを意識して実装していくことで、迷わすに実装を進めていけます。