2xup.org

『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度

前回の記事で、コンポーネントする方法としてひとつの class に集約するという方法をとっていましたが、それではそもそも見た目重視のマークアップになってしまい HTML の構造化と、CSS で見た目制御するということについて本来の目的と離れた方向性であるというご指摘をいただき、考えを改めてみました。

単にclass名を変更するだけでは状況は大差ないような気がします。問題は、「よく使うスタイル定義の組み合わせ」をコンポーネントとしてまとめるのはいいとしても、それを或る一つのclass名に集約することなのではないかと思います。

HTMLのclass属性はスタイルシートのセレクタとしても利用されますが、より汎用的には、要素を分類するためにあるものだと考えます。なので、class名を付けるときは見た目に則したものではなく、「文書中でどのような役割を持つのか」という文書構造に則した名前をつけるべきかと思います。

こちらの意見には本当に納得といいますか、なんというか、きちんと構造化された HTML を書くには CSS で装飾する事を先行して考えるのではなく、まずは HTML できちんとした文書を用意し、それに装飾を加えるという考えを持たなければ…。と考えていたのにCSS でよく使う装飾定義をコンポーネントとしてまとめるではまったくそれを意識できない内容になっていることを情けなく思いました。

ポジティブな視点で言うと、パブリッシュして本当に良かったと言えます。情報の発信・取得に関して意識していることでも書いたように、提案だけでなく実践して共有したり、知っている。と思い込まないという意識を持っていたおかげで北村さんをはじめたくさんの方にフィードバックをいただき、大切な事に気づくことができました。

2xup.org の HTML をもう一度見直し、書き直した現在の component.css へのリンクも用意しておきます。左側に寄せた画像の右側にテキストを流し込む部分に関しては、tobetchi さんにいただいたフィードバックを含め、もう一度考え直してみたいです。

順不同、序列リストをインライン表示

順不同リスト (ul) または序列リスト (ol) をインライン表示させたい場合はその装飾を与えたいリストに対して以下のような装飾を定義します。

{ 
  display: inline;
}

リスト項目 (li) のマージンなどの指定は、分割管理しているテーマ CSS で行います。また、入れ子になったリストをインライン表示させたい場合は、以下のような装飾を該当するリストに与えます (2xup.org タイトルの下にあるナビゲーションを例にします)

ul.meta li ul {
  display: inline;
  margin: 0;
  padding: 0;
}

順不同リストをタブナビゲーションのように表示

順不同リストをタブ型のというか、横並びでテキストではなく領域でクリックできるメニューとして利用したい場合は、装飾を与えたいリストに対して以下のような装飾を定義します。2xup.org でも、タイトルの次にあるナビゲーション、個別記事ページのコメント・トラックバックへのリンク部分で利用しています (2xup.org タイトルの下にあるナビゲーションを例にします)

ul#navigation {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#navigation li {
  float: left;
  margin: 0;
  padding: 0;
}

ul#navigation li a {
  display: block;
  margin: 0;
  padding: 0;
}

* html ul#navigation li a {
  display: inline-block;
}

この装飾には合わせて俗に言う clearfixを定義します。2xup.org のソースコードなどを参考にしてください。

俗に言う clearfix

俗に言う clearfix も同じように、該当する部分のセレクタを対応させる方法で行いました。このスタイル定義を利用すると <div style="clear: both;"></div> や、<br clear="both" /> という浮動体に隣接する流れの制御を行う為だけに利用される要素の必要なく、制御することができます。装飾は以下のようになります。

ul#navigation:after {
  content: ".";
  visibility: hidden;
  clear: both;
  display: block;
  height: 0;
}

ul#navigation {
  zoom: 1;
  margin-bottom: 3em;
}

この装飾の定義は構造のマークアップなしでフロートをクリアする方法を参考にしました。zoom というプロパティは Internet Explorer の独自拡張のようで、こちらはNew clearing method needed for IE7? への Lachlan Hunt 氏のコメントを参考にしました。

元々考えていたメンテナンス性とかは?

実は一つの class に集約するよりも、class 付けを行った方が後で修正が発生した場合のフローが簡単になりました。よく使う装飾の基本的な部分は既に component.css に定義されているので、まずはそれを頭からとっぱらい構造化された HTML を用意することができますね。あとは構造化された HTML をどのように装飾するのかを考え、それに合わせてコンポーネントとして装飾をまとめた CSS ファイルの各定義にセレクタを対応させていけば良いわけです。装飾に関するデバッグを行う際もこちらの方が作業は簡単に感じました。

今回もいただいたフィードバックのおかげで良い勉強になりました。これからもパブリッシュを続けたいと強く感じました。

2 Comments

2007年1月28日 17:17

本文中の「feedbacks」という表記は英語の「feedback」が不可算名詞なので誤りだと思います。

# 「trackback」という Six Apart の造語にも同じ法則が適用されるかどうかは定かではありません

kaminogoya2007年1月29日 00:44

> 哀さん

細かい所までご指摘いただきありがとうございます。

feedback が不可算名詞だということは存じておりましたが、不可算名詞は『a feedback』などとしないものだと思っていました。
feedbacks という表記については検索などしてみたのですが、

Biological systems contain many types of regulatory circuits, among which positive and negative feedbacks.

というような feedbacks とした文などを散見したのでそのままにしていました。この表記もまちがっているのですね。

2xup.org で利用している表記については、修正したいとおもいます。

ありがとうございました。