みなさんこんにちは！おさかなです！
今回は「リストの最後(最初)のborderだけ消す方法！」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・「リストの最後(最初)のborderだけ消す方法」を知りたい方
・borderの扱いに慣れたい方
・HTML/CSSを勉強中の方
こんな感じのリストを作りたい！
普通にリストを作成して、「border-top」を付けるとこんな感じで一番上の線まで表示されてしまいます…！
「border-bottom」の場合も同じように、一番下に下線が出来てしまいます。
↓こんな感じで、「一番上と一番下のborderが消えているようなリスト」を作りたいと思っている方に向けて、特定の線の消し方をご紹介していきます…！
一番上(または下)の線だけ消す方法
方法1: ネガティブマージンを使用する！
「ネガティブマージン」とは、かんたんに言うと「margin」に「マイナスの値」を使用することです…！
これを利用して、線をマイナスにすることで見えないようにする！という方法です！
ネガティブマージンを使用する前の状態
HTML
<body> <ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> </body>
CSS
ul {
list-style: none;
}
li {
border-top: 1px solid #ccc;
}
今回の例では「border-top」(上)を使用していきます。
ここの状態からネガティブマージンを使用していきます…！
ネガティブマージンを使用した状態
先ほどの「CSS」のコードの「ul」に対して
というコードを追加していきます。
※「-1px」の部分は消したい線の長さのpxに合わせてください。
※「margin-bottom」を消す場合は、「margin-bottom: -1px;」のように表記すれば大丈夫です…！
HTML
変更なし
CSS
ul {
list-style: none;
overflow: hidden;
}
li {
border-top: 1px solid #ccc;
margin-top: -1px;
}
方法2: 否定疑似クラスを使用する！(準備中)
「方法1」の場合、「リスト全体が1pxずれてしまう」というデメリットがある為、レイアウトを崩さずに、線を消す方法としては「方法2」の「否定疑似クラス」を使用する法がオススメです…！
こんな感じで、無事にきれいに線を消すことができました…！
(やったー！！)
これでリストの見栄えも良くなると思います！
おつかれさまでした…！☕
感想・まとめ
今回は「リストの最後(最初)のborderだけ消す方法！」について、書いていきました…！
いかがだったでしょうか？
HTML/CSSを勉強中の人はかなり参考になったのではないかと思います…！
borderは慣れれば使いこなすことができるので、おさかなと一緒に1歩ずつがんばっていきましょう～！
おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！
それでは今回はこの辺で！
ここまで読んでくださり、ありがとうございました！
おさかなでした！
【おさかなび-osakanav-】では、この記事の感想！おさかなへの応援メッセージ！おさかなに聞きたい事、質問！記事にしてほしい内容！などを大募集中！
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください！
