初心者HTMLコーダーがやってしまいがちなパターンその1

日本にWEBデザイナーという職業が成り立って、15年以上の月日が経ちました。
もう15年と捉えるのか、まだ15年と捉えるのかはあなた次第ですが、
少なくともこれだけの月日が経つと、技術者同士の差はかなり広がってきます。

プロのHTML/CSSコーダーとして生き抜いていくためには、
単純にデザインを再現できるだけでは足りません。

ポイントとなるのは「拡張性」「保守性」「明瞭性」この3点になります。
この世界の技術は毎日のように進化し続けます。
デザインが再現できるだけでは、もしかしたら5年後はすべて自動化してるかもしれません。

この記事ではWEBデザイナー(コーダー)初心者の方から、
従来のコーディング手法から離れられない中堅の方向けに書いていきます。

「HTMLタグ要素に対してスタイルを定義してしまう」

どういうことかというと、例えば。

〇CSS

これが許されるのはLPぐらいでしょう。



htmlcss_1
このように仮に2ページ存在してそれぞれのh1タグの色(color)も余白(margin)も変えたい場合、新たにh1.secondとかクラスを作って

〇CSS

こいつをCSSに追加していくことになると思います。
これはCSSの処理にとっては無駄になりますし、
HTMLを見ただけではどのような「見た目」かわかりません。

この場合の正解は…

〇CSS

と書いてHTMLで

〇ページA HTML

〇ページB HTML

としてあげましょう。
…かといってなんでもかんでもクラスにすることが正しいとは言えません。
例えば、上記のh1のスタイルに対して、

・ページAは左寄せでフォントサイズは16px
・ページBでは右寄せフォントサイズは12px

htmlcss_2
だとします。
上の考え方から記述するとCSSは。

〇CSS

そうするとHTMLの記述はこうなります。

〇ページA HTML

〇ページB HTML

はい、このHTMLも見たらもう何がなんだかわからなくなりますね。
他の人が修正するときにうんざりしてしまうパターンです。

デザイン上、どうしてもページごとに独立したスタイルにしたい場合は、
このような構造になってしまうことも例外として考えられますが、
基本的にデザインは一貫性のあるルールに基づいてレイアウトされていると思います。

そこで、オブジェクト指向型の構造が大切になってきます。
OOCSS(オーオーシーエスエス)、BEM(ベム)、SMACSS(スマックス)という手法がありますが、こちらについては長くなりますので、いったん置いておきます。

CSSの構造の一般的なオブジェクト指向の考え方として、
ページAとページBのスタイルがそれぞれ違う場合。
それぞれのスタイルをクラスにまとめてしてしまえば良いということです。

〇CSS

〇ページA HTML

〇ページB HTML

かなりスッキリしましたね。

※ただし、これは全てのスタイルが違う場合に限ります。
初心者コーダーがやってしまいがちなソースコード【シリーズ2】では、
「同じスタイルを定義してしまう」ついて触れていきたいと思います。