CSS リスト

CSSを使って、ul（順序なしリスト）やol（順序ありリスト）のデザインをカスタマイズすることができます。

スタイルタイプの設定

デフォルトでは「番号なしリスト」の場合は黒丸、「番号ありリスト」の場合は数字が先頭に表示されています。

箇条書きのhtmlタグは、本文だけではなく、メニューとしてよく使われます。サイドバーの場合は黒い丸や番号順ではなく、画像で置き換えているケースが多いです。

list-style-type:でリストスタイルを指定することができます。

（表） `<ol>`要素に対する設定値
設定値	表示される結果	デフォルト
`decimal`	decimal 数字	○
`decimal-leading-zero`	decimal-leading-zero ２桁の数値（ゼロで埋められる）
`lower-alpha` `lower-latin`	lower-alpha lower-latin アルファベット（小文字）
`upper-alpha` `upper-latin`	upper-alpha upper-latin アルファベット（大文字）
`lower-roman`	lower-roman ローマ数字（小文字）
`upper-roman`	upper-roman ローマ数字（大文字）
`lower-greek`	lower-greek ギリシャ文字
`armenian`	armenian アルメニア語
`georgian`	georgian ジョージア語
`none`	none 非表示

この表はstyle=”list-style-type:”でhtmlに直接指定していますが、できるだけCSSを使って指定することをおすすめします。

リストマーカーの位置を設定するには、list-style-positionプロパティを使用します。リストマーカーを内側に（inside）または外側に（outside）配置できます。初期値はoutsideです。

ul, ol {
  list-style-position: inside;
}

/* 他のスタイル例 */
/* ul, ol { list-style-position: outside; } */

カスタム画像をリストマーカーとして使用するには、list-style-imageプロパティを使用します。

ul {
  list-style-image: url('custom-marker.png');
}

Font Awesome 5を使用して、リストマーカーの画像を設定するサンプルコードです。

リストのインデントを設定するには、padding-leftプロパティを使用します。

ul, ol {
  padding-left: 20px;
}

liにもスタイルを適用できます。たとえば、フォントサイズや行の高さを設定することができます。

li {
  font-size: 16px;
  line-height: 1.5;
}

これらのCSSプロパティを使って、リストのデザインをカスタマイズしましょう。