箇条書きリストの使い分けと 番号なしのリストマークをカスタマイズ｜ルクセリタス

リスト表示は ある事柄に対して 箇条書きにして分かりやすく表示する時に使用します。

リストには 番号付きのものと 番号なしのリストがあり、
それぞれ用途によって使い分けますが それぞれの使い分けと
リスト表示のデザインをカスタマイズする方法などをまとめてみました。

箇条書きリストの使い分け

リストがどのような場面で使用されるのかによって番号付きリストか
番号の無いリストを使用するのかを比べてみます。

番号付きリスト

番号が振られているリストは 基本的に 順番（順位）を付ける必要があるリストの時に使用します。

番号なしリスト

番号なしの方は 順位に関係なく 必要な事項を書きだした文章に使うなど、といった感じです。

また、箇条書きは情報の要点を絞って表示させるもので 記事にメリハリを付けることもできるので
うまく活用できるように、リストの使い分けと カスタマイズについてまとめてみます。

番号なし 基本のリストマーク

番号なしのリストマークは デフォルトでは " disc " 黒丸 ●になっています。

基本の番号なしのコードで list-style-type: [ ●● ]の部分を変更していきます。

番号なしのリストでは ul という属性を使用しますが
ルクセリタスでは目次やグローバルナビのリストにも影響が出たため  .post ul {  を使用しました。

番号なしのリストマークのカスタマイズ

リストマークと全体のデザインの基本的なカスタマイズ要素を取り入れてリスト例を作ってみました。

リストマーク square（スクエア）と背景色

背景色と文字色、リストをスクエアにしてみました。

リストマークciecle（サークル）

リストマークを 〇にする場合は Circleと指定します。

リストマークなしと囲み枠

リストマークを付けない場合は none と指定します。
この場合、左の余白が多くバランスが悪くなってしまうので padding で調整してあげましょう。

文字の幅に合わせて背景の幅を変更する場合、 下記のコードを追記します。

padding の幅はお好みで調整してください。
borderは 線のカスタマイズを指定する時に使用するCSSコードで 線種・幅・色の 3つの項目を指定します。

囲み枠 – border

この border については
【 CSSカスタマイズ 】ラインの基礎から アンダーラインの使い方
ラインの応用などは
見出しをデザイン！CSSカスタマイズの基本｜縦ラインを無くしたり 簡単なコードでのライン作成！で紹介しています。

様々な形にアレンジすることができるので お好みに合わせて カスタマイズしてみてください。