JavaScript | HTML / CSS 連携：リスト・表組み－ liタグ

JavaScript

2026.06.02

li 要素は「リストの“1項目”を表すパーツ」
ul / ol と li の関係をイメージでつかむ
1. 「箱」と「中身」のセットで考える
li の中には、テキストだけでなく何でも入れられる
CSS と組み合わせて「リストっぽさ」を消す・変える
1. デフォルトの点や番号を消して自由にデザイン
JavaScript と li：配列データから「一覧」を描画する
1. 配列 → li の量産、というパターン
li を使うか迷ったときの判断基準
1. 「これは“一覧の 1 行”と言えるか？」
初心者として「li タグ」で絶対に掴んでほしいこと

li 要素は「リストの“1項目”を表すパーツ」

まずイメージから。

li 要素は、
「ul や ol の中に並ぶ“1つ1つの項目”」 を表すためのタグです。

ul（順不同リスト）＝「箱」
ol（番号付きリスト）＝「箱」
li ＝「箱の中に入る 1 個 1 個の中身」

という関係になっています。

買い物リストの「牛乳」「パン」「卵」
手順書の「1. アプリを開く」「2. 設定を開く」
ナビゲーションの「ホーム」「サービス」「お問い合わせ」

こういう「一覧の 1 行 1 行」が、全部 li の役割です。

ul / ol と li の関係をイメージでつかむ

「箱」と「中身」のセットで考える

リストは必ず「外側の箱」と「中身の項目」のセットで成り立ちます。

外側の箱
順番なしの箱 → ul
番号付きの箱 → ol

中身の項目
そのどちらの箱の中にも入る「1項目」 → li

なので、構造としてはこうなります（あえてタグ名だけで表現）：

ul
- li（1つ目の項目）
- li（2つ目の項目）
- li（3つ目の項目）
ol
- li（1つ目の手順）
- li（2つ目の手順）
- li（3つ目の手順）

ブラウザは
「ul / ol の中に並んでいる li は“リストの項目”なんだな」
と理解して、先頭に点や番号を付けて表示してくれます。

li の中には、テキストだけでなく何でも入れられる

単なるテキストの箇条書き

一番シンプルなのは「テキストだけ」の項目です。

例（概念的な書き方）：

ul の中に
- 「HTML の基礎」
- 「CSS の基礎」
- 「JavaScript の基礎」

という 3 つの li が並ぶイメージ。

リンクを項目にする（ナビゲーション）

ナビゲーションメニューでは、
li の中に a 要素（リンク）を入れるのが定番です。

ul（メニュー全体）
- li（中身は「ホーム」への a）
- li（中身は「サービス」への a）
- li（中身は「お問い合わせ」への a）

CSS で横並びにすれば、
よく見るグローバルナビになります。

画像＋テキストの「カード」も 1 項目にできる

li の中身はテキストだけに限りません。

画像
見出し
説明文
ボタン

などをまとめて 1 セットにして、
それを li として並べることもよくあります。

「カードが横に 3 つ並んでいる UI」なんかは、
裏側では「ul の中に 3 つの li（カード）」という構造になっていることが多いです。

CSS と組み合わせて「リストっぽさ」を消す・変える

デフォルトの点や番号を消して自由にデザイン

ul / ol の中の li は、
初期状態だと「点」や「番号」が付きます。

これを消して、
自分のデザインにしたいときは CSS でこうします。

ul,
ol {
  list-style: none;   /* 点や番号を消す */
  padding-left: 0;    /* 左の余白を消す */
}

その上で、li に対して

nav li {
  display: inline-block;
  margin-right: 16px;
}

のようにスタイルを当てると、
「ただの横並びメニュー」に見えるけれど、
構造としてはちゃんと「リストの項目」になっている、
という状態を作れます。

見た目は自由に変えていい。
意味としては「リストの 1 項目」であることを保つ。
このバランスが大事です。

JavaScript と li：配列データから「一覧」を描画する

配列 → li の量産、というパターン

JavaScript でよくやるのが、
配列から li を量産して ul / ol に追加するパターンです。

概念的な流れ：

HTML 側に ul（または ol）だけ用意しておく
JS で createElement して li を作る
textContent や innerHTML で中身を入れる
append で ul / ol に追加する

コードイメージ：

const todos = ["牛乳を買う", "メールを返信する", "勉強を 30 分する"];
const list = document.querySelector("#todoList");

todos.forEach((text) => {
  const item = document.createElement("li");
  item.textContent = text;
  list.appendChild(item);
});

const todos = ["牛乳を買う", "メールを返信する", "勉強を 30 分する"];
const list = document.querySelector("#todoList");

todos.forEach((text) => {
  const item = document.createElement("li");
  item.textContent = text;
  list.appendChild(item);
});