クリエイティブ リストのスタイル設定

リストのスタイル設定に役立つクリエイティブな方法をいくつか紹介します。

リストと聞くと何が思い浮かびますか?最もわかりやすい例はショッピング リストです。これは最もシンプルなリストで、特に順序のないアイテムの集合です。ウェブでは、さまざまな方法でリストを使用しています。会場で開催される今後のコンサートのコレクションリストである可能性が高い。予約プロセスが複数のステップで構成されている場合、リストである可能性が高いです。画像ギャラリーですか?それでも、字幕付きの画像のリストと見なされる可能性があります。

この記事では、ウェブで使用できるさまざまな HTML リストの種類と、それらの使用方法について説明します。また、あまり馴染みのない属性についても説明します。また、CSS でスタイルを設定する便利でクリエイティブな方法についても説明します。

アイテムを意味的にグループ化する必要がある場合は、HTML リスト要素を使用する必要があります。ユーザー補助技術(スクリーン リーダーなど)は、リストがあることとアイテムの数をユーザーに通知します。たとえば、ショッピング サイトの商品のグリッドについて考えてみましょう。この情報を把握しておくと非常に役立ちます。そのため、リスト要素を使用することをおすすめします。

タイプのリスト表示

マークアップでは、次の 3 つのリスト要素を使用できます。

  • 順序なしリスト
  • 順序付きリスト
  • 説明リスト

どちらを選択するかはユースケースによって異なります。

順序なしリスト(ul)

順序なしリスト要素(<ul>)は、リスト内のアイテムが特定の順序に対応していない場合に最も便利です。デフォルトでは、箇条書きリストとして表示されます。たとえば、順序が重要でない買い物リストなどです。

パン、牛乳、リンゴなどの買い物リスト。

ウェブでは、ナビゲーション メニューが一般的な例です。メニューを作成する場合は、ulnav 要素でラップし、メニューをラベルで識別して、支援技術をサポートすることをおすすめします。また、メニュー内の現在のページを特定する必要があります。これは aria-current 属性を使用して行います。

<nav aria-label="Main">  
 
<ul>  
   
<li>  
     
<a href="/page-1" aria-current="page">Menu item 1</a>  
   
</li>  
   
<li>  
     
<a href="/page-2">Menu item 2</a>  
   
</li>  
   
<li>  
     
<a href="/page-2">Menu item 2</a>  
   
</li>  
      …  
   
</ul>  
</nav>  

メニュー構造に関するこちらの記事では、すべてのユーザーがナビゲーション メニューにアクセスできるようにするための推奨事項をいくつか紹介しています。

順序付きリスト(ol)

複数のステップからなるプロセスなど、項目の順序が重要な場合は、順序付きリスト要素(<ol>)が最適です。デフォルトでは、リストアイテムは番号付きで表示されます。たとえば、手順を順番に完了する必要がある一連の手順などです。

ミルクティーを作るのに必要な手順を詳しく説明したリスト。

<ol> 要素と <ul> 要素の両方には、直接の子として <li> 要素のみを含めることができます。

説明リスト(dl)

説明リストには、用語(<dt> 要素)と説明(<dd>)が含まれます。各用語には複数の説明を付加できます。ユースケースとしては、用語集やレストランのメニューなどがあります。説明リストはデフォルトではマーカーなしで表示されますが、ブラウザでは <dd> 要素がインデントされる傾向があります。

HTML では、<div> を使用して用語とその説明をグループ化できます。これは、後で説明するように、スタイル設定に役立ちます。

<!-- This is valid --> 
<dl>  
   
<dt>Term 1</dt>  
   
<dd>This is the first description of the first term in the list</dd>  
   
<dd>This is the second description of the first term in the list</dd>  
   
<dt>Term 2</dt>  
   
<dd>This is the description of the second term in the list</dd>  
</dl>

<!-- This is also valid -->
<dl>  
   
<div>  
       
<dt>Term 1</dt>  
       
<dd>This is the first description of the first term in the list</dd>  
       
<dd>This is the second description of the first term in the list</dd>  
   
</div>  
   
<div>  
       
<dt>Term 2</dt>  
       
<dd>This is the description of the second term in the list</dd>  
   
</div>  
</dl>  

シンプルなリストのスタイル設定

リストの最も簡単な用途の一つは、本文のブロック内です。このようなシンプルなリストでは、複雑なスタイル設定は必要ありませんが、番号付きリストや番号なしリストのマーカーを、ブランドの色やカスタム画像を使用することで、ある程度カスタマイズしたい場合があります。list-style::marker 疑似要素を使って、さまざまなことができます。

