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

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

順不同リスト (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 ファイルの各定義にセレクタを対応させていけば良いわけです。装飾に関するデバッグを行う際もこちらの方が作業は簡単に感じました。

related bookmarks (del.icio.us)