HTML・CSSでつくる箇条書きリストのデザイン13選

要点を整理することでWebサイトの可読性をグッと上げてくれる「リスト」。どうせならユーザーの目を引くデザインにしたいですよね。そこで今回はHTML・CSSでつくるおしゃれな箇条書きリストのデザインをまとめました。ボックスの有無を切り替えることが可能で、もちろんul・olタグどちらにも対応しています。

点付きのリスト

点付きのリストのスタンダードバージョン

スタンダード

step1
デザインを調整する
  • タグの種類
  • 枠線
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<ul class="list-001">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.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;
}
点付きのリストの下線付きバージョン

下線付き

step1
デザインを調整する
  • タグの種類
  • 枠線
  • リストの項目1
  • リストの項目2
  • リストの項目3
step2
HTMLをコピペする
HTML
<ul class="list-009">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.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;
}
点付きのリストの引用ボックス風バージョン

引用ボックス風

step1
デザインを調整する
  • タグの種類
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<ul class="list-011">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.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バージョン

タイトル付き1

step1
デザインを調整する
  • タグの種類
タイトル
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<div class="list-008">
    <div>タイトル</div>
    <ul>
        <li>リストの項目1</li>
        <li>リストの項目2</li>
        <li>リストの項目3</li>
    </ul>
</div>
step3
CSSをコピペする
CSS
.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バージョン

タイトル付き2

step1
デザインを調整する
  • タグの種類
タイトル
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<div class="list-004">
    <div>タイトル</div>
    <ul>
        <li>リストの項目1</li>
        <li>リストの項目2</li>
        <li>リストの項目3</li>
    </ul>
</div>
step3
CSSをコピペする
CSS
.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バージョン

タイトル付き3

step1
デザインを調整する
  • タグの種類
タイトル
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<div class="list-005">
    <div>タイトル</div>
    <ul>
        <li>リストの項目1</li>
        <li>リストの項目2</li>
        <li>リストの項目3</li>
    </ul>
</div>
step3
CSSをコピペする
CSS
.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;
}

番号付きのリスト

番号付きのリストの背景付きバージョン

背景付き

step1
デザインを調整する
  • タグの種類
  • 枠線
  • 形状
  1. リストの項目1
  2. リストの項目2
  3. リストの項目3

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

step2
HTMLをコピペする
HTML
<ol class="list-002">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ol>
step3
CSSをコピペする
CSS
.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バージョン

矢印付き1

step1
デザインを調整する
  • タグの種類
  • 枠線
  • リストの項目1
  • リストの項目2
  • リストの項目3
step2
HTMLをコピペする
HTML
<ul class="list-007">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.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バージョン

矢印付き2

step1
デザインを調整する
  • タグの種類
  • 枠線
  • リストの項目1
  • リストの項目2
  • リストの項目3
step2
HTMLをコピペする
HTML
<ul class="list-012">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.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;
}
その他のリストのチェックマーク付きバージョン

チェックマーク付き

step1
デザインを調整する
  • タグの種類
  • 枠線
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<ul class="list-003">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.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: '';
}
その他のリストの絵文字付きバージョン

絵文字付き

step1
デザインを調整する
  • タグの種類
  • 枠線
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<ul class="list-010">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.list-010 {
    list-style-type: '👉';
    padding: 1em 1em 1em 2.5em;
    border: 2px solid #2589d0;
}

.list-010 li {
    padding: .3em;
}
その他のリストの見出し風バージョン

見出し風

step1
デザインを調整する
  • タグの種類
  • リストの項目1
  • リストの項目2
  • リストの項目3

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

step2
HTMLをコピペする
HTML
<ul class="list-006">
    <li>リストの項目1</li>
    <li>リストの項目2</li>
    <li>リストの項目3</li>
</ul>
step3
CSSをコピペする
CSS
.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;
}
その他のリストのディレクトリリスト(ツリー構造)バージョン

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

step1
デザインを調整する
  • アイコンの種類
  • folder1
    • index.html
    • style.css
  • folder2
    • folder2-1
      • index.html
      • style.css

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

step2
HTMLをコピペする
HTML
<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>
step3
CSSをコピペする
CSS
.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: '';
}