【CSSコピペ】箇条書きリスト（ul・li）をおしゃれにするデザイン10選

ブログ記事を書いていると頻繁に登場するのが、箇条書き。
項目を並べたり、まとめるのに便利で、わたしもよく使います?

今回は、CSSコピペでできる、おしゃれなリストのデザインをご紹介します。

色と形を選んでコードをつくる#

好きな色とデザインを選ぶと、コピペ用のCSSができます。
見本を探すより早く使いたい方は、こちらからどうぞ。

JavaScriptを有効にすると、色と形を選んでコードをつくれます。下の見本のコードをコピーして使うこともできます。

リストの基本の書き方#

リストには「番号付き」と「番号なし」の2種類あります。

番号なしリスト

いちご
りんご
みかん

番号付きリスト

いっちばーん
にばーん
さんばん

リストを作るときは、文字で「1. 」「2.」と打ったり、「・(中点)」を使うよりも、タグを使ってあげるのが望ましいです。

詳しいタグの使い方はサルワカさんの「【HTMLで箇条書き】ul・ol・liタグの使い方まとめ」で解説されています。

この後のサンプルはこのHTMLコードを元にデザインしていきます。
【番号なしリスト】

1
<ul>
2
    <li>りんご</li>
3
    <li>いちご</li>
4
    <li>みかん</li>
5
</ul>

【番号付きリスト】

1
<ol>
2
    <li>いっちばーん</li>
3
    <li>にばん</li>
4
    <li>さんばん</li>
5
</ol>

おしゃれなリストのデザインCSS１０選#

①丸い枠のリスト#

丸い枠のリスト

【番号なしリストのCSS】

1
ul{
2
    margin: 1rem 0; /* 枠の外の余白 */
3
    padding: 1rem 1.5rem; /* 枠の中から文字までの余白 */
4
    color:#AAA; /* 文字色 */
5
    border: solid 1px #D3D6Db; /* リストの周りに枠をつける */
6
    border-radius:10px; /* 枠の角を丸くする */
7
}
8
ul li{
9
    list-style:none; /* デフォルトのリストのスタイルはなしに */
10
}
11
ul li::before {
12
    content: '＊'; /* リストのスタイルを＊にします */
13
    color: #EEB1C0; /* リストのスタイルの色をピンクに */
14
    padding-right: 5px;/* リストの番号と文字の間に隙間をあける */
15
}

【番号付きリストのCSS】

1
ol{
2
    margin: 1rem 0; /* 枠の隙間を開ける */
3
    padding: 1rem 1.5rem; /* 枠と中の文字との隙間 */
4
    border: solid 1px #D3D6DB; /* リストの周りに枠をつける */
5
    border-radius:10px; /* 枠の角を丸くする */
6
}
7
ol li{
8
    list-style-type: none;
9
    counter-increment: number; /* １行ごとに番号を増やす */
10
}
11
ol li::before {
12
    content: counter(number) "."; /* 番号の横に.を入れる */
13
    margin-right: 5px; /* リストの番号と文字の間に隙間をあける */
14
    color: #EEB1C0; /* リストのスタイルの色をピンクに */
15
}

＜枠線の設定＞
border:線のスタイル　枠線の太さ　色
border-radius:枠線の角（0pxだと四角くなります）
枠線がが入らない場合は`border:〜`の行と`border-radius:〜`の行を消してください。

私はリストのスタイルに色をつけるのが可愛いなと思います?

②背景色のあるリスト#

背景色のあるリスト

【番号なしリストのCSS】

1
ul{
2
    margin: 1rem 0; /* 枠の外の隙間 */
3
    padding: 1rem 1.5rem; /* 枠の線から中の文字までの隙間 */
4
    color:#555; /* 文字色 */
5
    background:#FDF2F3; /* 背景色 */
6
    border: solid 1px #F198A4; /* 枠線 */
7
    border-radius:10px; /* 枠を丸く */
8
}
9
ul li{
10
    list-style:none; /* デフォルトのリストスタイルを消す */
11
}
12
ul li:before {
13
    content: '＊'; /* リストのスタイルを＊にします */
14
    color: #F198A4; /* リストのスタイルの色 */
15
    padding-right: 5px; /* リストの番号と文字の間に隙間をあける */
16
}

