HTMLリストを正しく入れ子にするには、各サブリストを、それが属するリスト項目の中に、その項目の終了タグの前に配置します。このガイドでは、MacでTextEditとSafariを使って、3階層の例を作成、保存、プレビューする方法を紹介します。

入れ子になったHTMLリストはどこに配置する？

HTMLリストには、リストコンテナと項目という2つの構造要素があります。順序なしリストには<ul>を、順序付きリストには<ol>を使います。通常の各項目は<li>と</li>で囲みます。入れ子になったリストは、こうした項目のいずれかの中に配置します。Googleのリストガイドでは、まさにこの入れ子のパターンが紹介されています。

基本の手順は、親項目を開き、そのラベルを書き、サブリスト全体を挿入してから、親項目を閉じることです。終了タグを明示しておくと、親子関係を確認しやすくなります。

次の正しいHTML断片では、グループAに子項目が2つあり、グループBは外側の階層に保たれています。

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

終了タグを内側から外側へ順に確認します。まず、各子項目を閉じます。次に、</ul>で内側のリストを閉じます。その後、</li>でグループAを閉じます。グループBが始まるのはその後です。実用的な確認方法として、親の開始タグと終了タグを探し、サブリスト全体がその間にあることを確かめます。

HTML Standardでは、<li>要素にはリストを含むフローコンテンツを配置できます。<ul>と<ol>のコンテンツモデルで認められているのは、リスト項目とスクリプトをサポートする要素です。別のリストコンテナを外側のコンテナの直下に置くことは認められていません。HTML Standardのグルーピングコンテンツの定義を参照してください。

各階層でリストの種類を個別に選ぶ

項目の順序を変えると意味も変わるかどうかを考えます。変わるなら<ol>を選びます。項目が順序に意味を依存しないまとまりなら<ul>を選びます。この問いをサブリストごとに個別に当てはめます。Mozillaの順序付きリストのドキュメントでは、順序の判断方法とリストの種類の混在について説明されています。

以下の例では、グループAとグループBは中立的なカテゴリなので、外側のリストは順序なしにします。項目A1と項目A2も順序なしのまとまりです。項目A2の下では、サンプル文書を開いてから名前を変更するため、この2つの手順には順序付きリストを使います。

コンテンツの関係 リストの選択 配置場所
グループのまとまり <ul> グループ項目を囲む
グループAに属する項目 <ul> グループAの<li>の中
項目A2に属する手順 <ol> 項目A2の<li>の中
グループBに属する項目 <ul> グループBの別個の<li>の中

箇条書きを番号付きに変えても、入れ子にする手法は変わりません。親項目が子リスト全体を囲みます。Mozillaのドキュメントでは、順序付きリストと順序なしリストを複数の階層で組み合わせて入れ子にできることが明記されています。順序付きリストの使用上の注意

TextEditで入れ子リストを含む完全な文書を作成する

次の例は、完全なHTML文書です。仮のラベルを使っているため、ダウンロードした素材や追加のコードは必要ありません。構造には4つのリストと8つのリスト項目が含まれます。内訳は、外側のグループが2つ、両グループに分配された項目が4つ、項目A2の下の手順が2つです。

TextEditでファイル > 新規を選び、続いてフォーマット > 標準テキストにするを選択します。以下の完全な例を貼り付けます。AppleはTextEditのHTMLガイドで、HTMLファイルを作成するこの標準テキストの手順を説明しています。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

ファイル > 保存を選び、ファイル名をnested-lists.htmlにして、見つけやすい場所に保存します。TextEditから使用する拡張子を尋ねられたら、「.html」を使用を選択します。これはAppleが説明するHTMLの保存手順です。コードブロック内のコードだけをコピーし、Markdownのフェンス行は含めないでください。

Finderで保存したファイルを選択し、ファイル > このアプリケーションで開く > Safariを選びます。AppleはMacでファイルを開くアプリを選択するで、ファイル > このアプリケーションで開くからアプリケーションを選ぶ方法を説明しています。

