Webサイトで使える、おしゃれな箇条書き・リストデザインを15種類まとめました。
すべてHTMLとCSSをコピーして使用でき、文章や色、サイズも自由に変更できます。
シンプルな丸印や番号付きのリストから、チェックリスト、ステップ表示、タイトルと説明文を組み合わせたデザインまで幅広く掲載しています。
記事の要点や手順、サービスの特徴など、内容やサイトの雰囲気に合ったリストデザインを探してみてください。
シンプルで使いやすい箇条書きリスト
まずは、丸や四角などの記号を使った、シンプルな箇条書きリストを紹介します。
装飾が控えめで内容を選ばないため、記事の要点やサービスの特徴など、さまざまな場面で使いやすいデザインです。
DESIGN 01
シンプルな丸印リスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
小さな丸印を付けた、シンプルで使いやすい箇条書きリストです。
装飾が控えめなので、記事の要点やサービスの特徴など、さまざまな内容に使用できます。
<ul class="list-design-01">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-01 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-01 li {
position: relative;
margin: 0;
padding: 7px 0 7px 24px;
font-size: 15px;
line-height: 1.7;
}
.list-design-01 li::before {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 8px;
height: 8px;
background: #c98792;
border-radius: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-01 li {
padding-left: 22px;
font-size: 14px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 02
プラス記号の箇条書きリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
プラス記号をアクセントにした、すっきりとした箇条書きリストです。
シンプルながら目に留まりやすく、特徴やメリットなどを並べて紹介したい場面に適しています。
<ul class="list-design-02">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-02 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-02 li {
position: relative;
margin: 0;
padding: 7px 0 7px 28px;
font-size: 15px;
line-height: 1.7;
}
.list-design-02 li::before {
content: "+";
position: absolute;
top: 50%;
left: 1px;
color: #c98792;
font-size: 22px;
font-weight: 500;
line-height: 1;
transform: translateY(-52%);
}
@media screen and (max-width: 600px) {
.list-design-02 li {
padding-left: 26px;
font-size: 14px;
}
.list-design-02 li::before {
font-size: 20px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 03
角丸四角の箇条書きリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
角に丸みを付けた四角形を並べた、やわらかな印象の箇条書きリストです。
丸印よりも存在感があり、項目をすっきりと目立たせたいときに使いやすいデザインです。
<ul class="list-design-03">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-03 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-03 li {
position: relative;
margin: 0;
padding: 7px 0 7px 24px;
font-size: 15px;
line-height: 1.7;
}
.list-design-03 li::before {
content: "";
position: absolute;
top: 50%;
left: 1px;
width: 10px;
height: 10px;
background: #c98792;
border-radius: 3px;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-03 li {
padding-left: 22px;
font-size: 14px;
}
.list-design-03 li::before {
width: 9px;
height: 9px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 04
ひし形の箇条書きリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
ひし形の記号をアクセントにした、すっきりとした箇条書きリストです。
丸や四角とは少し異なる印象を与えられるため、シンプルなまま見た目に変化を加えたいときに適しています。
<ul class="list-design-04">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-04 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-04 li {
position: relative;
margin: 0;
padding: 7px 0 7px 26px;
font-size: 15px;
line-height: 1.7;
}
.list-design-04 li::before {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 9px;
height: 9px;
background: #c98792;
transform:
translateY(-50%)
rotate(45deg);
}
@media screen and (max-width: 600px) {
.list-design-04 li {
padding-left: 24px;
font-size: 14px;
}
.list-design-04 li::before {
width: 8px;
height: 8px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
番号や記号で分かりやすく伝えるリスト
続いて、番号やチェック、矢印を使った、内容を順序立てて伝えやすいリストを紹介します。
手順や確認項目、ポイントなどを分かりやすく整理したいときに役立つデザインです。
DESIGN 05
番号付きリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
項目の先頭に番号を表示した、順序が分かりやすいリストです。
手順や流れなど、読む順番を明確に伝えたい内容に適しています。
<ol class="list-design-05">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ol>.list-design-05 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
counter-reset: list-number;
}
.list-design-05 li {
position: relative;
margin: 0;
padding: 7px 0 7px 40px;
font-size: 15px;
line-height: 1.7;
counter-increment: list-number;
}
.list-design-05 li::before {
content: counter(list-number, decimal-leading-zero);
position: absolute;
top: 50%;
left: 0;
color: #c98792;
font-size: 15px;
font-weight: 600;
line-height: 1;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-05 li {
padding-left: 36px;
font-size: 14px;
}
.list-design-05 li::before {
font-size: 14px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 06
丸い番号のリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
数字を丸い背景で囲んだ、視認性の高い番号付きリストです。
手順や流れを目立たせながら整理できるため、操作方法やサービスの利用手順などに適しています。
<ol class="list-design-06">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ol>.list-design-06 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
counter-reset: list-number;
}
.list-design-06 li {
position: relative;
min-height: 30px;
margin: 0;
padding: 8px 0 8px 42px;
font-size: 15px;
line-height: 1.7;
counter-increment: list-number;
}
.list-design-06 li::before {
content: counter(list-number);
position: absolute;
top: 50%;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
background: #c98792;
border-radius: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-06 li {
min-height: 28px;
padding-left: 38px;
font-size: 14px;
}
.list-design-06 li::before {
width: 28px;
height: 28px;
font-size: 12px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 07
括弧付き番号リスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
数字を括弧で囲んだ、文章になじみやすい番号付きリストです。
主張が強すぎないため、手順や項目を落ち着いた印象で整理したいときに使いやすいデザインです。
<ol class="list-design-07">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ol>.list-design-07 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
counter-reset: list-number;
}
.list-design-07 li {
position: relative;
margin: 0;
padding: 7px 0 7px 48px;
font-size: 15px;
line-height: 1.7;
counter-increment: list-number;
}
.list-design-07 li::before {
content: "（" counter(list-number) "）";
position: absolute;
top: 50%;
left: 0;
color: #c98792;
font-size: 15px;
font-weight: 600;
line-height: 1;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-07 li {
padding-left: 44px;
font-size: 14px;
}
.list-design-07 li::before {
font-size: 14px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 08
チェックリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
項目の先頭にチェックマークを付けた、内容を確認しやすい箇条書きリストです。
特徴やメリット、持ち物など、確認してほしい内容を分かりやすく並べたいときに適しています。
<ul class="list-design-08">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-08 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-08 li {
position: relative;
margin: 0;
padding: 7px 0 7px 30px;
font-size: 15px;
line-height: 1.7;
}
.list-design-08 li::before {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 13px;
height: 7px;
border-bottom: 2px solid #c98792;
border-left: 2px solid #c98792;
transform:
translateY(-65%)
rotate(-45deg);
}
@media screen and (max-width: 600px) {
.list-design-08 li {
padding-left: 28px;
font-size: 14px;
}
.list-design-08 li::before {
width: 12px;
height: 6px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 09
四角いチェックリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
四角い背景の中にチェックマークを入れた、視認性の高い箇条書きリストです。
確認事項や完了項目、サービスに含まれる内容などを、はっきりと見せたいときに適しています。
<ul class="list-design-09">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-09 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-09 li {
position: relative;
margin: 0;
padding: 7px 0 7px 34px;
font-size: 15px;
line-height: 1.7;
}
.list-design-09 li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
background: #c98792;
border-radius: 3px;
transform: translateY(-50%);
}
.list-design-09 li::after {
content: "";
position: absolute;
top: 50%;
left: 5px;
width: 9px;
height: 5px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
transform:
translateY(-68%)
rotate(-45deg);
}
@media screen and (max-width: 600px) {
.list-design-09 li {
padding-left: 31px;
font-size: 14px;
}
.list-design-09 li::before {
width: 18px;
height: 18px;
}
.list-design-09 li::after {
left: 4px;
width: 9px;
height: 5px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 10
矢印付きリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
項目の先頭に矢印を付けた、流れを感じさせる箇条書きリストです。
リンク先や次の行動を案内する内容、手順を順番に見せたいときに使いやすいデザインです。
<ul class="list-design-10">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-10 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-10 li {
position: relative;
margin: 0;
padding: 7px 0 7px 32px;
font-size: 15px;
line-height: 1.7;
}
.list-design-10 li::before {
content: "→";
position: absolute;
top: 50%;
left: 0;
color: #c98792;
font-size: 21px;
font-weight: 500;
line-height: 1;
transform: translateY(-52%);
}
@media screen and (max-width: 600px) {
.list-design-10 li {
padding-left: 29px;
font-size: 14px;
}
.list-design-10 li::before {
font-size: 19px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
見せ方を工夫したおしゃれなリスト
ここからは、背景色や区切り線、見出しなどを取り入れたリストデザインを紹介します。
項目をグループごとに整理したり、伝えたい情報をより見やすくまとめたりしたいときにおすすめです。
DESIGN 11
交互カラーのリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
項目ごとに2色の背景を交互に付けた、内容を追いやすい箇条書きリストです。
項目数が多い場合でも行の区切りが分かりやすく、情報をすっきり整理して見せられます。
<ul class="list-design-11">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-11 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-11 li {
position: relative;
margin: 0;
padding: 12px 16px 12px 42px;
font-size: 15px;
line-height: 1.7;
border-radius: 4px;
}
.list-design-11 li:nth-child(odd) {
background: #f8edef;
}
.list-design-11 li:nth-child(even) {
background: #edf5fa;
}
.list-design-11 li + li {
margin-top: 4px;
}
.list-design-11 li::before {
content: "";
position: absolute;
top: 50%;
left: 18px;
width: 8px;
height: 8px;
background: #c98792;
border-radius: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-11 li {
padding: 10px 14px 10px 37px;
font-size: 14px;
}
.list-design-11 li::before {
left: 15px;
width: 7px;
height: 7px;
}
}
色の変更：
CSS内の「#c98792」「#f8edef」「#edf5fa」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 12
区切り線付きリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
項目の間に細い線を入れた、内容を区切って読みやすくした箇条書きリストです。
文章が長い場合や項目数が多い場合でも、それぞれの内容を見分けやすく整理できます。
<ul class="list-design-12">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>.list-design-12 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-12 li {
position: relative;
margin: 0;
padding: 12px 0 12px 26px;
font-size: 15px;
line-height: 1.7;
}
.list-design-12 li + li {
border-top: 1px solid #dfe2e8;
}
.list-design-12 li::before {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 8px;
height: 8px;
background: #c98792;
border-radius: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-12 li {
padding: 10px 0 10px 23px;
font-size: 14px;
}
.list-design-12 li::before {
width: 7px;
height: 7px;
}
}
色の変更：
CSS内の「#c98792」と「#dfe2e8」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 13
見出し付きリスト
はじめにやること
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
リストの上部に見出しを付けた、内容をひとまとまりにして伝えられるデザインです。
何についての項目なのかがひと目で分かるため、持ち物や注意点、手順などの整理に適しています。
<div class="list-design-13">
<p class="list-design-13__title">
はじめにやること
</p>
<ul class="list-design-13__items">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ul>
</div>.list-design-13 {
width: 100%;
}
.list-design-13__title {
display: inline-block;
min-width: 260px;
max-width: 100%;
margin: 0 0 12px !important;
padding: 9px 14px;
box-sizing: border-box;
font-size: 15px;
font-weight: 600;
line-height: 1.6;
background: #edf5fa;
border-radius: 4px;
}
.list-design-13__items {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-13__items li {
position: relative;
margin: 0;
padding: 7px 0 7px 24px;
font-size: 15px;
line-height: 1.7;
}
.list-design-13__items li::before {
content: "";
position: absolute;
top: 50%;
left: 2px;
width: 8px;
height: 8px;
background: #c98792;
border-radius: 50%;
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.list-design-13__title {
min-width: 220px;
padding: 8px 12px;
font-size: 14px;
}
.list-design-13__items li {
padding-left: 22px;
font-size: 14px;
}
}
色の変更：
CSS内の「#edf5fa」と「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の見出しとリスト項目を、表示したい内容へ書き換えてください。
DESIGN 14
ステップリスト
- デザインを選ぶ
- コードをコピーする
- サイトに貼り付ける
番号を縦につないだ、手順の流れがひと目で分かるステップリストです。
申し込み方法や作業の進め方など、複数の工程を順番に案内したいときに適しています。
<ol class="list-design-14">
<li>デザインを選ぶ</li>
<li>コードをコピーする</li>
<li>サイトに貼り付ける</li>
</ol>.list-design-14 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
counter-reset: step-number;
}
.list-design-14 li {
position: relative;
display: flex;
align-items: center;
min-height: 58px;
margin: 0;
padding: 8px 0 8px 62px;
font-size: 15px;
line-height: 1.7;
counter-increment: step-number;
}
.list-design-14 li::before {
content: "STEP\A" counter(step-number);
position: absolute;
top: 50%;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 1.15;
text-align: center;
white-space: pre;
background: #c98792;
border-radius: 50%;
transform: translateY(-50%);
}
.list-design-14 li:not(:last-child)::after {
content: "";
position: absolute;
top: calc(50% + 21px);
left: 22px;
width: 2px;
height: calc(100% - 42px);
background: #e4b8c0;
}
@media screen and (max-width: 600px) {
.list-design-14 li {
min-height: 54px;
padding-left: 56px;
font-size: 14px;
}
.list-design-14 li::before {
width: 42px;
height: 42px;
font-size: 9px;
}
.list-design-14 li:not(:last-child)::after {
top: calc(50% + 19px);
left: 20px;
height: calc(100% - 38px);
}
}
色の変更：
CSS内の「#c98792」と「#e4b8c0」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内の日本語部分を、表示したい内容へ書き換えてください。
DESIGN 15
タイトルと説明文のリスト
-
デザインを選ぶ
好みの見た目を探します。
-
コードをコピーする
HTMLとCSSをコピーします。
-
サイトに貼り付ける
使用するページへ貼り付けます。
各項目にタイトルと説明文を組み合わせた、情報を詳しく伝えられるリストです。
サービスの特徴や機能、作業内容など、項目名だけでは伝わりにくい内容を補足したいときに適しています。
<ul class="list-design-15">
<li>
<p class="list-design-15__title">
デザインを選ぶ
</p>
<p class="list-design-15__text">
好みの見た目を探します。
</p>
</li>
<li>
<p class="list-design-15__title">
コードをコピーする
</p>
<p class="list-design-15__text">
HTMLとCSSをコピーします。
</p>
</li>
<li>
<p class="list-design-15__title">
サイトに貼り付ける
</p>
<p class="list-design-15__text">
使用するページへ貼り付けます。
</p>
</li>
</ul>.list-design-15 {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.list-design-15 li {
position: relative;
margin: 0;
padding: 9px 0 9px 28px;
}
.list-design-15 li::before {
content: "";
position: absolute;
top: 18px;
left: 2px;
width: 9px;
height: 9px;
background: #c98792;
border-radius: 50%;
}
.list-design-15__title {
margin: 0 0 2px !important;
font-size: 15px;
font-weight: 600;
line-height: 1.6;
}
.list-design-15__text {
margin: 0 !important;
font-size: 13px;
line-height: 1.7;
opacity: 0.72;
}
@media screen and (max-width: 600px) {
.list-design-15 li {
padding-left: 25px;
}
.list-design-15 li::before {
top: 17px;
width: 8px;
height: 8px;
}
.list-design-15__title {
font-size: 14px;
}
.list-design-15__text {
font-size: 12px;
}
}
色の変更：
CSS内の「#c98792」を、お好みのカラーコードへ変更してください。
文字の変更：
HTML内のタイトルと説明文を、表示したい内容へ書き換えてください。
まとめ
今回は、Webサイトで使えるおしゃれな箇条書き・リストデザインを15種類紹介しました。
箇条書きは、記号や色、項目の並べ方を少し変えるだけでも、内容の伝わりやすさやページ全体の印象が変わります。
気になるデザインがあれば、HTMLとCSSをコピーし、サイトの雰囲気に合わせて文章や色を変更して使ってみてください。
リスト全体を囲んでもう少し目立たせたい場合は、「おしゃれな囲み枠・ボックスデザイン20選」もおすすめです。
リストと組み合わせる見出しを探したい場合は、「シンプルでおしゃれな見出しデザイン17選」もあわせてご覧ください。
お気に入りのデザインを取り入れて、読みやすく伝わりやすいページ作りに役立ててみてください。