【番号付きリストのCSS】

1
ol{
2
    margin: 1rem 0; /* 枠の外の隙間 */
3
    padding: 1rem 1.5rem; /* 枠の線から中の文字までの隙間 */
4
    color:#555; /* 文字色 */
5
    background:#FDF2F3; /* 背景色 */
6
    border: solid 1px #F198A4; /* 枠線 */
7
    border-radius:10px; /* 枠を丸く */
8
}
9
ol li{
10
    list-style-type: none;
11
    counter-increment: number;
12
}
13
ol li:before {
14
    content: counter(number) ".";
15
    margin-right: 5px; /* リストの番号と文字の間に隙間をあける */
16
    color: #F198A4; /* リストの色 */
17
}

③枠にタイトルをつけてもかわいいよ。#

タイトル枠付きのリスト

HTMLではリストの外側を

ブロックで囲って、枠線を設定しています。

1
<div class="list3">
2
    <span class="title">タイトルのあるリスト(ol)</span>
3
    <ol>
4
        <li>いっちばーん</li>
5
        <li>にばーん</li>
6
        <li>さんばん</li>
7
    </ol>
8
</div>
9
<div class="list3">
10
    <span class="title">タイトルのあるリスト(ul)</span>
11
    <ul>
12
        <li>りんご</li>
13
        <li>いちご</li>
14
        <li>みかん</li>
15
    </ul>
16
</div>

【番号なしリストのCSS】

1
.list3 {
2
    position: relative;
3
    margin: 2rem auto;
4
    border: solid 1px #9CA5AA;
5
    border-radius:5px;
6
}
7
.list3 .title{
8
    position: absolute;
9
    display: inline-block;
10
    top: -13px;
11
    left: 10px;
12
    padding: 0 0.5rem;
13
    background: #FFF;
14
    font-size:0.9rem;
15
    color: #F3A7A9;
16
}
17
.list3 ul{
18
    color:#9CA5AA;
19
    padding:0px 1rem;
20
}
21
.list3 ul li{
22
    list-style: none;
23
}
24
.list3 ul li:before{
25
    color:#F3A7A9;
26
    content:"❤︎ "
27
}

【番号付きリストのCSS】

1
.list3 ol{
2
    color:#9CA5AA;
3
    padding:0px 1rem;
4
    list-style-type: none;
5
    counter-reset:number;
6
}
7
.list3 ol li:before{
8
    color:#F3A7A9;
9
    content: counter(number)". ";
10
    counter-increment: number;
11
}

④リストをポストイットぽく。#

ポストイットぽいリスト

【番号付きリストのCSS】

1
ul{
2
    padding:0px 1rem;
3
    list-style: none;
4
}
5
ul li{
6
    background:#F9E9Df;
7
    color:#F3A7A9;
8
    border:1px dashed #F3A7A9;
9
    margin:3px 0px;
10
    padding:5px 10px;
11
}
12
ul li:before{
13
    color:#F3A7A9;
14
    content:"● ";
15
}

【番号なしリストのCSS】

1
ol{
2
    padding:0px 1rem;
3
    list-style-type: none;
4
    counter-reset:number;
5
}
6
ol li{
7
    background:#F3A7A9;
8
    color:#FFFFFF;
9
    margin:3px 0px;
10
    padding:5px 10px;
11
}
12
ol li:before{
13
    color:#FFFFFF;
14
    content : "0" counter(number) " |";
15
    counter-increment: number;
16
    margin-right:10px;
17
}

⑤丸の番号リスト#

丸の番号リスト

【CSS】