::marker

リストマーカーに基本的なスタイルを適用するだけでなく、循環する箇条書きを作成することもできます。ここでは、::marker 疑似要素の content 値に 3 つの異なる画像 URL を使用しています。これにより、ショッピング リストの例に手書きの雰囲気が加わります(すべての項目に同じ画像を使用する場合とは異なります)。

::marker {  
   
content: url("/marker-1.svg") ' ';  
}

li:nth-child(3n)::marker {  
   
content: url("/marker-2.svg") ' ';  
}

li:nth-child(3n - 1)::marker {  
   
content: url("/marker-3.svg") ' ';  
}  

カスタム カウンタ

番号付きリストによっては、カウンタ値を使用すると同時に、別の値を追加することもできます。list-item カウンタをマーカーの content プロパティの値として使用し、他のコンテンツを追加できます。

::marker {  
   
content: counter(list-item) '🐈 ';  
}  

カウンタは 1 ずつ自動的にインクリメントされますが、リストアイテムに counter-increment プロパティを設定することで、別の値でインクリメントすることもできます。たとえば、カウンタは毎回 3 ずつ増分されます。

li {  
   
counter-increment: list-item 3;  
}  

カウンタには他にもさまざまな機能があります。CSS のリスト、マーカー、カウンタの記事では、その一部について詳しく説明しています。

::marker スタイルの制限事項

マーカーの位置やスタイルをより細かく制御したい場合もあります。たとえば、flexbox や grid を使用してマーカーを配置することはできません。他の配置が必要な場合は、デメリットになることがあります。::marker は、スタイル設定に使用できる CSS プロパティを制限付きで公開します。デザインで基本的なスタイル以外のものが必要な場合は、別の疑似要素を使用することをおすすめします。

リストに見えないリストのスタイル設定

デフォルトのスタイルとはまったく異なる方法でリストのスタイルを設定したい場合もあります。これは、ナビゲーション メニューでよく見られるケースです。通常、すべてのマーカーを削除し、flexbox を使用してリストを横向きに表示します。一般には、list-style プロパティを none に設定します。これにより、DOM でマーカーの疑似要素にアクセスできなくなります。

::before を使用したカスタム マーカー

::marker が登場する前は、::before 疑似要素にスタイルを設定してカスタム リストマーカーを作成する方法が一般的でした。ただし、必要に応じて、視覚的に複雑なリストのスタイル設定をより柔軟に行うことができます。

::marker と同様に、content 属性を使用して独自のカスタム 箇条書きスタイルを追加できます。::marker を使用する場合とは異なり、list-style-position が提供する自動的なメリットがないため、手動で配置を行う必要があります。ただし、Flexbox を使用すると比較的簡単に配置でき、配置の可能性も広がります。たとえば、マーカーの位置を交互に表示できます。

::before 要素を使用して順序付きリストのスタイルを設定する場合は、カウンタを使用して数値マーカーを追加することもできます。

li::before {  
 
counter-increment: list-item;  
 
content: counter(list-item);  
}  

::marker ではなく ::before を使用すると、カスタム スタイル設定用の CSS プロパティに完全にアクセスできるほか、アニメーションと遷移も許可されます。::marker では、アニメーションと遷移のサポートが制限されています。

属性を一覧表示する

番号付きリスト要素には、さまざまなユースケースで役立つ、省略可能な属性がいくつかあります。

逆順のリスト

過去 1 年間のトップ 10 アルバムのリストがある場合、10 から 1 にカウントダウンしたい場合があります。そのためにカスタム カウンタを使用し、負の値でインクリメントすることもできます。または、HTML で reversed 属性を使用するだけです。カウンタが純粋に表示目的のものでない限り、通常は CSS でカウンタを負の値でインクリメントするのではなく、reversed 属性を使用する方がセマンティックな意味があると思います。CSS の読み込みに失敗しても、HTML ではカウントダウンが正しく表示されます。また、スクリーン リーダーがリストをどのように解釈するかも考慮する必要があります。

2021 年のトップ 10 アルバムのデモをご覧ください。カウンタが CSS のみでインクリメントされている場合、スクリーン リーダーを使用してページにアクセスしたユーザーは、数字がカウントアップされていると判断し、10 が実際には 1 であると結論付ける可能性があります。

