メニュー

箇条書きリスト使い方

リストマークタイプ

スクリーンショット:リストを構成する各パーツに、それぞれ①②の番号を割り付けている。①はリストマーク②はコンテンツ
  • ①リストマーク(必須)
  • ②コンテンツ(必須)

階層と表示

スクリーンショット:インデントとマーカーのパターン。マーカー1:インデント0 マーカー2:インデント16, 24, 32 マーカー3:インデント48, 56

入れ子の深さに応じてインデントを設けます。また、入れ子の深さに応じて3種類のマーカーを使い分けます。

項番タイプ

スクリーンショット:リストを構成する各パーツに、それぞれ①②の番号を割り付けている。①は項番②はコンテンツ
  • ①項番(必須)
  • ②コンテンツ(必須)

階層と表示

スクリーンショット:インデントのパターンとマーカーの幅。インデント0 インデント24 インデント32 インデント48 インデント72

入れ子の深さに応じてインデントを設けます。

マーカーはデフォルトでは全角2文字分の幅を持ちます。3桁以上になり得る場合は必要に応じて幅を広げてください。

項番の記載

スクリーンショット:項番タイプの記載のさまざまパターン

項番付きリストのマーカーには、任意のフォーマットの項番を記述できます。

数字・丸付き数字・ローマ数字・アルファベット・ひらがな・カタカナなどの文字や、角括弧・丸括弧・墨付き括弧・ピリオド・ハイフン・コロンなどのさまざまな記号を使用できます。

スクリーンショット:項番タイプで項番自体にリンクしたケース

項番自体をリンクにすることもできます。

リストアイテム間の間隔

スクリーンショット:上下の間隔のパターン。12, 8, 4

各項目の上下の間隔は3段階に設定できます。

実装

<ul>要素および<li>要素を使って実装する

リストマーク付きリストと項番付きリストのどちらも、<ul>要素および<li>要素を使って実装します。<ol>要素はアクセシビリティの問題があるため使用しません。項番付きリストのマーカーは、<li>要素内に文字として記載します。

実装例については各種リソースにあるサンプルを参照してください。