1
ol{
2
    margin: 1rem 0;
3
    padding: 1rem;
4
    list-style-type: none;
5
    counter-reset:number;
6
}
7
ol li{
8
    color:#fe94af;
9
    margin:0 0 10px 0;
10
}
11
ol li:before{
12
    content : counter(number);
13
    counter-increment: number;
14
    color:#FFFFFF;
15
    width:30px;
16
    height:30px;
17
    padding:6px 8px;
18
    text-align:center;
19
    margin-right:5px;
20
    background:#fe94af;
21
    border-radius:50%;
22
}

⑥四角い枠のリスト#

四角い枠のリスト

1
ol{
2
    margin: 1rem;
3
    padding: 0;
4
    list-style-type: none;
5
    counter-reset:number;
6
}
7
ol li{
8
    margin:5px 0px;
9
    position:relative;
10
    line-height:30px;
11
    border: 1px solid #EEB1C0;
12
    padding-left:40px;
13
}
14
ol li:before {
15
    counter-increment: number;
16
    content: counter(number);
17
    position: absolute;
18
    left:0;
19
    width:30px;
20
    height:30px;
21
    line-height:30px;
22
    margin-right:40px;
23
    text-align:center;
24
    color: #FFFFFF;
25
    background:#EEB1C0;
26
    border-right: 1px solid #EEB1C0;
27
}

⑦番号のフォントを変てもおしゃれ#

リストの番号のフォントをかえる

ウェブフォントを使って、番号のフォントを変えましょう。

【番号付きリストのCSS】

1
@import url('https://fonts.googleapis.com/css?family=Rochester');
2
ol{
3
    margin: 1rem 0;
4
    padding: 1rem 1.5rem;
5
    counter-reset:number;
6
    list-style-type: none;
7
}
8
ol li:before {
9
    font-family:'Rochester', cursive;
10
    font-size:20px;
11
    color: #139F6B;
12
    margin-right: 10px;
13
    counter-increment: number;
14
    content: counter(number) ".";
15
}

@importでgoogle font「Rochester」をインストールして、
font-familyでフォントの名前を設定しています。

⑧間に線が入ったリスト#

間に線を入れたリスト

【番号付きリストのCSS】

1
ul{
2
    margin:1rem;
3
    padding:0rem;
4
    list-style-type:none;
5
    border-radius:5px;
6
}
7
ul li{
8
    line-height:1.6;
9
    padding:6px 0;
10
    margin:5px 0px;
11
}
12
ul li:not(:last-child){
13
    border-bottom:1px dashed #5AA0D6;
14
    margin-bottom:0;
15
}
16
ul li:before{
17
    content:'◆';
18
    padding:10px;
19
    font-weight:900;
20
    color:#5AA0D6;
21
}

⑨アイコンを使ったリスト#

王冠マークのリスト

Font Awesomeというウェブアイコンを使って、リストのスタイルを変えます。

との間に以下のコードを入れてから、CSSを設定していってください。

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

【リストのCSS】

1
ul{
2
    margin:1rem;
3
    padding:0rem;
4
    list-style-type:none;
5
}
6
ul li{
7
    background:#FFFDE3;
8
    border:1px solid #FFDC00;
9
    border-radius:5px;
10
    line-height:2;
11
    margin:5px 0px;
12
}
13
ul li:before{
14
    font-family: "Font Awesome 5 Free";
15
    content:'\f521';
16
    padding:10px;
17
    font-weight:900;
18
    color:#FFDC00;
19
}

contentで設定されている「\f521」が、王冠マークの番号です。
この番号は以下のチートシートから好きなアイコンを選んでください。

https://fontawesome.com/v5/cheatsheet

⑩リストのスタイルをアイコンに変える#

宝石マークのリスト

こちらも同じように、Font Awsomeを導入してからCSSを設定していきます。

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

1
ul{
2
    margin:1rem;
3
    padding:0rem;
4
    list-style:none;
5
}
6
ul li:before{
7
    font-family: "Font Awesome 5 Free";
8
    content:'\f3a5';
9
    padding:10px;
10
    font-weight:400;
11
    color:#FCB2A9;
12
}

まとめ#

最後にCodePenを貼っておきますね。
おしゃれなリストデザインでページを飾ってみてください。