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

JavaScript

2026.06.02

ul 要素は「順番を気にしない“箇条書きの箱”」
ul の基本構造と「中に入るもの」のイメージ
1. ul は「外側の箱」、中に「項目」が並ぶ
ul が向いている場面・向いていない場面
1. 向いているのは「順番が意味を持たない並び」
ナビゲーションメニューと ul の相性
1. メニューの「一覧」を表現する箱として使う
CSS と組み合わせた ul の見た目カスタマイズ
1. デフォルトの「黒い点」を消してカスタムデザインにする
JavaScript と ul：動的に「一覧」を作るときの定番
1. 配列データからリストを生成する
ul を使うか迷ったときの考え方
1. 「これは“箇条書き”と言えるか？」を自分に聞く
初心者として「ul タグ」で絶対に掴んでほしいこと

ul 要素は「順番を気にしない“箇条書きの箱”」

まずイメージからいきます。

<ul> は
「順番はどうでもいいけど、いくつかの項目を並べて見せたい」
ときに使う“箇条書きの箱”です。

買い物リスト
サイトのナビゲーション
特徴の一覧

こういう「番号はいらないけど、項目を並べたい」場面で登場します。

“u” は unordered（順不同）の略で、
「順番なしのリスト」という意味を持っています。

ul の基本構造と「中に入るもの」のイメージ

ul は「外側の箱」、中に「項目」が並ぶ

<ul> 自体は「リスト全体の箱」です。
その中に「各項目用の要素」が並ぶ、という構造になります。

ざっくりした形だけ書くと、こうです。

<ul>
  <!-- ここに 1 つ目の項目 -->
  <!-- ここに 2 つ目の項目 -->
  <!-- ここに 3 つ目の項目 -->
</ul>

ブラウザは
「これは“箇条書きのまとまり”なんだな」
と理解して、先頭に黒い点（・）を付けて表示してくれます。

ここで大事なのは、

「ul は“リスト全体”を表す要素」
「中身は“リストの各項目”を表す要素が並ぶ」

という二層構造になっている、ということです。

ul が向いている場面・向いていない場面

向いているのは「順番が意味を持たない並び」

例えば、サービスの特徴を並べるとき。

「1 番目が一番大事」というわけではなく、
どれも同じレベルの特徴ですよね。

そういうときは「順不同のリスト」として <ul> がぴったりです。

逆に、「手順」のように
1 → 2 → 3 の順番に意味がある場合は、
番号付きリスト（<ol>）の方が適しています。

「順番に意味があるか？」
「ただ並べたいだけか？」

ここを自分に問いかけると、
<ul> を使うかどうかの判断がしやすくなります。

ナビゲーションメニューと ul の相性

メニューの「一覧」を表現する箱として使う

サイトのヘッダーメニューは、
<ul> ととても相性がいいです。

HTML のイメージ：

<nav>
  <ul>
    <!-- ホームへのリンク -->
    <!-- サービスページへのリンク -->
    <!-- お問い合わせページへのリンク -->
  </ul>
</nav>

ここで <nav> は「ナビゲーション全体」、
<ul> は「メニュー項目の一覧」という役割です。

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

nav ul {
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
}

「メニューの項目がいくつか並んでいる」
という構造を、意味付きで表現できるのが良いところです。

CSS と組み合わせた ul の見た目カスタマイズ

デフォルトの「黒い点」を消してカスタムデザインにする

ブラウザの初期状態では、
<ul> の各項目の先頭に黒い点（・）が付きます。

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

ul {
  list-style: none;   /* 先頭の点を消す */
  padding-left: 0;    /* 左の余白を消す */
}

これで「素の並び」になるので、
アイコンを付けたり、
ボーダーで区切ったり、
自由にデザインできます。

例えば、カード風のリストにしたい場合：

.features {
  list-style: none;
  padding-left: 0;
}

.features > * {
  border: 1px solid #ddd;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
}

ここでは、
「ul 全体にクラスを付けて、
中の各項目に同じスタイルを当てる」
という使い方をしています。

JavaScript と ul：動的に「一覧」を作るときの定番

配列データからリストを生成する

JavaScript で、
配列から「一覧」を作るときにも <ul> はよく使われます。

HTML：

<ul id="todoList"></ul>

JavaScript：

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

todos.forEach((text) => {
  const item = document.createElement("div"); // 本来は各項目用の要素
  item.textContent = text;
  list.appendChild(item);
});

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

todos.forEach((text) => {
  const item = document.createElement("div"); // 本来は各項目用の要素
  item.textContent = text;
  list.appendChild(item);
});