logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

CSSの設計について考えてみました

こんにちは。入社して半年経ちました原田です。



WEBやITは未経験だったので、わからない事だらけで、戸惑ったり、色々新しい発見があったりで、日々奮闘しています。



コーディングの業務を進めていくにしても、最初想像していた以上に奥が深いなと思っているのですが、 そんな中でも、最近、CSSの設計って難しいなと思っています。



普通にページの要素に沿ってCSSを書いていけばいいやくらいにしか思っていなかったのですが、 そこそこの規模のサイトになると、きちんと最初に考えて設計しないと大変な事になるという事がわかりました。



具体的にどう大変かと言いますと、

  • 1.同じパターンのデザインが複数ページで展開されている場合、修正が入ると該当の全ページ修正する必要が出てくる

    →設計をきちんとしておけば、複数ページに修正対象があっても、1箇所修正すれば済む。

  • 2.デザインそのままで、h2タグをh3に変更して欲しいという修正が入った場合、CSSも大直しする必要が出てくる

    →設計をきちんとしておけば、HTMLで、h2をh3に変更するだけで済む

  • 3.AページにあるパーツCをBページにも掲載する事になった場合、BページでCパーツを表示させるCSSを組む必要が出てくる

    →設計をきちんとしておけば、該当のHTMLをコピペするだけで済む


こういう気づきがあったので、ちょっとCSSの設計について考えてみました。

そして、各ページの要素をモジュールごとに分類して、そのモジュールコーディングを先ずはすれば良いと思いました。

具体的なモジュールの分類方法ですが、

分類大→分類中→分類小という順番で分類作業をする

①大枠を分類して、構造を決める
②各構造の中を、次の詳細度で分類する
③さらにそのかたまりを、次の詳細度で分類する



また、基本的な設計の考え方として、構造とスキンを分離する。
構造→形に関わる事 スキン→見た目に関わる事



例:赤いボタンをCSSで表現



<従来のCSS>



<構造とスキンを分離する書き方>



width → 構造
height → 構造
border → 構造(border-colorはスキン)
color → スキン
background-color → スキン


赤いボタンを青いボタンに変更する際は、btnのクラスはそのままで、
btnRedのクラスを、btnBlueなどに変更して使う。