デモでは、reversed 属性を使用すると、追加の作業なしでマーカーに正しい値が設定されていることがわかります。ただし、::before 疑似要素を使用してカスタム リストマーカーを作成する場合は、カウンタを調整する必要があります。リストアイテムのカウンタを負の値でインクリメントするように指示するだけです。

li::before {  
 
counter-increment: list-item -1;  
 
content: counter(list-item);  
}  

Firefox ではこれで十分ですが、Chrome と Safari では、マーカーは 0 から -10 までカウントダウンします。この問題は、リストに start 属性を追加することで解決できます。

リストを分割する

start 属性を使用すると、リストの開始値を指定する数値を指定できます。たとえば、リストをグループに分割する場合に役立ちます。

トップ 10 アルバムの例を基に、実際には、トップ 20 のアルバムを 10 個ずつカウントダウンしたい場合もあります。2 つのグループの間に他のページ コンテンツがある。

列に並べられたワイヤーフレームのリスト。列の中央に要素が配置されています。

HTML で 2 つの個別のリストを作成する必要がありますが、カウンタが正しいことを確認するにはどうすればよいですか?現在、マークアップでは両方のリストが 10 から 1 にカウントダウンされますが、これは望ましい状態ではありません。ただし、HTML では start 属性値を指定できます。最初のリストに start 値 20 を追加すると、マーカーが再び自動的に更新されます。

<ol reversed start="20">  
 
<li>...</li>  
 
<li>...</li>  
 
<li>...</li>  
</ol>  

複数列のリスト レイアウト

前のデモでご覧いただいたように、リストにはマルチカラムのレイアウトが適している場合があります。列の幅を設定すると、リストが自動的にレスポンシブになり、十分なスペースがある場合にのみ 2 つ以上の列にまたがって表示されます。列間にギャップを設定することもできます。さらに華やかにするために、スタイル設定されたcolumn-rule を追加することもできます(border プロパティに似た省略記法を使用します)。

ol {  
   
columns: 25rem;  
   
column-gap: 7rem;  
   
column-rule: 4px dotted turquoise;  
}  

列を使用すると、リストアイテムが不格好に分割されることがあります。これは必ずしも望ましい効果ではありません。

コンテンツが 2 つの列に分割される仕組みのデモ。

リストアイテムに break-inside: avoid を使用すると、このような強制的な改行を回避できます。

li {  
   
break-inside: avoid;  
}  

カスタム プロパティ

CSS カスタム プロパティを使用すると、リストのスタイル設定にさまざまな方法を適用できます。リストアイテムのインデックスがわかれば、そのインデックスを使用してプロパティ値を計算できます。残念ながら、現時点では CSS だけで要素のインデックスを決定する方法はありません(少なくとも、実用的な方法はありません)。カウンタでは、content プロパティで値のみを使用でき、計算は許可されません。

ただし、HTML の style 属性内で要素のインデックスを設定することはできます。これにより、特にテンプレート言語を使用している場合は、計算がより容易になります。次の例は、Nunjucks を使用して設定する方法を示しています。

<ol style="--length: items|length">  
 
</ol>  

Splitting.js は、クライアント側で同様の機能を実行するライブラリです。

カスタム プロパティ値を使用すると、リストの進行状況をさまざまな方法で表示できます。たとえば、手順リストの進行状況バーなどです。この例では、線形グラデーションの疑似要素を使用して、ユーザーがリストのどのあたりまで進んでいるかを示しているアイテムごとのバーを作成し、

li::before {  
   
--stop: calc(100% / var(--length) * var(--i));  
   
--color1: deeppink;  
   
--color2: pink;  

   
content: '';  
   
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
}  

hsl() 色関数を使用して、リストの進行に応じて色相を調整することもできます。カスタム プロパティを使用して hue 値を計算できます。

説明リストのスタイル設定

前述のように、用語とその定義を dldiv 内にラップして、より多くのスタイル設定オプションを利用することもできます。たとえば、リストをグリッドとして表示するとします。各グループをラップする div なしでリストに display: grid を設定すると、用語と説明が異なるグリッドセルに配置されます。次の例のように、パイのメニューとその説明を表示する場合などに便利です。

リスト自体にグリッドを定義して、用語と説明が常に列に揃えられるようにし、列の幅は最も長い用語によって決まるようにします。

一方、カード形式で用語と説明を明確にグループ化する場合、ラッパー <div> が非常に役立ちます。

リソース