2xup.org

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

北村曉さんよりコンポーネントにまとめる際、それを或る一つのclass名に集約するという方向性についてご指摘いただきました。この記事をご覧いただく際、是非参照してください。

また、いただいたフィードバックを元にもう一度考えを改めて記事を書きました。

リニューアルの際に CSS の分割管理を実践したのだけれど、その分割した CSS の中によく使う装飾をコンポーネントとして class にまとめた component.css というのを作成しました。コンポーネントとしてまとめることで変化に強くなりメンテナンス性が上がるのだけではなく、同じような装飾をおこなうために何度も良く似たスタイル定義を行うということが解消できるのではないかというのがねらい。

『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度で componet.css の内容を変更しました。以下のリンク先のものは古くなります。最新版を参照願います。また、最新版はこのページの内容を参照しておりません。

よく使うといっても、各ブラウザのデフォルトスタイルの差異を無すのと同時に各要素の基本的な振る舞いを定義した CSS ファイル (NUKAMISO - ぬかみそ CSS) があるので、そんなにコンポーネントが用意されているわけではありません。そう、いまのところ必要な分だけ。必要になれば追加すればよし。また、デザインはテーマ CSS ファイルで行えばよいので、各コンポーネントは完全な装飾を提供しません。この辺りの詳細は CSS を分けて管理する方法を考え実践した様子をまとめた記事に書いています。

また、リンクしている CSS ファイルはそのままご利用いただいてもかまいませんし、カスタマイズの骨子としていただいてもかまいませんので、利用の際にも以下の記事を参考にしてください。

実はまだ内容は足したり消したり、見た目を意識しすぎてしまっているのが気になるので class の名前を変更したり、中身をぐりぐり入れ替えたりと暇を見つけては変更しているのだけれど、ひとまずはこの辺で一度、一部をのぞいてできる事とやり方をまとめておきます。気づいた事があれば是非コメントなどでフィードバックをいただければと思います。

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

順不同リスト (ul) または序列リスト (ol) をインライン表示させたい場合に値が inline の class 属性を付与します。順不同リストでのサンプルは以下になります。

<ul class="inline">
  <li>list 01</li>
  <li>list 02</li>
  <li>list 03</li>
</ul>

要素の中でテキストを画像に回り込ませる

2xup.org でもよく利用しているテキストを画像に回り込ませたい場合に利用します。例えば段落に値が image と left の class 属性を付与すると、その要素にコンテナされた画像は左側に寄り、同じ段落に含まれるテキストは画像の右側に流し込まれす。また、class の値が image と right の場合はその要素にコンテナされた画像は右側に寄り、同じ段落に含まれるテキストは画像の左側に流し込まれす。

画像を左寄せにテキストは画像の右側に
<p class="image"><img src="sample.png" width="150" height="150" />例えば段落に値が image と left の class 属性を付与すると、その要素にコンテナされた画像は左側に寄り、同じ段落に含まれるテキストは画像の右側に流し込まれす。</p>

そもそも画像を段落に含むべきなのか、また class の値とかどうなんでしょう。と悩みもまだあります。是非フィードバックいただきたいです。

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

順不同リストをタブ型のというか、横並びでテキストではなく領域でクリックできるメニューとして利用したい場合は、値が tab の class 属性を付与します。2xup.org でも、タイトルの次にあるナビゲーション、個別記事ページのコメント・トラックバックへのリンク部分で利用しています。

<ul class="tab">
  <li><a href="http://2xup.org/about" title="著者について">about</a></li>
  <li><a href="http://2xup.org/log/" title="2xup.org">archives</a></li>
  <li><a href="http://feeds.feedburner.com/2xup" title="Subscribe to this blog feed">Subscribe to This Blog Feed</a></li>
</ul>

リスト項目 (li) に アンカー (a) が内包されている必要があります。序列リスト (ol) で同じ装飾を行う考えは今の所ないので外しています。

その他の定義やあれこれ

この他には俗にいう clearfix や display: none; とかしているのや検索フォーム周り、サイトでよく使うテキストの装飾なども含んでいます。clearfix に関して参考になるページへのリンクを用意しておきます。

またこの記事を書く少し前までコンポーネントとして用意していた定義リスト (dl) で定義用語 (dt) と定義記述 (dd) を並列に並べるものは、幅などに制限があるため component.css では定義せず、テーマ CSS で定義するようにしました。表のように見せたいという時は書く内容が表ならば、表 (table) を使うべきですね。

この方法で参考になるサイトへのリンクも用意しておきます。どちらも例と説明がしっかりしていて良い見本になりました。

5 Comments

kazu2007年1月26日 09:48

表のように見せたいという時は表 (table) を使うべきというのは、やや違和感を覚えました。視覚的にどう表現するか次第でマークアップが変わる、とお考えですか？

kaminogoya2007年1月26日 10:01

> kazu さん

ご指摘いただきましてありがとうございます。
こちらは僕の表現の問題です。書く内容が表組なのに、table はいけない的な考えで定義リストを使って表のように見せる。というような事ではなく、表は表で table 要素を利用するべきですね。というお話でした。うまくフォローできているかわかりませんが、少し書きなおしてみました。

実際に利用している class 名など、まだまだ改善点は多いですが、ぜひご意見をいただければ幸いです。

tobetchi2007年1月26日 16:55

IEでは「.image.left」のような指定方法に不具合があって、
最後のclassしか反映しなかったと記憶しています。(IE7は未検証)

例えば
.image.left { }
.table.left { }
.left { }
これらの指定が同等に扱われるのです。

なのでclassの命名は「image-left」のようにしたほうが良いと思います。

MTのテンプレートではclass="module-search module"と、一見冗長なclass名になってますが、IEの不具合が理由じゃないかなと勝手に思っています。

kaminogoya2007年1月26日 18:10

> tobetchi さん

情報いただきまして、ありがとうございます。
実際に試してみたところ、いただいた情報どおりの結果になりました。
試したファイルは以下になります。

複数のクラス指定のテスト

つまり、複数の値を持つ class 属性に対して、CSS のセレクタで .foo.bar { } という風に指定すると、後にある .bar のみが認識されるということなんですね。仮に bar という値が foo と共に指定されていない class 属性を持つ要素があった場合、意図しない結果になりますね。

大変参考になりました。
class の値にも違和感を感じていたこともあり、いただいた情報を元に是非調整したいとおもいます。

また、Windows IE7 ではこちらの問題は解決していました。

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

tobetchi2007年1月27日 18:14

こちらこそIE7で動作検証をしていただき、ありがとうございます。