HTML要素 ・ リスト・テーブル
<ul>
順序のないリスト
順番に意味がない項目を箇条書きで並べます。各項目は li 要素で囲みます。
01
サンプルコード
HTML
1<ul>
2 <li>HTMLの基本構造</li>
3 <li>見出し・文章</li>
4 <li>画像・リンク</li>
5</ul>
CSS
1ul {
2 padding-left: 1.4em;
3}
4li {
5 margin-bottom: 4px;
6}
7li::marker {
8 color: #b68235;
9}
02
実行結果
ブラウザでの表示
03
解説
ul は "unordered list" の略で、順番に意味のないリストを表します。中には li（list item）だけを入れます。
ブラウザは既定で各項目の先頭に「・」の記号（マーカー）を表示し、左側に余白をとります。マーカーの色は ::marker で変えられます。
ナビゲーションメニューのように、リンクを並べる場面でもよく使われます。
04
応用例・注意点
よく使う組み合わせ
| 書き方 | 説明 |
|---|---|
ol | 順番に意味があるリスト（手順など） |
li | リストの各項目 |
list-style: none | 先頭のマーカーを消す（CSS） |
nav > ul | ナビゲーションメニューの定番構造 |
ナビゲーションメニュー
リンクのリストをFlexboxで横並びにする、実務でよく見る構成です。
HTML
1<nav>
2 <ul class="menu">
3 <li><a href="/">ホーム</a></li>
4 <li><a href="/learn">学習する</a></li>
5 </ul>
6</nav>
CSS
1.menu {
2 display: flex;
3 gap: 16px;
4 padding: 0;
5 list-style: none;
6}
注意点
- 01ul の直下には li 以外を置かないでください。
- 02手順など順番に意味がある場合は ol を使います。