【HTML/CSS】リストの最後(最初)の「border」だけ消す方法!わかりやすく解説!

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「リストの最後(最初)の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」(上)、「border-bottom」(下)はどちらでも大丈夫です…!
今回の例では「border-top」(上)を使用していきます。

ここの状態からネガティブマージンを使用していきます…!

ネガティブマージンを使用した状態

先ほどの「CSS」のコードの「ul」に対して

overflow: hidden;
li」に対して
margin-top: -1px;

というコードを追加していきます。

※「-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」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました