CSS の基本設計

だいたい仕事でやっていると、学習の結果が自己完結してしまって、それを後で体系的にまとめたりだとか、説明的に再解釈するというプロセスを端折って次へ進んでしまうということに成りがちなので、それを誰かに説明したりする場合に、言葉にできていない部分が多々みつかって、うまく伝えられないという事態を被る事がある。 そんなわけで、自分なりの CSS のデザインのやり方をまとめてみる。

デザインの戦略

デザインを行うにあたっては必ず戦略をたてる。何が正しくて何が間違っているのかを決定していくためには、その拠り所になるものを決めていないと、結果キメラが出来上がってしまいかねない。戦略とは法律に対する憲法のようなもので、法律は絶対に憲法に違反することができないように、デザインはデザインの戦略に服従する。それに違反した場合には、違憲立法審査権を発動できるアーキテクチャをつくらなければ、デザインはいずれ崩壊している。 さておき、複雑なことはあまり考えたくないので、選択するのはだいたい以下の三つの戦略のどれかしかない。

  • コンポーネント型
  • モジュール型
  • 拡張型

どれを選ぶかは都度変わるし、明確な優劣はない。どれも一長一短があって、そこにはデザイナの好みの問題も入ってくる。 それでは以下のように、基本的な構造が同じで、幅や背景だけ違うスタイリングを行うための実際のコードを交えつつ、各戦略を具体的に説明してみる。

css-designing

各戦略共 HTML の基本構造は変わらないけれど、それぞれ id や class の付け方が変わってくる。 基本的な構造は以下の通り。

<article>
<h1>heading</h1>
<div></div>
<div>
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

<article>
<h1>heading</h1>
<div></div>
<div>
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

コンポーネント型

コンポーネント単位で CSS が完全に分離している。

コードの視認性も高く、追加・削除しても他の影響を受けることがない反面、グラフィックデザインに高いレベルの計画性がなければただ煩雑なだけのコードになってしまう。

HTML

<article id="alpha">
<h1>heading</h1>
<div class="box-a"></div>
<div class="box-b">
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

<article id="beta">
<h1>heading</h1>
<div class="box-a"></div>
<div class="box-b">
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

CSS

#alpha{ background:#DDD; margin-bottom:20px; padding:10px; width:520px; overflow:hidden; }
#alpha .box-a{ background:#000; float:left; width:100px; height:100px; }
#alpha .box-b{ width:380px; float:right; }
#beta{ background:#EEE; margin-bottom:20px; padding:10px; width:820px; overflow:hidden; }
#beta .box-a{ background:#000; float:left; width:200px; height:100px; }
#beta .box-b{ float:right; width:580px; }

モジュール型

モジュール型はコードを特定の色や余白などの単純なスタイルで分離し、その組み合わせで最終的な整形を行う。

拡張性が高く、組み合わせによって様々なスタイルがつくれる反面、ひとつの変更でも影響範囲が大きく、ガイドラインを明文化しそれを徹底しなければ、コードの切り分けに一貫性がなくなってしまうため、返って混乱を招く恐れもある。

HTML

<article class="w-520 gray mgb-20 pad-10 clearfix">
 <h1>heading</h1>
<div class="left black-box w-100 h-100"></div>
<div class="right w-380">
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

<article class="w-820 light-gray mgb-20 pad-10 clearfix">
 <h1>heading</h1>
<div class="left black-box w-200 h-100"></div>
<div class="right w-580">
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

CSS

.clearfix{ overflow:hidden; }
.left{ float:left; }
.right{ float:right; }
.gray{ background:#DDD; }
.light-gray{ background:#EEE; }
.black-box{ background:#000; }
.mgb-20{ margin-bottom:20px; }
.pad-10{ padding:10px; }
.w-820{ width:820px; }
.w-580{ width:580px; }
.w-520{ width:520px; }
.w-380{ width:380px; }
.w-200{ width:200px; }
.w-100{ width:100px; }
.h-100{ height:100px; }

拡張型

拡張型はコンポーネント型とモジュール型のハイブリッドといえる。

基本を独立型で整形しつつ、それをモジュールで拡張していく。

拡張と再利用が容易で、バランスのとれた方法ともいえる。反面依存関係が複雑なため、一部でも無計画になると、コード書いた当の本人ですら依存関係が分からなくなる恐れもある。

HTML

<article class="unit-2col unit-mystyle-a">
 <h1>heading</h1>
<div class="box-a"></div>
<div class="box-b">
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

<article class="unit-2col unit-mystyle-b">
 <h1>heading</h1>
<div class="box-a"></div>
<div class="box-b">
  <p>text text text text text text text text text text text text text</p>
 </div>
</article>

CSS

.unit-2col{ margin-bottom:20px; padding:10px; overflow:hidden; }
.unit-2col .box-a{ background:#000; float:left; height:100px; width:30%;/*default value*/ }
.unit-2col .box-b{ float:right; width:60%;/*default value*/ }
.unit-mystyle-a{ background:#DDD; width:520px; }
.unit-mystyle-a .box-a{ width:100px; }
.unit-mystyle-a .box-b{ width:380px; }
.unit-mystyle-b{ background:#EEE; width:820px; }
.unit-mystyle-b .box-a{ width:200px; }
.unit-mystyle-b .box-b{ width:580px; }

弱点を補うアーキテクチャ

それぞれに利点と欠点があるので、ガイドラインなどを用意してそれを補う仕組みをアーキテクチャに組み込む必要がある。

なんにせよ、万事環境変数に依存する以上、うまくいくときもあればうまくいかない時もある。けれど始めから何も考えなければ、まともな失敗すら出来ないのだから、うまくいかなかったとしても、それよりはいくらかマシなんじゃないかと思う。

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です