<li>を使用して、改行時にリストアイコンの下に文字列を表示させる方法

2020/10/03

通常のリスト表示の場合

ul,liタグを利用したリスト表示の場合、下記のように改行しても文字列はリストアイコンの右側に必ずきます。

list.html

<style>
  .border-box {
    border: 1px solid black;
    width: 100%;
    padding: 12px;
  }
  @media screen and (min-width: 400px) {
    .border-box {
      width: 380px;
    }
  }
</style>
<ul class="border-box">
  <li>この文章は長い文章を予定しています。このWebサイトはMakitsystemのWebサイトです。</li>
  <li>今日の天気は晴れ。明日の天気は曇り。あさっての天気は晴れになるでしょう。</li>
</ul>

表示結果

この文章は長い文章を予定しています。このWebサイトはMakitsystemのWebサイトです。
今日の天気は晴れ。明日の天気は曇り。あさっての天気は晴れになるでしょう。

文字列がアイコンの下にくる方法を説明します。

改行文字列がリストアイコンの下にくる方法

以下の処理をstyleに適用します。

ulタグ: list-style に none を設定し、デフォルトのリストアイコンを消す。
liタグ: ::before要素を使用し、アイコンを作成する。このとき、displayをinline-blockにする。

HTMLで表すと以下のようになります。

list_under.html

<style>
  .border-box {
    border: 1px solid black;
    width: 100%;
    padding: 12px;
  }
  @media screen and (min-width: 400px) {
    .border-box {
      width: 380px;
    }
  }
  ul.list-root {
    padding: 12px;
    list-style: none;
  }
  li.list-item::before {
    content: "";
    width: 4px;
    height: 4px;
    display: inline-block;
    background-color: #737373;
    border-radius: 50%;
    position: relative;
    top: -4px;
    margin-right: 6px;
  }
</style>

<ul class="border-box list-root">
  <li class="list-item">この文章は長い文章を予定しています。このWebサイトはMakitsystemのWebサイトです。</li>
  <li class="list-item">今日の天気は晴れ。明日の天気は曇り。あさっての天気は晴れになるでしょう。</li>
</ul>

表示結果

この文章は長い文章を予定しています。このWebサイトはMakitsystemのWebサイトです。
今日の天気は晴れ。明日の天気は曇り。あさっての天気は晴れになるでしょう。

リストアイコンを自作し、displayをinline-blockにすることによってリストアイコンの下に文字が来るようになります。

アイコンの種類や大きさなどは仕様に適した形に変更してください。