【コピペで完成】HTML・CSSでつくるおしゃれな箇条書きリストのデザイン13選

点付きのリスト

スタンダード

基調色：#2589d0
タグの種類ulol
枠線ありなし

リストの項目1
リストの項目2
リストの項目3

箇条書きに欠かせない点のみを付けた、とてもシンプルなリスト。シンプルイズベストということで、個人的にイチオシのパーツです。

<ul class="list-001">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-001 {
    list-style-type: disc;
    padding: 1em 1em 1em 2.5em;
    border: 2px solid #2589d0;
}

.list-001 li {
    padding: .3em .3em .3em 0;
}

.list-001 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

下線付き

基調色：#2589d0
タグの種類ulol
枠線ありなし

リストの項目1
リストの項目2
リストの項目3

<ul class="list-009">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-009 {
    list-style-type: disc;
    list-style-position: inside;
    padding: 1em;
    border: 2px solid #2589d0;
}

.list-009 li {
    padding: .5em;
}

.list-009 li:not(:last-child) {
    border-bottom: 1px dashed #2589d0;
}

.list-009 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

引用ボックス風

左枠線の色：#2589d0
背景色：#f2f2f2
タグの種類ulol

リストの項目1
リストの項目2
リストの項目3

左に枠線を付けた、引用ボックスでよく見るデザインです。

<ul class="list-011">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-011 {
    list-style-type: disc;
    padding: 1em 1em 1em 2.5em;
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
}

.list-011 li {
    padding: .3em .3em .3em 0;
}

.list-011 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

タイトル付き1

基調色：#2589d0
タグの種類ulol

タイトル

リストの項目1
リストの項目2
リストの項目3

枠線の上にタイトルを置いたリストです。タイトルをより目立たせたい場合はフォントサイズを調整するのもアリかもしれません。

<div class="list-008">
    <div>タイトル</div>
    <ul>
        <li>リストの項目1</li>
        <li>リストの項目2</li>
        <li>リストの項目3</li>
    </ul>
</div>

.list-008 {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #2589d0;
}

.list-008 > div {
    position: absolute;
    top: -.75em;
    left: 1em;
    padding: 0 .5em;
    background-color: #fff;
    color: #2589d0;
    font-weight: 600;
}

.list-008 ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
}

.list-008 li {
    padding: .3em .3em .3em 0;
}

.list-008 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

タイトル付き2

基調色：#2589d0
タグの種類ulol

タイトル

リストの項目1
リストの項目2
リストの項目3

上部にタイトルを付けたリストです。多用するとくどく思われてしまうので、よりリストを強調させたい場合のみに使うのがおすすめです。

<div class="list-004">
    <div>タイトル</div>
    <ul>
        <li>リストの項目1</li>
        <li>リストの項目2</li>
        <li>リストの項目3</li>
    </ul>
</div>

.list-004 {
    border: 2px solid #2589d0;
}

.list-004 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
}

.list-004 ul {
    list-style-type: disc;
    margin: 0;
    padding: 1em 1em 1em 2.5em;
}

.list-004 li {
    padding: .3em .3em .3em 0;
}

.list-004 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

タイトル付き3

左枠線の色：#2589d0
背景色：#f2f2f2
タグの種類ulol

タイトル

リストの項目1
リストの項目2
リストの項目3

上部にタイトルを付けたリスト(マテリアルver)です。

<div class="list-005">
    <div>タイトル</div>
    <ul>
        <li>リストの項目1</li>
        <li>リストの項目2</li>
        <li>リストの項目3</li>
    </ul>
</div>

.list-005 {
    background-color: #f2f2f2;
}

.list-005 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
}

.list-005 ul {
    list-style-type: disc;
    margin: 0;
    padding: 1em 1em 1em 2.5em;
}

.list-005 li {
    padding: .3em .3em .3em 0;
}

.list-005 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

番号付きのリスト

背景付き

リストの項目1
リストの項目2
リストの項目3

数字を囲んだリストです。四角or円にするか、お好みで形状を選んでみてください。

<ol class="list-002">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ol>

.list-002 {
    list-style-type: none;
    padding: 1em;
    border: 2px solid #2589d0;
    counter-reset: li;
}

.list-002 li {
    display: flex;
    align-items: center;
    padding: .3em;
}

.list-002 li::before {
    display: inline-block;
    min-width: 1.7em;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #2589d0;
    color: #fff;
    font-weight: bold;
    font-size: .75em;
    line-height: 1.7em;
    text-align: center;
    content: counter(li);
    counter-increment: li;
}

その他のリスト

矢印付き1

基調色：#2589d0
タグの種類ulol
枠線ありなし

リストの項目1
リストの項目2
リストの項目3

