HTML/CSSコーディングで使うツール、コーディングフロー

HTML/CSSコーディングで使うツール、コーディングフロー

フロントエンド

普段自分がHTML/CSSでコーディングしているフローをまとめておきます。

考え方としては、「ラクに早くリリースすることが正義、ピクセルパーフェクトは不必要」。
何故ピクセルパーフェクトが必要ないかというと、ユーザーにとって一番大事なのは【機能】なので。

制作会社の仕事の場合はそうもいかないですが、自分のクライアントは事業会社がほとんどなため、ユーザーにとって役に立つことが優先されるためこういう考え方に至っています。

基本的なフローとしては、ざっくりと大きいところからコーディングしてから細かいところを詰めていきます。

それでは、まずはコーディングで使っているツールから。

使用するツール一覧

VSCode

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ここ2、3年お気に入りのエディタ。何が良いかというと、

  • セッティングしなくてもデフォルトで使いやすい
  • 大型アップデート(機能追加、改善)が月1回くらいのペースである
  • Extensionが充実している

この3つです。特に大型アップデートが頻繁にあるのでただ単にアップデートをするだけでも、どんどん使いやすくなっていっている印象があります。テキストエディタでコーディングするなら、VSCode以外の選択肢ってあるのかな?ってくらいお気に入りです。

Emmet

https://emmet.io/

これは鉄板です。VSCodeにデフォルトで組み込み済み。 あると無いとじゃかなりコーディングの速度が変わってきます。 CSSのコーディングには使わなくても良いですが、HTMLのコーディングには使った方が良いかなと。 自分はHTML/CSS両方ともEmmetを使ってコーディングしています。

Zeplin

https://zeplin.io/

PhotoshopやSketchなどで作られたデザインデータを、CSSなどを取得できる状態にして共有できます。

テキストやCSSを一発でコピーできたり、オブジェクト間の距離を取得できたりします。

コーディングフロー

デザインを見ながら、レイアウトの構造を把握する

まず上がってきたデザインを見てレイアウトの構造を把握します。ここはヘッダーだな、メインコンテンツはここなど。

ヘッダーやフッター以外に含まれるコンポーネントの構造はここでは無視します。ヘッダーやフッターの中に含まれるコンポーネント程度の構造なら一気に書いてしまえますが、メインコンテンツなどになると複雑になってくるので後回しにします。

レイアウトをHTMLでコーディング

次に把握したレイアウト構造、ヘッダー、フッターの中身をHTMLでコーディングします。この際デザインを見ながら、EmmetでHTML構造を書いていくといいでしょう。

ヘッダーなら例えば、

header.l-header>.logo-area>p.logo-catch^a>img^^+ul.main-menu>(li.list-inner>a)*4

の様に。Emmetのコードは長くなり過ぎると構造を把握するのが難しくなるので、自分が把握できる程度で展開してしまいましょう。

ヘッダーの中身のHTMLがある程度できたら、コンテンツのレイアウト、フッターを同じ様にコーディングします。

レイアウトのCSS部分をコーディング

次にレイアウトのデザインをCSSで作ってしまいます。ここでも細かい微調整は基本的に後回しにします。

ZepplinでCSSをコピーしたり、大きさを取得して指定する程度でOK。

ヘッダーやフッターのコンポーネントのCSSは、ここでヘッダーなどと一緒にやってしまってもOK。

コンポーネント部分をコーディング

ここでメインのコンテンツのコンポーネントをコーディング(HTMLもCSSも)していきます。ここでも大雑把にデザインを再現していきます。

わからないところや時間がかかりそうなところは後回し。見た目が出来てきた方が爽快感があるので、爽快感だけを楽しむ様に簡単なところからやっていきましょう。悩むことはあとでまとめてやったりまとめて人に相談する方がラクだったりするので、容赦なく後回しにしましょう。

画像をまとめて挿入する

img要素の画像や、cssで背景に指定する画像などはPhotoshopのGeneratorなどで書き出して、まとめてファイル名をコピーをして挿入してしまいましょう。

Creative Cloud メンバー限定機能として、本日 Photoshop CC に新しい Adobe Generator というテクノロジーが実装されまし…
blogs.adobe.com

img要素自体はHTMLコーディング時点で挿入しておきます。

細かい部分を詰めていく

ここでようやと細かい部分を詰めていきます。大体コーディングで面倒くさいなと思う部分は一緒なので、まとめてやっちゃった方が効率的です。本当にコーディングの仕方がわからないことは、人に聞いてまとめて潰しちゃいましょう。

見直してブラッシュアップしていく

どれだけ詰めていっても見落としは必ずあります。なので、第3者にチェックしてもらうか、一晩寝て明日の自分にチェックしてもらいましょう。

見落としが会ったら修正してブラッシュアップしていきます。ただあまり細かいところまでやり過ぎてもリリースをしなければユーザーに価値を与えられないので、ブラッシュアップは程々にしてリリースしちゃいましょう。