



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
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
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
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
- リストの項目2
- リストの項目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
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
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
-
folder2-1
ディレクトリ・ファイルやサイトマップを表示する場合におすすめなリスト。フォルダ要素に関しては、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: '';
}
箇条書きに欠かせない点のみを付けた、とてもシンプルなリスト。シンプルイズベストということで、個人的にイチオシのパーツです。