HTML+CSS
Templating

Takeshi Takatsudo (mail) @2010.06.12

HTMLテンプレートを作るのは簡単？

そこまで簡単じゃないかもしんない

じゃあどうするか

/

リセット

とりあえずリセットする

言わずともがな。
有名なモノをベースにすることで、
赤の他人が理解しやすくなる。

詳細度を使うな

body div .hoge .boo div p em span{ /* stronger? */ }
html div .hoge .moo .boo div p span{ /* stronger? */ }

継承を理解する - 1

本当はおたまじゃくしだけど

継承を理解する - 2

<p>親</p>
<p class="hoge">子供</p>

p{ color:red; }
p.hoge{ font-size:0.4em; }

p.hogeも色は赤。p.hogeは、pのスタイルを継承している。
簡単！

継承を理解する - 3

とても簡単で強力で素晴らしいが、
注意しないと、CSSではこれがあらゆるところで発生する。
なので、基本的にこれを発生させないように意識して作る。
なぜなら、あっという間にめちゃくちゃになるから。

p.hoge{
    border:none; /* overwrite */
    padding:0; /* overwrite */
    margin:0; /* overwrite */
    background: red; /* I need only this sob. */
}

CSSは、管理性の面で「へぼい」。へぼいから慎重にする。

モジュール化 - 1

まず、エリアを作る。

モジュール化 - 2

中身はモジュールが並ぶだけにする。各モジュールは、
それぞれの名前をクラス名として持つ。

モジュール化 - 3

モジュール名のクラス起点で全てのスタイルを書く。全部そうしておけば詳細度がどうとか考えなくていい。（カプセル化）

<div class="myModule">
    <h2>woo foo <span>foo bar</span></h2>
    <p>mogemoge fugafuga</p>
    <div><img /></div>
</div>
.myModule{ margin:0 0 20px; }
    .myModule h2{ border:1px solid blue; }
        .myModule h2 span{ font-size:80%; }
    .myModule p{ border:1px solid red; }
    .myModule div{ text-align:center; }

モジュール化 - 4

画像はそのモジュール名のディレクトリに入れる。

/common/imgs/myModule/bg1.gif
/common/imgs/myModule/bg2.gif
/common/imgs/myModule/bg3.gif
/common/imgs/myModule/btn1.gif
/common/imgs/myModule/btn2.gif

そうしないと、ある画像がどこで使われてるか分からなくなるので、「一度置いた画像は二度と削除できない」
モジュール間で共通の画像が現れたら、別のディレクトリにまとめる等して整頓する。

モジュール化 - 5

モジュール化 - 6

でも p に全部下マージン欲しくない？

おお、そうしましょう
→まぁリセットの一部と考えられるよね。
→でもそれ、パーツ増えた時にそれ打ち消すよね。
ダメ、ゼッタイ
→段落全てに mod-p って振ってるんだけど。
→パーツ追加楽だわ。

いずれも長所と短所がある。どうするかは要件から判断する。「クライアントが手動で更新」＆「パーツが少ない」→pに直接スタイル。パーツが多い→モジュール化。等。

モジュール化 - 7

WYSIWYGとかどーすんのよ

→WYSIWYGで編集できるエリア＝WYSIWYGモジュール

.wysiwyg h2{ padding:0 0 8px; }
.wysiwyg h3{ padding:0 0 8px; }
.wysiwyg h4{ padding:0 0 4px; }
.wysiwyg p{ padding:0 0 16px; }
.wysiwyg ul{ padding:0 0 8px; }
.....

JavaScriptとかでグローバル変数
使いまくったりしませんよね普通。
CSSにおける要素の扱いも変数と同じようなものでは？

classの順番でモジュールを拡張

下のpは、.hoge適用後に.largerが適用される。

<p class="hoge larger">テキスト</p>
.hoge{
    border: 1px solid red;
}
.larger{
    font-size: 120%;
}

ちょっとfont-sizeを上げたい時、text-align:rightとしたい時、width:100% としたい時など、便利クラスを用意しておくと楽。

名前空間的な接頭辞 - 1

モジュール化を大きく助けるネーミングルール。

.area-header /* エリア */
.area-main
.mod-navBox /* モジュール */
.mod-p
.mod-ul
.mod-navList
.ex-font-larger /* 便利クラス */
.ex-font-smaller

名前の衝突を極力防ぐ。全てのスタイルが、接頭辞を含むクラスを起点として指定されている状態を作れば、モジュール内で、ハイフンを含まない全ての単語をクラス名として利用可能になる。

名前空間的な接頭辞 - 2

自分のスタイルがどこに書かれているかを明確にできる。

<div class="mod-navBox">
    <h2>hogehoge nav box death</h2>
    <p>yes nav box I am.</p>
    <ul>
        <li><a href="#">navnav</a></li>
        <li><a href="#">navnav</a></li>
        <li><a href="#">navnav</a></li>
    </ul>
</div>

liに適用されているスタイルは .mod-navBox を探せばいい。

bodyクラスでの分岐

bodyにclassを付けてそこを起点に条件を分岐。

<body class="layout-2col">
<body class="layout-1col">
body.layout-2col .area-main{ width:500px; float: left; }
body.layout-2col .area-sub { width:250px; float: right; }
body.layout-1col .area-main{ width:750px; }

注意点：
影響がでかい。先に言及した複雑な継承関係を作りやすい。
向こうでコピーしたものがこっちでは別の見栄えになるの？という複雑なことを起こす可能性がある。使い方は慎重に。

ナンバリングに悩まない

mod-navBoxを作った時、
mod-navBox2が現れるかもしれないから
mod-navBox1としておいた方がいいかしら？

解答例：
1個目のモジュールには番号を付けないルールにすればいい。
どんなものだってバリエーションが増える可能性がある。
増えるか増えないかは、その時には分からない。
全部に番号を1から振るか、1は振らないかのどちらか。 

.mod-navBox{ ... }
.mod-navBox2{ ... }

テンプレートを先に作る

具体的なページをコーディングしながら
CSSの設計を行ってはいけない。

共有する

ドキュメントの無いルールは伝わらない。
ルール化したものをドキュメント化する。

確認する / 提案する

HTML+CSS設計上でつまづく問題は、コーディング以前での何かが原因でそのようになることもある。

全員が全ての領域に置いてプロなわけが無い。自分が設計していないにしろ、HTMLを組む者は自然と設計に目が向くのだから、気付いた点があれば指摘するのも役割。

/

Happy Templating!

See also...

0 / 0