CSS - 複数クラスの組み合わせによるデザインコントロール | Technolog.jp - ICTウェブマガジン

CSS – 複数クラスの組み合わせによるデザインコントロール

  • 2010/01/27
  • カテゴリー:CMS

WordPressなどのCMSで自動生成されるクラスを使用してデザインをコントロールする場合、CSS上での複数クラスの組み合わせは非常に有効な手段です。しかし、ここには幾つかの問題があり、頭を悩ませているデザイナーも少なくないと思います。以下はWordPressを使用した場合の一例になります。

1
2
3
4
5
<ul class="menu">
    <li class="page_item page-item-1 current_page_item"><a href="#" >CLASS1</a></li>
    <li class="page_item page-item-2"><a href="#">CLASS2</a></li>
    <li class="page_item page-item-3"><a href="#">CLASS3</a></li>
</ul>

上記はWordPressでページ一覧(主にメニュー)作成時に使用する「 <?php wp_list_pages(); ?> 」を使用した場合に出力されるHTMLです。 <ul>タグ内が実際の内容ですが、<li>タグ内には最大3つのクラスが存在します。

これをメインメニューと見立てた場合、以下のようなCSSを使用するケースを多く見かけます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.menu {
    padding     : 0;
    margin      : 0;
}

.menu li {
    float       : left;
}

.menu li a {
    width       : 160px;
    height      : 32px;
    text-indent : -9999px;
    line-height : 32px;
    display     : block;
}

.menu li.page-item-1 a {
    background  : url(images/class1-1.png) no-repeat 50% 50%;
}

.menu li.page-item-1 a:hover, .menu li.page-item-1.current_page_item a {
    background  : url(images/class1-2.png) no-repeat 50% 50%;
}

.menu li.page-item-2 a {
    background  : url(images/class2-1.png) no-repeat 50% 50%;
}

.menu li.page-item-2 a:hover, .menu li.page-item-2.current_page_item a {
    background  : url(images/class2-2.png) no-repeat 50% 50%;
}

.menu li.page-item-3 a {
    background  : url(images/class3-1.png) no-repeat 50% 50%;
}

.menu li.page-item-3 a:hover, .menu li.page-item-3.current_page_item a {
    background  : url(images/class3-2.png) no-repeat 50% 50%;
}

ここでのポイントはHTML上で出力された文字を「text-indent」を使用して画像置換していること、そして、マウスオーバーおよびアクティブページに対して別画像を表示させていることです。

「li.page-item-*.current_page_item」がアクティブページに対する指定ですね。複数のクラスをひとつのタグに対して「.」でつなぐことで可能としています。静的ウェブサイトであれば、ユニークなクラス名を付与することができますが、CMSのような動的ウェブサイトではこういったテクニックが必要になってきます。

しかし、ここで大きな問題に直面します。それはIE6のCSS上のバグです。IE7以上およびその他のモダンブラウザでは正常に表示されるのですが、IE6では上記の複数クラスによるデザインコントロールで異常が見られます。この例ではアクティブページに対してCSSの最後で指定した要素「background : url(images/class3-2.png) no-repeat 50% 50%;」がすべてのアクティブページに適用されてしまうのです。

つまり、CLASS1というページが表示(アクティブ)されているときにCLASS3の画像が表示されてしまうのです。

これを回避するにはjQueryが有効な手段なのですが、それについては次回書かせていただきます。