デザインのための多重入れ子設計を考えてみた

月一更新になりつつあります…。
ネタがないんです。すみません…。

さて、今日はちょっと設計的なものを思いついてみた。

グラフィカルなデザインを実現しようとすると、毎回ネックになるのが内包物や文字サイズ変更に対する縦幅の可変対応。
例えば、周囲に枠線があってさらに上から下に向けてグラデーションがかかっちゃってるような角丸デザインを実現しようとすると、

1. ボックス最下部の角丸直前部分を横長に縦1pxスライスし、それをrepeatさせて、上部からグラデーション終わりまでをスライスしtopに配置、下部の角丸をbottomに配置する3重入れ子
2. 上（もしくは下）から横いっぱいで想定しうる縦サイズにながーくデザインしスライスして、下の画像で閉じる2重入れ子
3. 気にせず1枚画像で。

などが考えられる。無難なのは（１）だろう。
なにしろ中にどんなに長いものが入ろうが対応可能だ。
（２）は小さいサイズならまだしも、サイト全体を包むような巨大なサイズのコンテンツ背景だとどうにもならない。
（３）については話すことは何もありません。
今回は（１）を使う前提でのお話です。

「多重入れ子なんて…」とか「JSで処理すれば？」とか「CSS3でいいじゃん」とか色々ご意見はあるでしょうが、経験上そうそう甘い問題でもなく、どうしても対応しなければならない事が多い問題だと思う。
むしろ無いことが無いんじゃないかというくらい頻出する…。

というわけで、毎度悩むのがDIV要素のID/class名じゃないだろうか。
無駄に3重にしないとできないデザインなんて！！と思ったりもする。
そんなに角丸が好きならデザイナーさんがこのDIVの意味づけを考えてくれたらいいのに！！
マークアップエンジニアは常に命名ルールや要素の意味づけに頭を悩ましている。

さらに、内包する要素がfloatしていた場合にはclearfixを最も内側の要素に入れておかないと、背景が出なくなってしまう。

そこで、そんなデザイン用ブロックの名称を包括的に使い回せないものかと考えた結果、以下のようなXHTMLになった。

XHTML

1. <div id="hoge" class="wrapper">
2.  <div class="wrapperInner">
3.   <div class="content">
4.    <p>コンテンツ</p>
5.   <-- /content --></div>
 <-- /wrapperInner --></div>
6. <-- /wrapper --></div>

この際、最も外側の要素には個別にID（最悪class）を振りたい。
このIDに対してのwrapperやcontentであるというヒモ付けをしているので、これがないと、何の「wrapper」なのか？何の「content」なのか？意味づけができなくなってしまう。

尚、wrapper、wrapperInner、contentと命名してみたが、このあたりは好きな名称にしても良いと思う。

そして、ベースレイアウトに入れるCSSは以下のようになる

CSS

1. .wrapper,
2. .wrapper .wrapperInnner { zoom: 1; }
3.  
4. .wrapper .wrapperInnner .content:after {
5. display: block;
6. clear: both;
7. height: 0;
8. visibility: hidden;
9. content: " ";
10. line-height: 0;
11. font-size: 0;
12. }
13. .wrapper .wrapperInnner .content {
14. display: inline-table;
15. min-height: 1%;
16. zoom: 1;
17. }
18. * html .wrapper .wrapperInnner .content {
19. height: 1%;
20. }
21. .wrapper .wrapperInnner .content {
22. display: block;
23. }

要は最も内側の要素にclearfixを充てただけ。
ついでにzoom: 1;が入っているので、IEの多重入れ子になった場合のバグ対策もできている。

あとは個別に　#ID .wrapper { }　などにスタイルを充てるだけ。
div.wrapperのように要素名を入れていないのは、DIVに固執せずどんな要素にでも対応できるようにするため。
例えば、wrapperに内包する要素がDLだった場合、.wrapper > .wrapperInnner > DL > DT,DDとなるため、div.contentが必要なくなり、DL要素にclass="content"を振ればいい。

このように事前に包括的な入れ子の設計をしておけば、どんなデザインが来ても使い回しで使っていける。
clearfixのためのコード行数も減るし、何よりいちいちこのDIVのclassどうしようかな・・・と悩まなくて良い。
一回でも多重入れ子になりそうなデザイン要素が出てくるのならばどんどん使っていった方が良いだろう。