HTMLリスト生成ツール

行のリストから本物のマークアップへ

リストはウェブのいたるところにあります。ナビゲーションメニュー、機能の箇条書き、手順の説明、材料のリスト、目次などです。それらのタグを手打ちするのは面倒で間違いやすい作業です。各項目は1つの ul または ol のラッパーの中に入れ子になった独自の li 要素を必要とし、長いリストの途中で終了タグを忘れるのは簡単だからです。この生成ツールはその手間を取り除きます。1行に1項目を貼り付ければ、完全で正しく入れ子になった構造を組み立ててくれます。

頭の中のモデルは「1行＝1リスト項目」です。行に入力したものは何であれ li のテキストになり、ツールが集合全体を、選んだコンテナ要素で包みます。行を並べ替えたり編集したりして生成し直せば、マークアップが瞬時に追従します。

順序ありか順序なしか：正しい要素を選ぶ

ul と ol の選択は見た目の問題ではなく、意味の問題です。順序なしリスト（ul）は黒丸で描画され、項目の並び順に意味がないこと、たとえば製品の機能の集まりを示します。順序ありリスト（ol）は番号で描画され、順序に意味があること、たとえばレシピの手順や順位付きのリストを示します。スクリーンリーダーはこれらを別々に読み上げるので、正しいほうを選ぶのは見た目だけでなくアクセシビリティの判断でもあります。

役立つ判定法：項目をシャッフルしても意味が変わらないなら順序なしリストを使い、シャッフルすると内容が誤りになるなら順序ありリストを使います。順序、順位、番号付きの参照が情報を担うときはいつでも ol に手を伸ばしましょう。

実際の例

Apple、Banana、Cherry という3行を入力し、順序なしリストを選ぶと、ツールは3つの li 要素を含む ul 要素を、果物ごとに1つずつ、適切にインデントして閉じた形で生成します。順序ありリストに切り替えると、同じ3行が ol になり、ブラウザはそれを 1. Apple、2. Banana、3. Cherry として描画します。タグが開いたまま残ることは決してなく、インデントによって構造が読みやすく保守しやすくなります。

好きな番号から始まる番号付きリスト

順序ありリストは1から始まる必要はありません。詳細オプションの「開始番号」欄を使うと ol に start 属性が書き込まれるので、ほかのコンテンツで中断された番号付きの並びを続けたり、前のリストが終わったところから再開したりできます。たとえば開始を5に設定すると、最初の項目は5、次は6というふうに描画されます。これは番号を制御する、きれいで標準に基づいた方法であり、項目のテキストに番号を打ち込んで偽装する方法とは違います。後者はリストの並べ替えが必要になると壊れてしまいます。

スタイル付けのための ID とクラスの追加

詳細オプションは、CSS と JavaScript のための3つのフックを提供します。「リスト ID」は ul または ol に一意の id を付け、正確に狙いたい単発の要素や、アンカーでリンクしたい要素に最適です。「リストクラス」はコンテナにクラスを適用し、水平ナビゲーションのレイアウトやカスタムの黒丸デザインのような共通のスタイルを継承させます。「項目クラス」はすべての li にクラスを適用し、一貫した余白やアイコンのように各項目に同じ扱いが必要なときにぴったりです。

クラスと ID は生成されたタグにそのまま入るので、マークアップは貼り付けたその瞬間に既存のスタイルシートに合致する準備ができており、後から検索と置換をする必要はありません。

なぜ空行が無視されるのか

うっかり項目の間に空行を残したり、貼り付けた元のテキストに末尾の空行があったりしても、生成ツールは空の li を作るのではなくそれらを飛ばします。これは意図的なものです。紛れ込んだ空のリスト項目は、空の黒丸や飛ばされた番号として描画され、ページを散らかすからです。ルールは、実際に空白でない内容を持つ行だけがリスト項目になるということなので、ゆるく整形されたテキストを、先に整理しなくても貼り付けられます。

意味のあるリストが SEO とアクセシビリティに重要な理由

ダッシュや改行で区切った段落の代わりに本物のリストマークアップを使うことは、見た目を超えて報われます。検索エンジンは ul や ol の構造を解析してグループ化されたコンテンツを理解し、適切なリストは手順やハウツーコンテンツのリッチリザルトのような機能に表示される資格を得ます。支援技術も恩恵を受けます。スクリーンリーダーはリストが何項目含むかを読み上げ、ユーザーが項目ごとに移動できるようにしますが、これは黒丸を文字で偽装していると不可能です。

要するに、意味のあるリストは構造を機械にも人間にも伝えます。正しい ul や ol のマークアップを生成するためにひと手間かけることで、コンテンツは、手で整形した模造品よりもアクセシブルになり、クロールしやすくなり、保守しやすくなります。