HOME > 開発者向けBLOG > Webデザイン >  リストの一番上のborder線を消す

Technology Note 開発者向けBLOG

Webデザイン

リストの一番上のborder線を消す

こんにちは、ゼノフィ渡部です。

リストの一番上のborder線を消す方法をご紹介いたします。

通常、リストで最後の線が必要ない場合は、「 border-bottom」に線を指定して、最後のli要素にクラスを指定しボーダーを消すなどの方法が思い浮かびますが、下記のCSSのように「border-top」で実現することもできます。

12行目ではliに「margin-top: -1px;」と上に対して、1pxマイナスの指定をしています。1pxマイナスすることにより、上方向に移動し、その1px上に移動した分を、親要素であるulに指定した「overflow: hidden;」で要素を超えた分を非表示にしています。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ul.border_top {
  width: 280px;
  overflow: hidden; /* マイナスプロパティで指定された分を非表示に */
  margin: 0;
  padding: 0;
  zoom: 1;
}
 
ul.border_top li {
  list-style-type: none;
  margin: 2px 10px 10px;
  margin-top: -1px; /* マイナスプロパティ */
  padding: 10px 10px 2px;
  border-top: 1px solid #CCC;
}

六つのli要素を記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul class="border_top">
    <li>
        テキスト1
    </li>
    <li>
        テキスト2
    </li>
    <li>
        テキスト3
    </li>
    <li>
        テキスト4
    </li>
    <li>
        テキスト5
    </li>
    <li>
        テキスト6
    </li>
</ul>

サンプルを見ると、本来「テキスト1」の上にあるボーダー線が表示されていないことがわかります。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ul.border_top {
  width: 280px;
  overflow: hidden; /* マイナスプロパティで指定された分を非表示に */
  margin: 0;
  padding: 0;
  zoom: 1;
}
 
ul.border_top li {
  list-style-type: none;
  margin: 2px 10px 10px;
  margin-top: -1px; /* マイナスプロパティ */
  padding: 10px 10px 2px;
  border-top: 1px solid #CCC;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul class="border_top">
    <li>
        テキスト1
    </li>
    <li>
        テキスト2
    </li>
    <li>
        テキスト3
    </li>
    <li>
        テキスト4
    </li>
    <li>
        テキスト5
    </li>
    <li>
        テキスト6
    </li>
</ul>

<

>

PAGETOP