HTMLの箇条書きの作り方を徹底解説！ul・ol・liタグとCSSの使い方・コピペ例

HTMLで箇条書きを作るには、<ul>、<ol>、<li>の3つのタグを正しく使い分けることが基本です。項目を並べるだけなら難しくありませんが、番号付きリストへの変更、入れ子構造、マーカーの非表示、横並びのデザインまで対応するには、それぞれの役割とCSSの仕組みを理解しておく必要があります。

2026年現在も、HTMLのリストはWebページの本文、商品情報、操作手順、ナビゲーションなどに欠かせない基本要素です。WHATWGのHTML StandardやMDN Web Docs、W3CのWeb Accessibility Initiative（WAI）でも、項目同士の関係や順序を適切なHTML要素で表現する考え方が示されています。この記事では、コピーして使えるコードを交えながら、HTML箇条書きの作り方からCSSによる調整、よくある失敗まで解説します。

【基本】HTML箇条書きの作り方はul・ol・liタグの使い分けが出発点

HTMLの箇条書きは、リスト全体を表すタグと、個々の項目を表すタグを組み合わせて作ります。まず覚えたいのは、ul・ol・liの3種類です。

ulタグ：順序なしリストを作る

<ul>は、項目の並び順そのものに意味がないリストを表します。一般的には黒丸などのマーカーが自動的に表示されます。

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

上記のコードをHTMLファイルに記述すると、次のような箇条書きになります。

HTML
CSS
JavaScript

商品の特徴、必要な持ち物、サービスのメリットなど、順番を入れ替えても意味が変わらない情報に向いています。これがHTMLの「順序なしリスト」です。

olタグ：番号付きリストを作る

<ol>は、項目の順番に意味があるリストを表します。ブラウザーは通常、各項目に連番を付けて表示します。

<ol>
<li>HTMLファイルを作成する</li>
<li>タグを記述する</li>
<li>ブラウザーで表示を確認する</li>
</ol>

この場合は、次のような番号付きリストになります。

HTMLファイルを作成する
タグを記述する
ブラウザーで表示を確認する

料理の手順、登録方法、作業工程、ランキングなど、順番を変えると情報の意味が変わる場面で使います。

liタグ：リストの各項目を表す

<li>は、リスト内の1項目を表すタグです。通常はulまたはolの内側に配置します。liだけを書いても、親となるリストがないため、意図した箇条書きとしての意味が正しく伝わりません。

また、liの中にはテキストだけでなく、リンク、画像、段落、さらに別のリストなども配置できます。複雑なリストを作る場合も、各項目の親子関係を意識することが大切です。

【違いを比較】HTMLのulとolはどちらを使うべき？

ulとolの最大の違いは、項目の順序が情報として重要かどうかです。黒丸か数字かという見た目だけで判断すると、情報の意味とHTMLの構造が食い違うことがあります。

要素・種類	主な役割	適した使用例	選び方の基準
ul	順序なしリスト	商品の特徴、持ち物一覧	並び順を変えても意味が変わらない
ol	順序付きリスト	操作手順、レシピ、順位	並び順に意味がある
li	リストの各項目	特徴の1項目、手順の1工程	ulやolの中に配置する

判断に迷ったら、項目を入れ替えたときに内容の意味が変わるかを考えてください。たとえば、Webサイトの機能一覧ならul、アカウント登録の手順ならolが適しています。

なお、番号付きリストは常に1から始める必要があるわけではありません。HTMLのolには、開始番号を指定するstart属性や、逆順に並べるreversed属性もあります。

<ol start="3">
<li>3番目の項目</li>
<li>4番目の項目</li>
<li>5番目の項目</li>
</ol>

このように、開始番号を指定すれば、途中から続く手順や分割されたリストにも対応できます。番号の種類や表示形式を変更する場合は、次に紹介するCSSも活用しましょう。

【コピペOK】HTMLリストの入れ子と番号付きリストの応用例

大項目の下に小項目を配置する「入れ子リスト」は、カテゴリと詳細、メニューとサブメニュー、手順と補足説明などを整理するときに便利です。

ulの中にulを入れる方法

親となるliの内側に、子リストのulを配置します。ulの直下に別のulを置くのではなく、親項目の中に子リストを記述するのがポイントです。

<ul>
<li>フロントエンド
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>バックエンド</li>
</ul>

この構造では、「フロントエンド」の配下に3つの技術が並びます。階層が深くなるほど読みづらくなるため、実際のページでは必要な階層に絞るのがおすすめです。

番号付きリストの中に箇条書きを入れる方法

作業の順序を番号で示しながら、各工程の注意事項を箇条書きにすることもできます。

<ol>
<li>HTMLファイルを準備する
<ul>
<li>文字コードを設定する</li>
<li>必要な要素を記述する</li>
</ul>
</li>
<li>CSSを適用する</li>
<li>表示を確認する</li>
</ol>

