こんにちは、システムチームのKです。
ここ数週間、部下のCSSコーディングの責任者として動いていましたので、
それに関連して、「カンプからコーディング」するときの準備について共有しようと思います。
ちゃんと準備ができているかいないかで、かかる時間や差し戻りの回数が減るので
是非一読してもらえればと思います。
カンプを「解析」
「何を解析するか」ですが
自分は、
・デザインの規則性
・margin、paddingの値
・position系のプロパティを使わなければいけない箇所
の3つを重視しています。
・デザインの規則性
これはWEBに限らずですが、どのようなデザインでも規則性が存在します。
その規則性を、どれだけ事前に把握するかが重要です。
例えば最近のデキテルのデザインなら、セクションごとに背景が切り替わりますが、
これも、ランダムに切り替わっているのではなく、
3つの背景画像がループしているといった規則性があります。
それをわかっていないままコーディングすると、
.block_outer_promise{
background: url(…..)
}
のような、決め打ちのCSSで実装して、失敗します。
・margin、paddingの値
カンプの外枠から、確認していくと良いでしょう。
また、値もアバウトなものでなく、
「正しい値」を出すことが重要です。
コーディングしながら都度、カンプから測っていると、
測る回数分時間がかかり、何度も測っているうちにズレてしまう恐れがあります。
・position系のプロパティを使わなければいけない箇所
とりあえず、position:relativeつけとけみたいなコードをよく見かけますが、
position系のプロパティほど、やっつけで使ってはいけないものはありません。
必要がなければ、positionは使わない方法で実装することが賢明です。
理由
①relative、absoluteの関係を管理しきれなくなり、レイアウトが崩れる
②top、left、right、bottomに根拠のない値を入れがちになる
③ブラウザによっては、他のプロパティと組み合わせて使うとバグを起こす原因になる
よくワンポイントのあしらいをつけるために、before、afterを使って実装することがありますが、
まず先にbackgroundで指定できるかを確認してから、使うようにしましょう。
カンプから読み取ることが「できない」ことを洗い出す
わりと皆が陥りがちなのが、「デザインカンプは完璧」と思い込んで、
コーディングを始めることです。
そういう時に限って、一通りコーディングが終わった後にテストをしてみたら、
「○○の時に崩れた」、「△△の時のあしらいが無かった」なんて不具合が見つかり、
修正に修正を重ねる負のループに入っていきます。
デザイナーの意図、とコーディングを担当するスタッフの意図
これが最初からビタっと100%一致することはまずありません。
コーディング担当者の方が「浅い」ことがほとんどです。
「これテキストが伸びたときはどうなるの？」
「画像が複数枚入ったときは？」
「グローバルメニューを右に移動する場合は？」
カンプから読み取ることが「できない」要素を手を動かし始める前に洗い出して、
デザイナーとの打合せることが絶対に必要です。
コーディングがうまくいかないと、
プロパティの知識や、経験不足を原因と考えるかもしれませんが、
そこを埋めて解決しようとするとうまくいかないので、
コードを書く前の準備の仕方をみなおしてみましょう。
