Markdownネストリストから多段階HTMLリストへの変換

順序付きと順序なしの混合項目を持つMarkdownネストリストを、多段階のHTML <ul>/<ol>構造に変換する方法を解説。インデントルールとよくある落とし穴を含みます。

Advanced

詳細な説明

Markdownのネストリスト

Markdownは子項目をインデントすることでリストのネストをサポートします。順序なしリストの中に順序付きリストをネストしたり、その逆も可能で、複雑な階層構造を作成できます。

基本的なネスト

子項目を2つまたは4つのスペースでインデントしてネストリストを作成します。

順序付きと順序なしの混合

異なるネストレベルでリストタイプを自由に混合できます。

インデントルール

  • CommonMark は親リスト項目のコンテンツに揃えたインデント(通常2〜4スペース)を要求します。
  • GitHub Flavored Markdown は2スペース以上のインデントで柔軟に対応します。
  • タブ の使用はパーサー間で一貫性のない動作を引き起こす可能性があるため、スペースを推奨します。

よくある落とし穴

  1. 不十分なインデント — 項目が子要素ではなく兄弟要素として表示されます。
  2. 一貫性のないマーカー — 同じレベルで -* を切り替えると、一部のパーサーで混乱が生じます。
  3. 深いネスト(4段階以上)は読みにくくなります。見出しと別々のリストの使用を検討してください。

ユースケース

ネストリストは、目次セクション、階層的なナビゲーションメニュー、カテゴリ別の機能リスト、構造化されたアウトラインに使用されます。プロジェクトドキュメントや技術仕様書で特に一般的です。

試してみる — Markdown to HTML Converter

フルツールを開く