<ul class="list-007">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-007 {
    list-style-type: none;
    padding: 1em;
    border: 2px solid #2589d0;
}

.list-007 li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: .3em;
}

.list-007 li::before {
    transform: rotate(-45deg);
    width: .4em;
    height: .4em;
    border-bottom: 3px solid #2589d0;
    border-right: 3px solid #2589d0;
    content: '';
}

矢印付き2

基調色：#2589d0
タグの種類ulol
枠線ありなし

リストの項目1
リストの項目2
リストの項目3

<ul class="list-012">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-012 {
    list-style-type: none;
    padding: 1em;
    border: 2px solid #2589d0;
}

.list-012 li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    position: relative;
    padding: .3em .3em .3em 1.5em;
}

.list-012 li::before,
.list-012 li::after {
    position: absolute;
    content: '';
}

.list-012 li::before {
    left: 0;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background-color: #2589d0;
}

.list-012 li::after {
    left: .6em;
    transform: translateX(-75%) rotate(-45deg);
    width: .3em;
    height: .3em;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

チェックマーク付き

基調色：#2589d0
タグの種類ulol
枠線ありなし

リストの項目1
リストの項目2
リストの項目3

チェックマークを付けた、Todoリストのようにも見えるリスト。比較的シンプルなデザインでありながらユーザーの目を引きやすいのが特徴です。

<ul class="list-003">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-003 {
    list-style-type: none;
    padding: 1em;
    border: 2px solid #2589d0;
}

.list-003 li {
    display: flex;
    align-items: center;
    gap: 0 5px;
    padding: .3em;
}

.list-003 li::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%232589d0%22%20d%3D%22M8.2%2C20.6l-7.8-7.8c-0.5-0.5-0.5-1.2%2C0-1.7L2%2C9.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0L9%2C14.7L20.3%2C3.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0l1.7%2C1.7%20c0.5%2C0.5%2C0.5%2C1.2%2C0%2C1.7L9.8%2C20.6C9.4%2C21.1%2C8.6%2C21.1%2C8.2%2C20.6L8.2%2C20.6z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}

絵文字付き

基調色：#2589d0
タグの種類ulol
枠線ありなし

リストの項目1
リストの項目2
リストの項目3

絵文字を使うことで可愛さが増したリスト。ぜひお好きな絵文字を指定してみてください。

<ul class="list-010">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-010 {
    list-style-type: '👉';
    padding: 1em 1em 1em 2.5em;
    border: 2px solid #2589d0;
}

.list-010 li {
    padding: .3em;
}

見出し風

左枠線の色：#2589d0
背景色：#f2f2f2
タグの種類ulol

リストの項目1
リストの項目2
リストの項目3

背景と左に枠線を付けた、見出し風のリストです。見た目的にもかなり目立つ部類なので、リストを強調したい時に利用するのがおすすめです。

<ul class="list-006">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>

.list-006 {
    list-style-type: none;
}

.list-006 li {
    margin-bottom: 5px;
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
    font-weight: 600;
}

ディレクトリリスト(ツリー構造)

基調色：#333333
アイコンの色：#2589d0
アイコンの種類タイプ1タイプ2

folder1
- index.html
- style.css
folder2
- folder2-1
  - index.html
  - style.css

ディレクトリ・ファイルやサイトマップを表示する場合におすすめなリスト。フォルダ要素に関しては、spanタグで囲んであげることでアイコンが左に付くようになります。

<ul class="list-013">
    <li>
        <span>folder1</span>
        <ul>
            <li>index.html</li>
            <li>style.css</li>
        </ul>
    </li>
    <li>
        <span>folder2</span>
        <ul>
            <li>
                <span>folder2-1</span>
                <ul>
                    <li>index.html</li>
                    <li>style.css</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

.list-013 {
    padding: 1em;
}

.list-013 li {
    list-style-type: none;
    position: relative;
    padding: .3em .3em .3em 1em;
    color: #333333;
}

.list-013 li::before,
.list-013 li::after {
    position: absolute;
    left: 0;
    background-color: #333333;
    content: '';
}

.list-013 li::before {
    top: 1em;
    width: 10px;
    height: 1px;
}

.list-013 li::after {
    top: 0;
    width: 1px;
    height: 100%;
}

.list-013 li:last-child::after {
    height: 1em;
}

.list-013 span {
    display: flex;
    align-items: center;
}

.list-013 span::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%232589d0%22%3E%3Cpath%20d%3D%22M21.8%206h-9l-3-3H2.2C1%203%200%204%200%205.2v13.5C0%2020%201%2021%202.2%2021h19.5c1.2%200%202.2-1%202.2-2.2V8.2C24%207%2023%206%2021.8%206z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}