順序なしリスト：ulとli
ul要素とli要素で箇条書きリストを作成します。
「順序なしリスト：ulとli」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
順序なしリストとは
順序なしリストは、項目を箇条書きで表示します。順序は重要ではありません：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>ul要素
<ul>（順序なしリスト）要素がリストを囲みます。直接の子要素にできるのは<li>要素だけです：
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->CSSで箇条書き記号をスタイル設定する
CSSでリストマーカーを制御します：
ul {
list-style-type: disc; /* default: filled circle */
/* circle, square, none */
}
/* Custom bullet with ::before */
ul li::before {
content: '→ ';
color: blue;
}
/* Remove all list styling: */
ul {
list-style: none;
padding: 0;
margin: 0;
}ulによるナビゲーション
ナビゲーションメニューは、意味的にはリンクのリストです：
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>liには任意のコンテンツを含められる
リスト項目には、任意のフローコンテンツを含められます：
<ul>
<li>
<strong>HTML</strong>
<p>The structure of the web.</p>
</li>
<li>
<strong>CSS</strong>
<p>The presentation layer.</p>
</li>
</ul>インラインリスト
CSSでリスト項目を横方向に表示します：
<ul class="inline-list">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<!-- CSS: -->
<!--
.inline-list {
list-style: none;
padding: 0;
display: flex;
gap: 1rem;
}
-->ulの意味的な用途
順序なしリストの一般的な意味上の用途：
- ナビゲーションメニュー
- 機能一覧
- タグクラウド
- 関連リンク
- レシピの材料一覧
複数の項目にulとpのどちらを使うか
関連する項目が複数ある場合は、個別の段落に分けるよりも、意味的にリストのほうが適しています：
<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>
<!-- Good: -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>list-style-imageによるリストマーカー
リストの箇条書き記号としてカスタム画像を使用します：
ul {
list-style-image: url('/icons/check.svg');
}
/* More reliable: use background-image on li::before */
ul li {
list-style: none;
padding-left: 1.5rem;
background: url('/icons/check.svg') no-repeat left center;
background-size: 1rem;
}list-styleのショートハンド
list-styleのショートハンドで、種類、位置、画像を設定します：
ul {
list-style: square inside; /* type + position */
list-style: none; /* remove bullets */
}
/* list-style-position: inside vs outside */
ul {
list-style-position: inside; /* bullet inside padding box */
/* outside = default, bullet outside text block */
}アクセシビリティ
リストのアクセシビリティに関する注意：
- スクリーンリーダーは、リストの種類と項目数を読み上げます
list-style: noneを使用すると、一部のスクリーンリーダーがリストとして読み上げなくなる場合があります。意味を維持するにはrole="list"を追加します
<ul style="list-style: none" role="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>クイックチェック
ulの有効な直接の子要素は何ですか？
まとめ：順序なしリスト
順序なしリストの基本：
<ul>は、順序が重要ではないリストを囲みます<li>が唯一の有効な直接の子要素です- デフォルトの箇条書き記号はdiscです。
list-style-typeで変更できます - ナビゲーションメニューは、意味的にはリンクの
<ul>リストです - CSSで箇条書き記号を削除する場合は、
role="list"を追加します
よくある質問
「順序なしリスト：ulとli」レッスンは無料ですか？
はい。「順序なしリスト：ulとli」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「順序なしリスト：ulとli」で何を学びますか？
ul要素とli要素で箇条書きリストを作成します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「順序なしリスト：ulとli」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。