Top

文字下げを考慮したリストマークはflexと疑似要素で作るのが良いと思う

CSS の li 要素にあるリストマークプロパティは現状使いにくいのですが、リストマーク的なものを疑似要素とflexを使って作る方法です。

text-indent を駆使して昔はやってましたが使わずとも文字下げ可能です。

list-mark

flexと疑似要素を用いたリストマークのサンプル

まずはサンプルです

サンプル1

  • テスト文章
  • テスト文章
  • テスト文章
  • テスト文章

HTML

<ul class="markList">
  <li class="markListItem">テスト文章</li>
  <li class="markListItem">テスト文章</li>
  <li class="markListItem">テスト文章</li>
  <li class="markListItem">テスト文章</li>
</ul>

CSS

.markListItem {
  display: flex;
  align-items: baseline;
  margin: 0 0 5px;
}

.markListItem::before {
  content: "●";
  color: #cc3b3b;
  margin: 0 5px 0 0;
}

このサンプルではわざわざ flex 指定をしてあげる必要はないのですが、リストの文章が長くなり、改行が生じるときに効果を発揮します。

サンプル2

  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章

flex を指定してあげることでリストマークと文章が横並びになり、リストマークの下に文章が入りません。align-items を　baseline に指定してあげることで行の先頭にリストマークが来ます。

flex を指定してあげないと、以下のようなかっこ悪い見た目になります。

サンプル3

  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章

CSS

.noFlexListItem {
  margin: 0 0 5px;
}
  
.noFlexListItem::before {
  content: "●";
  color: #cc3b3b;
  margin: 0 5px 0 0;
}

かっこわるいです。

昔やっていた text-indent での文字下げはフォントによってはずれるのであまりよくないです。

スポンサーリンク

番号付きリストなども

疑似要素のカウンターを使ってあげれば番号付きリストも簡単に作れます

サンプル4

  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章

CSS

.numberList {
  counter-reset: number;
  }
    
.numberListItem {
  display: flex;
  align-items: baseline;
  margin: 0 0 5px;
}
    
.numberListItem::before {
  counter-increment: number;
  content: counter(number)".";
  margin: 0 5px 0 0;
  flex-basis: 32px;
  flex-shrink: 0;
}

自動で番号が入ります。文字下げもちゃんと出来ています。

番号が二桁などになることを考慮すると、flex-basis または　width で幅を指定してあげたほうが文字下げの幅がそろってきれいです。

サンプル5

  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章
  • 改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章改行が出るぐらい長めのテスト文章

リストマーク以外でも

li 要素に限定せずに何でも使えます。

サンプル5

こういう米印がちゃんと文字下げで来てないとかっこ悪いと思うのです・・・こういう米印がちゃんと文字下げで来てないとかっこ悪いと思うのです・・・

CSS

.alertMark {
  display: flex;
  align-items: baseline;
}

.alertMark::before {
　content: "※";
  margin: 0 5px 0 0;
}

文字下げのされてない米印ほどかっこ悪いものはないです。

まとめ

文字下げというよりはただ単に flex で横に並べてるだけなのですが、指定次第で文字下げになるので便利です。

米印なんかは面倒になってテキストで書いちゃうこともあるかもしれませんが、それだと文字下げは起こりませんしマークアップ的にどうなのかというのもあるので、この方法が今のところベストなのではないかと思っています