Home > CSS > XHTML+CSSのガイドライン

XHTML+CSSのガイドライン

  • 2006-04-22 (土) 0:21
  • CSS

最近新しく作るものに関しては(X)HTML+CSSで作るようにしている。感覚的になんとなくこうかなあと模索しながら作っていて、本当はなにが正しいんだろと思ってたらいいタイミングで以下の資料を見つけた。

『CSS Nite Vol.7 Web制作現場の対立を解消する!(X)HTML+CSSガイドライン作り』

を見て感動したので、忘れないうちに気になったところをメモ。

■ビジュアルとテキストのバランスは、サイトの雰囲気などイメージ作り/ブランディングに影響する。何でもテキストにすればよいわけではない。

↑これは一度失敗しました。目立たせたいパーツやSEO的に必要ない箇所は画像でも良いなと。なにごともバランスですが。

ガイドラインの必要性

誰が作っても一定の品質を確保できる
制作チーム、更新チーム、外注、クライアント間での「無駄」の発生が防げる。キーパーソンが抜けても比較的スムーズに穴埋めできる。新しいスタッフが一定の品質のサイト/ページをアウトプットできるようになるまでの期間を短くできる。
社内にノウハウが残る
現場のノウハウを体系化し蓄積できる。

↑これはほんとそう。ガイドラインがあることで作業をモジュール化できるのだ。

基本はdiv要素+id
必ずしもdiv要素ではなく意味的な要素 (p、ulなど) に直接idづけしてもよいが (それが理想)、現場の混乱が予想される場合は「必ずdiv要素でラップし、idづけする」と決めておく。

↑idとclassの使いどころは決めておかないと。

カテゴリーごとにスタイルを変える場合、 「body#shopping …」「body#careers …」といったかたちでbody要素につけたidを頼りにスタイルを設計 (id名はディレクトリ名と同じにしておく)。

↑カテゴリーごとに大幅に違う場合はこれでよいかも。固定レイアウト要素は同じで中身のコンテンツ部分だけ違う場合は、このスライドで言う「div#content」の部分だけ分ければ、まとめて指定する要素が減るので作りやすいと思う。

見出し要素は難しい

見出し要素の理想的な使い方は次のとおり (ISO-HTMLに基づく)。

* h1要素から出現すること
* 途中の見出しレベルを飛ばさないこと

ただし、ページ構成によっては、ある見出しレベルを使うことが躊躇されたり、ページ間で統一的なマークアップルールを設けている場合、このような階層構造を逸脱しなければならない場合もありうる。

↑見出しはほんとに難しい。ページごとに要素の数が違う場合が多いので統一するのは大変。コンテンツを作る段階から構造を意識して作るべきではある。

* 1つのページでh1要素が複数出現しても仕様 (構文) 的には全く問題はない。

↑これを聞いて安心しました。あまり使わないけど。

h1要素では各ページ固有の内容を定義すべき?
とすれば、すべてのページに共通のロゴをh1要素で定義するのは間違いということに (トップページぐらいしか妥当しない)。
では、h1要素でどの内容を定義すべき?

* トップページはロゴ、キャッチフレーズ (キービジュアルにキャッチフレーズを含めている場合はその画像) 、または固有のページタイトル。
* 他のページは固有のページタイトル。

↑なるほど。これはほんとに今日の仕事中に思った。ロゴがh1である必要性は無いわけだ。

idはどのページでも同一の要素タイプでしか利用しないケースが多いが、classは複数の要素タイプで利用する場合もある。そのような場合にだけオープンにしておき、通常はきちんと要素タイプをつけておく。

↑classの使いどころが見極められると、もっとすっきり書けるのにと思いますねほんと。

なるべくツリー構造を丁寧に (子セレクタ的に) 書いておいたほうがよい。CSSを見ただけでツリー構造が把握できるため。

↑誰が見てもわかりやすように。自分でも時間が経つとわからなくなってしまうので。

プロパティの指定順序

Mozilla.orgの外部CSSで示されている順序が参考になる。

1. 視覚整形モデル
2. ボックスモデル
3. 背景と前景
4. フォントとテキスト
5. 生成内容

↑暗黙の了解というか何となく感覚的にはこんなふうには書いてるけど、これもルールが必要。「float、clear、displayなど」>「margin、padding、border」>「font、letter-spacing、align系など」ざっくり言うとこんな順番てことか。

きちんとルールを設定することでクオリティを保ち、かつ効率的に制作をすると。何にでもあてはまりそうな教訓ですね、これは。

※CSS Niteというイベントで使われた資料のようですね。今度ぜひ参加してみたいです。
CSS Nite公式ブログ
「CSS」を中心に、Web標準を取り巻く状況にスポットを当てるマンスリーイベント。
毎月第3木曜日19時からアップルストア銀座で開催。

※この資料を作った益子貴寛氏
Web::Blogoscope: CSS Nite Vol.7 終了

add to hatena hatena.comment (8) add to del.icio.us (8) add to livedoor.clip (1) add to Yahoo!Bookmark (1) Total: 18

Comments:0

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://loconet.web2.jp/blog/archives/2006/04/xhtmlcss.html/trackback
Listed below are links to weblogs that reference
XHTML+CSSのガイドライン from webデザイナーのナナメガキ
trackback from CSS Nite公式ブログ 06-04-23 (日) 19:42

CSS Nite Vol.7、終了しました

第1部では、益子貴寛氏が『Web制作現場の対立を解消する!(X)HTML+CSS…

Home > CSS > XHTML+CSSのガイドライン

Search
Feeds
Meta

Return to page top