2012年10月22日 Web制作

【CSS小技】リストの最初だけborderを消す方法

CSS初心者は意外と困りやすいポイントです。 li要素を使うとき、borderで各項目を区切ることが多々あります。
しかしli要素にborder-topを指定するだけだと…

HTML
<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
<li>4行目</li>
<li>5行目</li>
</ul>

CSS
li{
border-top: 1px #000 solid;
}

表示結果

このように一番上のli要素までborderが表示されてしまうため、違和感が残ります。
そこで、CSSに以下の記述を書き足します。

CSS
ul{
overflow: hidden;
}

li{
margin-top: -1px;
border-top: 1px #000 solid;
}

表示結果

li要素を上方向に1pxずらし、ul要素からはみ出たborderをoverflowで隠しています。
使う機会の多いテクニックなので、覚えておくと良し。

管理人