そんなわけで、自分なりの CSS のデザインのやり方をまとめてみる。
デザインの戦略
デザインを行うにあたっては必ず戦略をたてる。何が正しくて何が間違っているのかを決定していくためには、その拠り所になるものを決めていないと、結果キメラが出来上がってしまいかねない。戦略とは法律に対する憲法のようなもので、法律は絶対に憲法に違反することができないように、デザインはデザインの戦略に服従する。それに違反した場合には、違憲立法審査権を発動できるアーキテクチャをつくらなければ、デザインはいずれ崩壊している。
さておき、複雑なことはあまり考えたくないので、選択するのはだいたい以下の三つの戦略のどれかしかない。
- 独立型
- モジュール型
- 拡張型
どれを選ぶかは都度変わるし、明確な優劣はない。どれも一長一短があって、そこにはデザイナの好みの問題も入ってくる。
それでは以下のように、基本的な構造が同じで、幅や背景だけ違うスタイリングを行うための実際のコードを交えつつ、各戦略を具体的に説明してみる。
各戦略共 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;
}
弱点を補うアーキテクチャ
それぞれに利点と欠点があるので、ガイドラインなどを用意してそれを補う仕組みをアーキテクチャに組み込む必要がある。
まあなんにせよ、万事環境変数に依存する以上、うまくいくときもあればうまくいかない時もある。けれど始めから何も考えなければ、まともな失敗すら出来ないのだから、うまくいかなかったとしても、それよりはいくらかマシなんじゃないかと思う。
]]>
