こんにちは。
デザインチームのKです。
普段の業務に関することで、
何か役に立つことを伝えられればと思い、
今回は得意分野のHTML・CSSコーディングについて話してみることにしました。
そもそもHTML・CSSコーディングはカンタンなのか？
結論から言うと“簡単”です。
デザインやプログラムと比べるのは失礼なくらいです。
画像がパラパラと出てきたり、
マウス移動に合わせて要素が動いたり、
まるでCGのようなホームページを見てこんなの難しいと思っているのかもしれないですが、
だいたいそういう複雑な動きをしているホームページは
javascriptなどのプログラムが絡んでいます。
「それでも、HTML・CSSの知識があるからでしょ」
と思うかもしれないですが、
そうでもありません。
断言できます。
HTML・CSSの知識量で言えば、
1ヶ月勉強した人と同じくらいだと思います。
いまだに、知らないCSSプロパティに出会って、
「なんだこれ」となることだってあります。
簡単だと思えないのは、
コーディング進め方が原因で
自分でややこしくしてしまっているだけです。
どうしてHTML・CSSコーディングがうまくいかないのか
具体的に言うと、
HTMLとCSSを同時にやろうとしてしまっているからです。
効率化だとか、画面で確認しながらできるからだとか
大義名分はいくらでも考えられますが、
このやり方だと結果として、
やり直しが頻発して、
かかる時間が長くなるケースが多いです。
簡単にHTML・CSSコーディングを進めるコツ
まず自分は、
HTMLをすべて書ききります。
その際、エディタ以外の画面は一切見ません。
ガーっと全部書き切ります。
あっているか気になるかもしれませんがぐっとガマンです。
当然
CSSには一切触れません。
理由はCSSの役割はあくまで“装飾”だからです。
家を建てるときに
いきなりトイレだけ基礎を作って装飾をしてそこだけ完成…
なんて進め方しないですよね。
HTMLとCSSを同時並行することはそれと同じです。
ひとたびHTMLにミスがあれば、
せっかくの装飾もやり直しになります。
HTMLを一旦最後まで書き終わってから、CSSです。
CSSの装飾は大きく2つに分けられます。
widthやheight、margin,paddingなどの“大きさ”にかかわる装飾と、
colorやbackground、font-sizeなどの“見た目”にかかわる装飾です。
実はこの2つも同時に進めると地獄を見ます。
まずは
“大きさ”にかかわる装飾
から進めるべきです。
皆さん人生で一度は積み木で遊んだことがあると思いますが、
積み木は大小さまざまな”四角形”ですよね。
（はいそこ「三角柱や円柱もあったぞ！」とか言わない。）
CSSは積み木の片づけという感覚が一番近いと思います。
色や見た目をつける前に
画面というお片付け箱に
HTMLを隙間なく敷き詰めていく、
そのためのCSSを書くことが重要です。
ここまでコーディング終えると、
おおよそホームページの形になっています。
後は“見た目”にかかわる装飾を
デザインカンプに合わせてつけるだけです。
まとめ
コツ：HTMLとCSSを同時にコーディングしない
コーディングは次の手順で進める
①HTML
↓
②要素の”大きさ”にかかわるCSS
↓
③要素の”装飾”にかかわるCSS
この手順でコーディングを進めれば混乱することも少ないですし、
不思議と書くコードが整理整頓されてわかりやすくなるので、保守性も上がります。
コーディングに苦手意識を持っている方は
まずこのやり方を実践してみてください。
