この記事は最近HTML/CSSのコーディングを始めたよ〜という初心者の方向けの内容になります。 以前「デザインデータを受け取ってからコーディングを始めるまでの流れを教えてほしい」という質問をいただいたことがあったので、個人的にやっていることをざっくりご紹介します。
1. フォルダを作成
私がよく用意するフォルダの構造は、
├─ index.html
└─ assets
├─ css
├─ js
└─ imagesです。cssやimagesフォルダをHTMLと並列にしない理由は、ページのコンテンツを表すものとそれを装飾したりする材料という意味付けをしているからです。
ここは正解不正解ないのでお好みで。ただし、他の人が見ても伝わりやすい名称・構造を心がけましょう。
ちなみに普段スタイルはSCSSで記述しているので、CSSフォルダの中は以下のような構造になっています。
├─ css
| ├─ style.css
| ├─ style.scss
| └─ libs
│ ├─ variable.scss
│ ├─ mixin.scss
│ └─ function.scss
├─ modules（※）
│ └─ ...
└─ parts（※）
└─ ...LP程度のコーディング時はpartsやmodulesは用意します。それは何のためのフォルダなの？という解説は別途SCSSやコンポーネント設計の記事を書いた際に行えたらと。
2. 配色やフォント等の基本情報をまとめる
具体的には以下のような情報をまとめます。SCSSを使う場合は変数にまとめます。
配色
- ベースカラー
bodyの背景や余白等に使われる色。 - メインカラー
メインの色（そのまま）。企業サイトだとコーポレートカラーと表現したりします。 - アクセントカラー
ボタンやリンクなどユーザの目を引きたい箇所に使われる色。
フォント
- ベースのフォントサイズ
- ベースの行間（line-height）
- フォントの種類（font-family）
3. その他細かい情報の確認
デザインデータを受け取った際に以下の情報の共有がなければ必ず確認しましょう。
- 対象ブラウザ
もしIE10以下の対応を依頼された場合は使用できるHTML/CSSに制限があります。IE11でも一部のCSSでバグが発生するため回避策を取らなければいけません。 - 画像で表現する箇所とテキストで表現する箇所
Webフォントにはないフォントを使った箇所がある場合などは画像で表示することがあります。 - 動きのある要素の有無
CSSのアニメーションで解決できない場合やjavascriptの対応が必要になり作業時間に影響してくるため、どのような動きになるか詳細まで確認しましょう。
4. 設計書を作る
はじめに全体を確認してどのような文書構造になっているのかを把握し、その情報を元にHTMLの設計書を用意します。
事前に整理することでどんな情報が入っているのかが理解でき、どのタグが適切なのかという判断材料にもなります。ここが一番大事。
まずは大枠の共通レイアウトから区切っていきます。
上の状態からさらにもう一段階入り込んだところまで設計しておきます。画像はmainの中に踏み込んだ場合です。 クラス名も一緒に振っておけばコーディング時に悩むことがなくスムーズに進みます。
最初は時間かかるかもしれませんが、慣れてくると頭の中だけでも設計できるようになり作業スピードがどんどん上がっていきます。 まずはコツコツとメモ程度からでもいいので設計書を作ってみてください。
ざっくりと書きましたがこれが私の作業開始前の流れになります。この手順あったほうがいいんじゃない？とか抜けてるよ！というのがあればご意見いただけると幸いです。
