低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

リストの最初と最後のborderを表示させないテクニック

リストで項目に上下のborderを指定する際、リスト内項目の最初と最後のborderだけ表示させないテクニックです。

HTML

1<ul class="sampleList">
2    <li>Menu01</li>
3    <li>Menu02</li>
4    <li>Menu03</li>
5    <li>Menu04</li>
6    <li>Menu05</li>
7    <li>Menu06</li>
8</ul>

CSS

1.sampleList {
2    zoom: 1;
3    overflow: hidden;
4}
5.sampleList li {
6    margin-top: -1px;
7    padding: 5px;
8    border-top: 1px solid #666666;
9}

※margin-top: -1px;の値はborder-topの太さに合わせて下さい。

サンプルページ

この方法を使えば、リスト内のliの最初と最後の項目に、上下のborderを消すクラスを指定しなくても、たった数行のCSSだけで対応することが可能です。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