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

ある事柄に対して説明する時などに 箇条書きのリストにして分かりやすく表示させることがあります。

リストには 番号付きのものと 番号なしのリストがあり、それぞれ用途によって使い分けます。

番号が振られているリストは 基本的に 順番（順位）を付ける必要があるリストで
番号なしの方は 順位に関係なく 必要な事項を書きだした文章に使うなど、といった感じです。

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

番号なしのリストをカスタマイズしてみる

番号なしのリストは デフォルトでは　このように 黒丸 ●になっています。

基本の 番号なしのカスタマイズでは ul という属性を使用します。

ul{ から始まるコードで カスタマイズすることができるのですが
当サイトでは、ナビゲーションなどのリストにも影響が出たため
投稿記事にだけ リストのカスタマイズができるように .post ul { を使用しました。

list-style-type

リストマークのタイプを指定するコードが、 list-style-type: ●●; です。
●● の部分を変更していきます。

square （スクエア）の リストマーク

リストマーク（ スクエア ）と 文字の色・太さを カスタマイズ

リストマークに背景を付ける

バックグラウンド（背景）に色を付け 文字をノーマルにカスタマイズ

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

padding の幅はお好みで調整してください。

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

リストマークを サークル（ まる ）に カスタマイズ
list-style-type: ●●; に Circleと指定します。

 リストマークなしの場合

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

 リストマークに囲み枠を付ける

リストマークを囲む場合は border（ ボーダー ）のコードを追加します。
borderは 線種・幅・色の 3つの項目を指定します。

カンタンな囲み枠の応用

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

かんたんなカスタマイズの例をご紹介します。

二重線

ダッシュ

左側にライン

角に丸みを付ける

ほんの少しのカスタマイズで イメージを変えることができますね。

ぜひ、いろいろ試してみてください。