ちょっとだけ凝ってる下線つきリストを作る3つの方法 - 牛丼デザイナーのときめきデザイン

ども、ぽてこです。

最近、体に脂がノってきて……秋だなぁと感じます。
体重の変化はないのですがね。。。
さすがに危機感を感じたので、テニスを始めようと思い体験レッスンに行ったのですが、足を怪我してしまいました。
しかもなかなか治りません。

そんなぽてこですが、今日も元気にブログを書いていきます！

下線つきリストが作りたいよ。

下線のついたリストって、結構作る機会が多いと思います。

f:id:moriyamakuru2:20151008124755p:plain
こんな感じ。

ただ単純に下線をつけるだけなら簡単なのですが
画像のように、一番上の要素は下線のみ、一番下の要素は下線なし、という指定があった場合は工夫が必要になってきます。

class名を追加してborderを取り除いちゃう。

li要素にborder-topを指定し、一番上のli要素だけにclass名を追加してborder: none;にする方法。

コーディング初心者でもすぐ思い浮かぶ方法だと思います。
ぽてこもいつもこれを使っていました。

【HTML】

<ul>
  <li class="border_none">10月8日　今日のご飯は牛丼でした。</li>
  <li>10月7日　ブログをリニューアルしました</li>
  <li>10月6日　デザインたのしいです。</li>
  <li>10月5日　コーディングも割と好きです。</li>
  <li>10月4日　ぽてこです。</li>
</ul>

【CSS】

.li {
  border-top: dotted 2px #cecccd;
  list-style: none;
}
li .border_none {
  border: none;
}

【私的メリット】
・頭を使わずにできる。
・複数のStyleを適用することができる。
・2番目のli要素だけに適用などもできる。

【私的デメリット】
・HTMLソースが少し汚くなる。
・class名を増やしすぎると混乱する。

overflow: hidden;を使って見えなくしちゃう。

裏技的な使い方ですが、overflow: hidden;を使う方法もあるみたいです。

liにネガティブマージンをかけて、わざとulの箱からはみ出させます。
そして、そのはみ出した部分を見えなくするためにulにoverflow: hiddern;をかけると…あら不思議。
線が見えなくなっちゃいますぜ。
…という技。

ネガティブマージンかける分がちょこっとずれちゃうので、heightの指定があるときは少し注意が必要かも。

【HTML】

<ul>
  <li>10月8日　今日のご飯は牛丼でした。</li>
  <li>10月7日　ブログをリニューアルしました</li>
  <li>10月6日　デザインたのしいです。</li>
  <li>10月5日　コーディングも割と好きです。</li>
  <li>10月4日　ぽてこです。</li>
</ul>

【CSS】

ul {
  overflow: hidden;
}
li {
  margin-top: -2px;
  border-top: dotted 2px #cecccd;
  list-style: none;
}

【私的メリット】
・HTMLソースが綺麗。
・意味が理解できれば意外と簡単。
・:first-childに対応していないブラウザでも使える。

【私的デメリット】
・ネガティブマージンを使うのでheight指定があるときは少し注意が必要。

擬似要素:first-childを使ってborderを消しちゃう。

:first-childは、親要素のなかで一番最初にでてくる子要素にStyleを適用してくれる擬似要素です。

li要素に擬似要素をつければいいだけなので、訳あってulにoverflow: hidden;が使えないときなどにも使えるかも。
後から見返したときにわかりやすい方法だなと思います。

【HTML】

<ul>
  <li>10月8日　今日のご飯は牛丼でした。</li>
  <li>10月7日　ブログをリニューアルしました</li>
  <li>10月6日　デザインたのしいです。</li>
  <li>10月5日　コーディングも割と好きです。</li>
  <li>10月4日　ぽてこです。</li>
</ul>

【CSS】

li {
  border-top: dotted 2px #cecccd;
  list-style: none;
}
li:first-child {
  border : none;
}

だけど、:first-childは柔軟性に足りるかも。。。

ただし、子要素が複数種類ある場合。

たとえば…

<div>
  <p>子要素１</p>
  <p>子要素２</p>
  <span>子要素３</span>
  <span>子要素４</span>
  <span>子要素５</span>
</div>

この場合、一番最初に登場するspanタグに擬似要素をつけようとしても出来ないのです。
試しに、div span:first-child { border: none; } と記述してみたら、何も適用されずに泣きました。
わかってはいたけどちょっと寂しいぽてこです。

正しい記述は div p:first-child { border: none; } ですな。
divは省略可能です。

結局、どれを使えばいいのか。

3種類の方法をご紹介しましたが、どれを使えばいいのか悩みますよね。
なので、自分的にこの方法ならこの時に使うだろうってのをまとめてみました。

【classを追加する方法】
・一番上以外にもStyleを追加する可能性があるとき。
・複数のStyleを追加しなければいけないとき。

【overflow: hidden;を使う方法】
・borderが見えなければいいというだけのとき。
・ulタグに何かしらのStyleを適用させているとき。

【擬似要素を使う方法】
・li要素だけで完結させたいとき。
・要素にStyleを適用させたことを一目で確認できるようにしたいとき。

以上、自分のお好みに合わせて使ってみてくださいね。