ブログを書いていて、リスト(箇条書き)を「入れ子」で表現したいときが多々ありますよね。

me

でも何故かWordPressのビジュアルモードだとリストを入れ子で表現する方法が全然わからない。。

ということで、リストの入れ子を表現するHTMLの書き方をご紹介します。

この記事でわかること
  • 順不同リストの作り方(HTML)と「入れ子」のやり方
  • 順序付きリストの作り方(HTML)と「入れ子」のやり方

HTMLで順不同リスト(順番を指定しない箇条書き)を作る方法

順不同リストとは箇条書きでも、順番の指定を必要としない箇条書きのことです。たとえば次のようなリストのことです。

  • じゃがいも
  • にんじん
  • きゅうり

リストとして表現する内容の順番を入れ替えても、内容に影響がないものを順不同リストとして定義します。順不同リストをHTMLで記述する場合、次のように書きます。

<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>

このように、順不同リストを表現するには、リスト項目全体を<ul></ul>で囲みます。ulとは、”Unordered List”の頭文字をとったものです。

そして1つ1つのリスト項目は<li></li>で囲みます。<li>要素はいくつでも記述できますし、1つだけでも成り立ちます。

実際の挙動を以下に示すので、HTMLタグと実行結果を見比べてみてください。

See the Pen
zgxrwR
by takajin092 (@takajin092)
on CodePen.

順不同リストを入れ子にするHTMLの書き方

それではいよいよ順不同リストを入れ子で表現する方法をご紹介していきます。

とはいえ、上で解説したhtmlの基本さえわかっていれば、すぐ書けます。具体的には以下のとおりです。

See the Pen
dxPGaB
by takajin092 (@takajin092)
on CodePen.


とくに何か新しいタグや要素が登場するわけではありません。上記のとおり、1つのリスト要素を表す<li></li>の中に、また<ul>~</ul>を組み込んでいけば入れ子ができあがります

上の実行例では、「1.実験の趣旨」から「4.実験の結果」までが入れ子として定義した項目です。

このようにどんどん入れ子を追加できますので、ぜひ使ってみてください。

HTMLで順序付きリスト(順番を指定する箇条書き)を作る方法

次は順番の指定を必要とするリストである順序付きリストの作り方をご紹介します。順序付きリストで表す内容とは、「1.~ 2.~ 3.~」というようにコンテンツの順序が決まっており、入れ替えることができない内容に使用します。

順序付きリストは以下のように記述します。

<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ol>

上記のように、順序付きリストを表現するには、リスト項目全体を<ol></ol>で囲みます。olとは、”Ordered List”の頭文字をとったものです。順不同リストの<ul>が<ol>に変わっただけなので、覚えやすいかと。

以下に順序付きリストの実際の挙動を示します。HTMLと実行結果を見比べてみてください。

See the Pen
eqmJor
by takajin092 (@takajin092)
on CodePen.

順序付きリストを入れ子にするHTMLの書き方

順序付きリストを入れ子にするHTMLの書き方も見ていきましょう。

順不同リストのとき同様、1つのリスト項目を表す<li></li>の中にさらに<ol>~</ol>を記述していきます。

See the Pen
LwEGoo
by takajin092 (@takajin092)
on CodePen.

このように<li>要素の中にどんどん入れ子を作っていくことができます。ブログを書いていてリストを入れ子にしたい瞬間は多くあると思うので、ぜひ活用してみてください。

WordPressでリストを入れ子にする方法【テキストモード:HTML編集】

ここまではゼロからリストを作っていく方法を解説してきましたが、WordPressを使用している場合には、入れ子になる直前までのリストは簡単に作成できます。

以下の手順で入れ子のリストを作っていきましょう。(TinyMCE Advanced導入済み)

まずはWordPressのビジュアルモードでリスト項目を書いていきます。

 

続いてリストにしたい項目を選択し、[番号なしリスト](または[番号付きリスト])をクリックします。

 

これで入力した項目がリストとして表示されるようになりました。

 

後は入れ子にしたい項目を追加していきます。

ここからはテキストモードに変えてください。以下のように、入れ子リストを挿入したい場所に<ul>~</ul>のリスト構造を追加していきます。

 

これで再びビジュアルモードに変更してみると、下画像のようにリストが入れ子になっているはずです。

 

WordPressでリストの入れ子構造を実現させる場合、このとおり入れ子前まではWordPressの機能で作っておき、入れ子にしたい項目だけ後で追加する、という方法が良いかと。

まとめ

リスト(箇条書き)を入れ子で表現するHTMLの書き方を解説してきました。僕は普段WordPressのビジュアルモードで作業していますが、入れ子つきリストを作りたくても、そのやり方がどうしてもわからなかったことと、できればプラグインとか重くなるものは入れたくなかったことで、HTMLを直接いじる方法をとりました。慣れてしまえば、簡単なので、ぜひ活用してみてください。

リスト(箇条書き)の行頭記号を画像で装飾する!

【HTML】リスト(箇条書き)行頭の点を画像で装飾する方法【簡単】

見出しの先頭に画像を挿入する

初心者向け:見出しの先頭を画像で装飾する方法【HTML&CSS】

おすすめのプログラミングスクール

本気でプログラミングを学び、IT企業転職、フリーランスで稼ぎたい方向け。元プログラマーおすすめのプログラミングスクールを4社(無料体験あり)ご紹介します。

プログラマーおすすめのプログラミングスクール4社:無料体験あり!