【liタグの改行】リスト内の好きな場所で改行する方法４つ。

HTMLのリスト（liタグ）内の好きな場所で「改行」を行う方法です。

改行には<br>タグを使う方法が定番みたいですが、非推奨説などもあり、僕自身あまり使いたくなかったのでその他の改行方法を調べました。

WordPressならエディターで改行するだけで改行できるようですが、別途CSSの疑似要素などを使って改行する方法もご紹介します。

リスト要素内に使えるタグは限られており、pタグなどを挿入するのはNG！

この記事の目次

リスト（liタグ）内で改行する方法

リストの途中で改行したいと思うことは意外と多いはずです。リスト内のテキストが長くなりすぎたり、リストを２行に分けて下段に補足を入れたい場合などなど...

具体的には以下のようなイメージ。

リスト（liタグ）内で改行したい！

早速ですが【HTMLのリスト（liタグ）内の任意の箇所で改行を行う方法】としてこの記事で紹介する方法は以下の４つです。

WordPressエディターの改行を入れる方法
<br>タグを入れて改行する方法
CSSの疑似要素（::after、::before）を使って改行する方法
CSSのdisplay:blockプロパティを使って改行する方法

WordPressを使っている人なら１の方法が１番簡単で分かり易いと思います。
その他の方や、何か理由がある方は３の方法をお勧めします。

ケースバイケースなので何とも言えませんが、個人的には<br>タグを使って改行する方法は少し古く、HTML的にも美しくないかな～と思っています。
では早速順番に見ていきましょう・ｗ・

リスト内の改行方法１．WordPressのエンター

CMSにWordPressを使っている方は、<li>タグ内で改行したい部分でエンターを押して改行すればOKです。具体的には以下のように書きます。

<!-- WordPressのエディターで改行を入れる例 Shift + Enter -->
<ul>
  <li>１つめのliタグ
  ～改行後のテキスト～</li>
  <li>２つめのliタグ</li>
  <li>３つめのliタグ</li>
  <li>４つめのliタグ</li>
</ul>

ビジュアルエディター（Gutenberg）を使っているなら、

「Shift」+「Enter」

で１行分改行が入ると思うので、それでやりましょう。
（当サイトとWPのデフォルトテーマでも試しましたが、上手くいきました。）

上手くいかない方や、WordPress以外の方は次項に紹介する方法で改行して下さい。

リスト内の改行方法２．brタグを使う

続いて定番とされている<br>タグを使って改行する方法です。

<!-- brタグを使う例 ※brを２回使うとpタグが自動挿入されることがあるので注意 -->
<ul>
  <li>１つめのliタグ<br>
  ～改行後のテキスト～</li>
  <li>２つめのliタグ</li>
  <li>３つめのliタグ</li>
  <li>４つめのliタグ</li>
</ul>

書き方は簡単で、改行したいところに<br>を入れるだけです。
これでも良いのですが、リスト内にbrって...なんか微妙な気もします。

CSSが普及した今はbrタグの使用についても賛否両論ありますしねぇ。
一番ベターな方法ですが、個人的には好きじゃない方法です。

リスト内の改行方法３．CSSの疑似要素を使う

続いて、CSSの疑似要素（::after、::before）を使って改行を入れる方法について。
リスト内の任意の箇所を改行して見せたいならこの方法がシックリきました。

ページのレンダリング時に改行されるのでSEO的にも問題ないかと思います。

ポイント

CSSのクラスを使うので別途style.css等にスタイルを定義する必要があります。

コード例は以下の通り。細かい説明は要らないと思うので省きます。

CSSファイルの記述

/*br_の直後に改行*/
.br_::after {
  content: "\A";
  white-space: pre;
}

HTMLの記述

<!-- CSSの疑似要素を使う例 -->
<ul>
  <li><span class="br_">１つめのliタグ</span>～改行後のテキスト～</li>
  <li>２つめのliタグ</li>
  <li>３つめのliタグ</li>
  <li>４つめのliタグ</li>
</ul>

「直後」ではなく「直前」で改行したい場合は::afterを::beforeに変更すればOK。

この方法は疑似要素での改行なので、リスト内だけでなく他の要素に改行を入れたい時にも使えるので汎用性が高いと思います。

リスト内の改行方法４．display:block;を使う

最後に紹介する方法はCSSの「display:block;」を使う方法です。
liタグ内の改行したい部分をブロック要素に変換する事でも一応改行できます。

この方法は本来「改行」に使う方法ではないと思うので、個人的には非推奨。

CSSファイルの記述

/*liをブロック要素に変換する*/
.li_block {
  display:block;
}

HTMLの記述

<!-- display:blockを使う例 -->
<ul>
  <li><span class="li_block">１つめのliタグ</span>～改行後のテキスト～</li>
  <li>２つめのliタグ</li>
  <li>３つめのliタグ</li>
  <li>４つめのliタグ</li>
</ul>

あまりお勧めしませんが、以下のようにstyleを使って直書きすることもできます。

styleを直書きする例

<!-- styleを直書きする例 -->
<ul>
  <li><span style="display:block;">１つめのliタグ</span>～改行後のテキスト～</li>
  <li>２つめのliタグ</li>
  <li>３つめのliタグ</li>
  <li>４つめのliタグ</li>
</ul>

一応紹介しましたが、この方法を使うなら先述の疑似要素を使う方法の方が奇麗かと思います。

リスト内に改行を入れた様子

証拠と言えばアレですが、実際に試した様子も付けときます。
前述の１～４の方法のいずれの方法を使っても以下のようになりました。

サイト環境（WordPressのテーマなど）によっては、必ずしもこの結果にならないかもしれない点はご了承下さい。

リスト内を２回以上改行したい時

最後にリスト（liタグ）内の任意の箇所で２回以上改行したい場合の補足です。

WordPressのエンターを使う場合や、<br>タグを使った場合、２回改行してしまうと自動的にpタグが挿入される場合があるので注意が必要です。（HTML的に良くない）

というわけで、liタグを２回以上改行したい時は疑似要素を使いましょう。

CSSファイルの記述

/*２回改行するには「\A\A」とすればOK*/
.br_2::after {
  content: "\A\A";
  white-space: pre;
}

HTMLの記述

<!-- 疑似要素で２回以上改行する例 -->
<ul>
  <li><span class="br_2">１つめのliタグ</span>～改行後のテキスト～</li>
  <li>２つめのliタグ</li>
  <li>３つめのliタグ</li>
  <li>４つめのliタグ</li>
</ul>