olとulは互いに入れ子にでき、同じ種類のリストを何階層か重ねることもできます。WHATWGのHTML StandardとMDNのol要素の解説でも、リストを交互に入れ子にする構造が示されています。

ただし、子リストの開始タグと終了タグを親のliの中に収めることが重要です。タグの閉じ忘れや親子関係の間違いがあると、ブラウザーによるHTMLの解釈が意図と異なる可能性があります。

【CSSで調整】HTML箇条書きのマーカー・インデント・デザインを変更する

HTMLでリストの意味と構造を決めたら、CSSで見た目を整えます。マーカーの形、文字との間隔、行間、余白などは、HTMLの内容を変更せずに調整できます。

list-style-typeプロパティでマーカーを変更する

list-style-typeは、リスト項目の先頭に表示されるマーカーの種類を指定するCSSプロパティです。ulにもolにも適用できます。

/* 黒丸 /
ul {
list-style-type: disc;
}

/ 白丸 /
ul {
list-style-type: circle;
}


/ 四角 /
ul {
list-style-type: square;
}


/ 通常の数字 /
ol {
list-style-type: decimal;
}


/ 小文字のローマ数字 */
ol {
list-style-type: lower-roman;
}

ほかにも、olではupper-alphaで大文字のアルファベット、lower-alphaで小文字のアルファベット、upper-romanで大文字のローマ数字などを指定できます。

マーカーの種類だけでなく、余白や行間を調整すると読みやすさも改善します。

ul {
padding-inline-start: 1.5rem;
margin-block: 1rem;
}

li {
margin-block: 0.4rem;
line-height: 1.7;
}

ここで使ったpadding-inline-startは、文章の書字方向に応じた開始側の余白を設定します。左から右へ書く日本語の一般的なWebページでは、リストの左側のインデントを調整する用途に使えます。

HTML箇条書きのマーカーを消す方法

ナビゲーションやカード型のリストなどでは、黒丸を消してすっきり見せたいことがあります。その場合は、list-style-type: none;を指定します。

.plain-list {
list-style-type: none;
margin: 0;
padding-inline-start: 0;
}

HTML側では、対象のulにクラス名を付けます。

<ul class="plain-list">
<li>サービス紹介</li>
<li>料金プラン</li>
<li>お問い合わせ</li>
</ul>

マーカーを消しても、リストのHTML構造はそのまま残ります。ただし、MDN Web Docsのlist-style関連資料が説明するように、Safariではマーカーをnoneにしたリストがアクセシビリティツリー上でリストとして認識されない場合があります。特にナビゲーション以外のリストでは、必要に応じてrole="list"を追加し、スクリーンリーダーでの読み上げも確認してください。

HTML箇条書きのインデントを調整する

箇条書きが左に寄りすぎる場合や、マーカーと文字の位置を整えたい場合は、ulやolの余白を見直します。

.custom-list {
margin: 0;
padding-inline-start: 1.25rem;
}

.custom-list li {
padding-inline-start: 0.25rem;
}

リスト全体の開始位置は親要素のpaddingで、項目間の余白や行間はli側のCSSで調整するのが基本です。マーカーの位置まで含めて変更したい場合は、paddingとmarginの役割を区別して設定しましょう。

【横並びにする】HTMLリストをナビゲーションやメニューに活用する

HTMLリストは縦方向に並べるだけでなく、CSSのFlexboxを使って横並びにもできます。Webサイトのナビゲーション、カテゴリー一覧、タグ、短い機能一覧などに向いている方法です。

display:flexで横並びにするコード

HTMLでは通常のulとliを使い、CSSで横方向の配置を指定します。

<ul class="feature-list" role="list">
<li>初心者向け</li>
<li>コピペ対応</li>
<li>CSSカスタマイズ</li>
</ul>

.feature-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
list-style: none;
margin: 0;
padding: 0;
}

.feature-list li {
padding: 0.5rem 0.75rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
}

display: flex;で項目を横方向に配置し、gapで項目間の間隔を調整します。さらにflex-wrap: wrap;を指定すると、画面幅が足りないときに項目が次の行へ折り返されます。スマートフォンでも横にはみ出しにくい設計です。

マーカーを消すためにlist-style: none;を指定しているため、コード例ではrole="list"も付けています。装飾を優先する場合でも、リストとしての意味が支援技術に伝わるよう配慮しましょう。

横並びリストで失敗しないポイント

横並びにする際は、次の点を確認してください。

項目数が増えてもスマートフォンで横にはみ出さないか。
項目間の余白が狭すぎず、タップしやすいか。
マーカーを消した後も、リストの意味が支援技術に伝わるか。
ナビゲーションであれば、必要に応じてnav要素とリンクを組み合わせているか。

