HOME > > > リスト<li>にボーダーを付ける時に一番上のラインを表示させない方法

リスト<li>にボーダーを付ける時に一番上のラインを表示させない方法

リストデザイン

ボーダーを見えなくしちゃいましょう

リストデザインにする際<li>はとても便利です。綺麗に並ぶし、CSSは一括で対応できるし。
ですが、この一括という所が多少面倒で、全ての<li>が同じになってしまいます。
ボーダーを付けると全ての<li>に付いてしまいます。デザイン上では一番上と一番下には付けたくないのにって事ありますよね。
そういう時はCSSでボーダーを表示させない様にしちゃいましょう。

サンプルはこちら

HTMLを書きます

HTMLは<ul><li>で囲むだけです。


<ul class="list">
<li>リスト1です</li>
<li>リスト2です</li>
<li>リスト3です</li>
<li>リスト4です</li>
<li>リスト5です</li>
</ul>

CSSを書きます

「class=”list”」にoverflow:hiddenを入れて、はみ出しちゃう部分を隠しちゃいます。
「li」にはmargin-topを1pxマイナスにする設定をします。
設定は以上です。


.list{
 overflow: hidden;
}

.list li{
 margin-top: -1px;
 border-top: 1px dotted #ea5576;
}

最後に

一番上だけじゃなく、bottomに変えれば一番したのボーダーを非表示にできます。 デザインに合わせて使い分けるとより良いと思います。


.list li{
 margin-bottom: -1px;
 border-bottom: 1px dotted #ea5576;
}

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.04.05