2009年10月09日

縦で区切るリストの表現(上下にボーダーが無い場合)

こんにちは、馬場です。


今回は前回の続きで、
「縦で区切るリストの表現」の
上下にボーダーが無い場合の対応について
お話しします。






▼縦で区切るリストの表現(上下にボーダーが無い場合)


縦で区切るリストの表現で
リストの上下にボーダーが無い場合は、
ある場合に比べると、
少し考えさせられますよね。
(私だけ?)

いつものように、サンプルをご覧ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div id="wrap1" class="wrapper">
<ul>
<li class="first"><a href="#">あなたは</a></li>
<li><a href="#">イヌ派?</a></li>
<li><a href="#">ネコ派?</a></li>
<li><a href="#">私は</a></li>
<li><a href="#">イヌ派です。</a></li>
</ul>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper {

width:200px;
margin:10px auto;
padding:0 10px;
border:1px solid #71BED9;

}
.wrapper ul {

list-style-type:none;

}
.wrapper li {

padding:13px 10px 10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
.wrapper li.first {

background:none;

}


liの上にボーダーを表示すると
一番上のボーダーが余分に出てしまうことになります。

サンプルのように、一番上のliにclassを設定し
ボーダー(今回は背景画像)をスタイルの上書きで非表示にすれば
対応可能です。
(ボーダーをliの下に付ければ、一番下のliにclassを設定することになります。)


ただ、
「プログラムで書き出すため、classを付けるのは面倒だ。」
という局面にぶち当たるかもしれません。


そんなときは、
下記のサンプルをお試しください。


▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div id="wrap2" class="wrapper">
<ul>
<li><a href="#">犬派の人は、</a></li>
<li><a href="#">猫っぽい正確の人が</a></li>
<li><a href="#">多いと聞きますが</a></li>
<li><a href="#">私は</a></li>
<li><a href="#">猫っぽいですか?</a></li>
</ul>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper {

width:200px;
margin:10px auto;
padding:0 10px;
border:1px solid #71BED9;

}
.wrapper ul {

list-style-type:none;

}
.wrapper li {

padding:13px 10px 10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
#wrap2 {

overflow:hidden;

}
#wrap2 ul {

margin-top:-5px;

}


上記のサンプルは
ボーダーを付けた要素(li)の親要素である
ulにmargin-top:-5pxを付け、
ulの親要素のdiv(以降、親1と呼びます)
にoverflow:hiddenを付けることで
ボーダーをめり込ませて見えなくしています。

親1に、
padding-topが付いている際は
そのpadding分、
さらにmarginをマイナスにする必要がありますので
ご注意ください。


また、
めり込ませているため、
普通にclassを付けて消す対応に比べ
上の開きが小さくなってしまいます。
(上記のサンプルなら、5px分狭くなります。)

1〜2pxのボーダーなら、
あまり問題なさそうですが、
あまりに太いボーダーの場合は、
違いが明らかとなってしまいます。

そんなときは、
デザインにもよりますが、
親1のmargin-topで
開きを調整する等の対応が
必要となりそうです。

今回のようなサンプルの場合は、
親1にborderが付いてしまっているので
margin-topを設定しても、
borderとの間隔は
広くなりません。

親1をさらにdivなどで囲み
その要素にborderの設定を
移す必要がありそうです。


IEを無視して問題ない場合は
(超レアケースだと思いますが・・・)
疑似クラスの「first-child」が使えるので
こんなに苦労する必要はないですね。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 19:41 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。