HTML

【図解付き】HTMLで複数種類の箇条書き・リストの実装【入れ子含む】

初心者
初心者

HTMLでリスト作りたいんだけどどうやるんだろう?

初心者
初心者

入れ子なリストって作れるのかしら?

今回はHTMLでのリスト(箇条書き)の作り方を解説します。

また、単純なリストだけでなく、入れ子(ネスト)構造なリストの作り方も解説するので、入れ子リストの作り方を知りたい人にとっても参考になる記事となります。

この記事を読むことで次の内容がわかるようになります。

この記事でわかること
  • HTMLでのリスト(箇条書き)の作り方
  • 順序付けのリストと番号なしリストの作り方
  • 入れ子(ネスト)構造のリストの作り方

また、今回の記事は以下の学習コンテンツにあるスライド内容を詳しく解説したものになります。スライドと合わせて読んでいただくことでより理解していただけるかと思います。

あわせて読みたい
HTMLのさまざまなリスト表示(箇条書き)のやり方を覚えるHTMLでリストを作るにはulタグ、olタグ、liタグが使います。この記事では単純なリストの作り方だけでなく、入れ子構造のリストの作り方も解説します。HTMLの初心者だけでなく、入れ子構造のリストを作ったこと無い方にも向けて書きました。...

それでは、次の内容で話を進めていきます。

この記事の内容
  • 順序付けリスト
  • 番号なしリスト
  • 入れ子(ネスト)構造のリスト

順序付けリスト

順序付けリスト、つまり「1, 2, 3」と数がついているリストを作るためには「olタグ」と「liタグ」を利用します。

ol」は「ordered list」の略で、その名の通り「順序付けされたリスト」という意味です。

li」に関しては「 list item」の略で、そのまま「リストアイテム」という意味になります。またこのliタグに関しては後ほど説明する「番号なしリスト」でも利用します。

実際に次の画像を見ながら解説します。(画像をクリックすると新しいタブが開き大きな状態で確認できます。)

olタグを使ったサンプルコードとその結果olタグを使ったサンプルコードとその結果

画像のコードが読みづらい場合は、以下のリンクからコードを確認することも出来ます。

上の画像の右側部分のコードではolタグを利用しているのがわかるかと思います。olタグを使った結果上の図の赤枠のように「1, 2, 3」と順序付けされた状態でリストが表示されるようになります。

また、実際にリスト表示される項目liタグを使って表示します。

上の画像でいうと「1つめのアイテム」「2つめのアイテム」「3つめのアイテム」がリスト表示されている項目になり、liタグで囲われているのがわかるかと思います。

このliタグはリスト表示される項目に使われるので、順序付けリストだけでなく、番号なしリスト、入れ子構造のリスト全てで利用します。

番号なしリスト

番号なしリスト、つまり「1, 2, 3」と数がついていないリストで、数の代わりに「」がリストの先頭につきます。

番号なしリストを作るためには「ulタグ」と「liタグ」を利用します。

ul」は「unordered list」の略で、その名の通り「順序付けされていないリスト」という意味です。

それでは実際に次の画像を見ながら説明していきます。(画像をクリックすると新しいタブが開き大きな状態で確認できます。)

ulタグを使ったサンプルコードとその結果ulタグを使ったサンプルコードとその結果

画像のコードが読みづらい場合は、以下のリンクからコードを確認することも出来ます。

上の画像のコードを確認すると先程「olタグ」を使っていたところが「ulタグ」になっているのがわかるかと思います。

その結果、olタグを使っていたときには赤枠内は「1, 2, 3」となっていたのですが、ulタグを使うようにしたところ、上の画像の赤枠内のように「」が使われるようになり、番号付けされなくなりました。

そして、olタグのときと同じように、実際にリスト表示される項目はliタグを使って実装されています。

入れ子(ネスト)構造のリスト

最後に、入れ子(ネスト)構造のリストについて説明します。

入れ子構造のリストがどんなものか言葉だけだとわからないかもしれないので、早速次の画像を使って入れ子構造のリストをみていきましょう。

入れ子構造のリストのサンプルコードととその結果入れ子構造のリストのサンプルコードととその結果

画像のコードが読みづらい場合は、以下のリンクからコードを確認することも出来ます。

上の画像の赤枠内に注目してください。赤枠内のコードを見るとliタグの中にulタグが実装されているのがわかるかと思います。(ulタグの代わりにolタグを使うことも可能)

画像中央の出力結果を見ると、「入れ子1つめのアイテム」「入れ子2つめのアイテム」「入れ子3つめのアイテム」が1段右にズレているのがわかるかと思います。

このように、liタグの中にulタグ(もしくはolタグ)を使うことで簡単に入れ子構造なリストを実装出来るのです。

上の画像では1段深い入れ子を作っただけですが、もちろん2段、3段と深い入れ子を作ることも可能です。

まとめ

ここまで話してきた内容をまとめると以下のとおりです。

この記事のまとめ
  • 順序付けリストを作るにはolタグliタグを使う
  • 番号なしリストを作るにはulタグliタグを使う
  • 入れ子構造なリストを作るにはliタグの中でulタグ(もしくはolタグ)を使う

今回の内容は以下の記事のスライドの一部を図(画像)として利用しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLのさまざまなリスト表示(箇条書き)のやり方を覚えるHTMLでリストを作るにはulタグ、olタグ、liタグが使います。この記事では単純なリストの作り方だけでなく、入れ子構造のリストの作り方も解説します。HTMLの初心者だけでなく、入れ子構造のリストを作ったこと無い方にも向けて書きました。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です