特にサイト内メニューでは、見た目を横並びにすることと、ページ内の移動先を正しく設定することは別の問題です。リンク先やフォーカス時の表示も含めて確認すると、使いやすいメニューになります。

【注意点】HTML箇条書きでよくある間違いと修正方法

箇条書きが表示されない、番号が想定と違う、インデントが不自然になるといった問題は、HTMLの構造とCSSの設定を切り分けて確認すると解決しやすくなります。

liを使わず、改行だけで箇条書きを作っている

文字の先頭に「・」や「1.」を直接入力し、brタグで改行すれば、見た目だけの箇条書きは作れます。しかし、その方法ではリストとしての構造が適切に伝わらず、支援技術によるリスト単位の認識や移動にも影響する可能性があります。

項目のまとまりを表したい場合は、ul・ol・liを使うのが基本です。W3CのWAIが解説するアクセシビリティ技法でも、リストの関係性をHTMLで表現する方法が示されています。

ulとolを見た目だけで使い分けている

番号が必要だからol、黒丸が好みだからulといった判断だけでは不十分です。たとえば、手順をulで作ってCSSで数字を表示しても、HTMLの構造上は順序付きリストになりません。逆に、順序に意味がない項目をolで表現すると、読み手に不要な順序の意味を伝えてしまいます。

まず情報の意味に合わせてulかolを選び、マーカーの形や色はCSSで調整しましょう。

CSSで余白をゼロにしたら表示が崩れた

ブラウザーには、ulやolに標準のmarginやpaddingが設定されています。これらをゼロにすると、マーカーや文字の位置が変わり、ほかの要素との間隔も変化します。

そのため、箇条書きのインデントを調整する場合は、padding-inline-startとmarginの両方を確認してください。入れ子リストであれば、子リスト側にも余白の指定が必要な場合があります。

終了タグを省略して構造が分かりにくくなっている

HTMLの仕様上、特定の条件ではliの終了タグを省略できます。しかし、コードの読みやすさや修正のしやすさを考えると、</li>まで明示する書き方がおすすめです。入れ子リストでは特に、どの項目がどこで終わるのかを明確にしましょう。

【プロの結論】HTML箇条書きは意味・構造・見た目を分けて設計する

HTMLリストを実務で扱う際に大切なのは、構造を決めるHTMLと、表示を整えるCSSの役割を混同しないことです。最初に情報の意味を整理し、その後にデザインを調整すれば、修正しやすく、アクセシビリティにも配慮したコードになります。

ulが向いているケース：商品の特徴、サービスのメリット、カテゴリ一覧など、項目の順序に意味がない情報。
olが向いているケース：操作手順、作業工程、ランキングなど、順番が内容の理解に関わる情報。
CSSによる調整が向いているケース：マーカーの形、余白、行間、横並び表示など、リストの意味を変えずに外観を整えたい場合。
見直しが必要なケース：liの親子関係が不明瞭なコード、改行だけで作ったリスト、マーカーを消した後に読み上げを確認していないページ。

また、HTML箇条書きのデザインを変更するために、すべての項目を個別のdiv要素に置き換える必要はありません。適切なリスト要素を維持したままCSSを適用すれば、デザインの自由度と情報構造の明確さを両立できます。

【html 箇条書き】に関するよくある質問（FAQ）

Q1：HTMLで箇条書きを作るには、どのタグを使えばよいですか？
A1：順序なしの箇条書きにはul、番号付きリストにはol、各項目にはliを使います。例えば、商品の特徴ならul、操作手順ならolを選ぶのが基本です。

Q2：HTMLの箇条書きの黒丸を消すにはどうすればよいですか？
A2：CSSで対象のulやolにlist-style-type: none;またはlist-style: none;を指定します。必要に応じてmarginとpaddingも調整し、アクセシビリティへの影響も確認してください。

Q3：HTMLの箇条書きを横並びにするにはどうすればよいですか？
A3：ulにdisplay: flex;を指定し、gapで項目間の間隔を設定します。スマートフォンでの表示も考慮するなら、flex-wrap: wrap;を組み合わせると便利です。

HTMLの箇条書きを作る基本は、順序なしリストのul、順序付きリストのol、各項目を表すliの3つを理解することです。親のliの中に子リストを配置すれば、複雑な入れ子構造にも対応できます。

加えて、list-style-typeでマーカーを変更し、padding-inline-startでインデントを調整し、display:flexで横並びにすれば、用途に合わせたリストデザインを実現できます。マーカーを消す場合も、HTMLの構造とアクセシビリティを維持が必要です。

まずは基本のul・ol・liをコピーして動作を確認し、必要な部分だけCSSを追加してみてください。情報の意味をHTMLで正しく表し、見た目をCSSで整えることが、保守しやすく読みやすいWebページへの近道です。