プレビューを次の想定される関係と照らし合わせます。

  • グループAとグループBは、外側の階層で兄弟関係にあります。
  • 項目A1と項目A2はグループAに属します。
  • 2つの番号付き手順は項目A2だけに属します。
  • 項目B1と項目B2はグループBに属します。

表示だけでなく、ソースコードでもこれらの関係を確認してください。この例では、タグとリストの親子関係をプログラムで確認していますが、Safariでの表示はここではテストしていません。

サブリストが誤った項目に付いている場合の診断

既存の文書で単語は合っているのに階層が間違っている場合は、次の手順で確認します。外側のリストから始め、親とその直下の子項目を一度に1つずつ確認します。

1. 親項目が早く閉じられていないか確認する

次の誤った断片では、サブリストが始まる前にグループAを閉じています。

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

ここでは、内側の<ul>が外側の<ul>の直下の子になっています。グループAの</li>を内側の</ul>より後ろに移動し、親項目がサブリストを囲むようにします。この修正は、Googleの入れ子リストの例で示されている配置ルールに沿っています。

2. 構造は正しくても親が間違っていないか確認する

リストが入れ子のルールに従っていても、誤った関係を表すことがあります。たとえば、番号付きの手順を項目A1の中に置くと、意図したラベルが項目A2だったとしても、その手順は項目A1に結び付けられます。構文が正しいだけでは、意図したグループ分けは確定できません。

各サブリストについて、「このリスト全体を囲んでいる開始タグはどの項目のものか？」と確認します。その項目のラベルを、意図した親と照らし合わせます。完全な例では、番号付きの手順から外側へたどると、項目A2、次にグループAに行き着くはずです。別のラベルに行き着く場合は、表示を調整する前にサブリスト全体を移動します。

3. 編集中は終了タグを明示する

HTMLでは、別の項目が直後に続く場合など、特定の条件下で項目の終了タグ</li>を省略できます。この省略形に頼る必要はありません。入れ子を学ぶときや修正するときは、すべての項目の終了タグを書き、境界を見えるようにします。Mozillaはリスト項目の技術概要で、省略できる条件を詳しく列挙しています。

編集時の補助として、一貫したインデントを使います。子リストは親のラベルより下の位置にインデントし、対応するリストの開始タグと終了タグの位置をそろえます。そのうえで、実際のタグの境界を確認します。インデントによって意図した関係を読み取りやすくできますが、関係を定義するのは要素の包含関係です。

4. 段落のラッパーをそれぞれの境界内に収める

親のラベルに段落が必要な場合は、親項目の中でサブリストを開く前に、その段落を閉じます。HTML Standardでは、リストコンテナを<p>要素の子にすることはできないと定めています。HTMLの段落コンテンツに関するルール

次の有効な断片では、ラベルの段落と子リストの両方がグループAの中に収まっています。

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

ソースを再度開き、変更中も階層を保つ

TextEditでファイルを再度開いたときにタグではなく書式付きの内容が表示される場合は、ファイル > 開くを選び、ファイルを選択してオプションを表示をクリックし、リッチテキストコマンドを無視を選んでから開くをクリックします。今後作成するファイルについては、AppleはTextEdit > 設定 > 開く/保存と、HTMLファイルをフォーマットされたテキストではなくHTMLコードとして表示するオプションも案内しています。TextEditでHTMLをコードとして表示する

項目を移動するときは、そこに含まれるサブリストも含めて、<li>ブロック全体を移動します。たとえば、項目A2を移動する場合は、その下の2つの手順も一緒に移動します。ラベルだけを移動すると、手順が取り残され、文書で意図したグループ分けが変わってしまいます。

変更を保存する前に、3点を確認します。各子リストが意図した親項目に囲まれていること、兄弟項目が必要な順序を保っていること、そして各リストが順序の重要性に応じて箇条書きまたは番号付きになっていることです。ファイルを保存してSafariで再度開き、表示されたグループを意図したアウトラインと照らし合わせます。各親項目とそのサブツリー全体を一緒に保つことで、今後の編集を確認しやすくなります。

出典