リスト系（チェック・番号）

アフィリエイトリンク(広告)がありますのでご了承ください。

※ 下記のCSSはそのままコピーしてご利用いただけます。他テーマでも使用可能です。

Lilac Bloom リストデザイン集（全10種）

箇条書き（ul）や番号付きリスト（ol）を華やかにするデザインです。標準のリストをクラス名で指定するだけで切り替えられます。

1. チェックリスト

3分考えて分からんことはAIに投げる
AIが書けるコードは代行させる
浮いた時間でコンテンツを作る


[title]HTML: チェックリスト[/title]
<ul class="lb-list-check">
	<li>3分考えて分からんことはAIに投げる</li>
	<li>AIが書けるコードは代行させる</li>
	<li>浮いた時間でコンテンツを作る</li>
</ul>


[title]CSS: チェックリスト[/title]
.lb-list-check {
	list-style: none;
	padding: 0;
    margin: 1em 0;
    padding-left: 0;
}

.lb-list-check li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}

.lb-list-check li::before {
	content: '✔';
	position: absolute;
	left: 0;
	color: #bd93f9;
	font-weight: bold;
}

2. 丸ドット・パステルリスト

基本設定の確認
レイアウトの選択
ロゴのアップロード


[title]HTML: チェックリスト[/title]
<ul class="lb-list-dot">
	<li>基本設定の確認</li>
	<li>レイアウトの選択</li>
	<li>ロゴのアップロード</li>
</ul>


[title]CSS: ドットリスト[/title]
.lb-list-dot {
    margin: 1em 0;
    padding-left: 0;
}

.lb-list-dot li {
	list-style: none;
	position: relative;
	padding-left: 20px;
}

.lb-list-dot li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	background: #bd93f9;
	border-radius: 50%;
}

3. 円形インデックス（番号付き）

ChatGPTを開く
プロンプトを入力する
コードを貼り付ける


[title]HTML: 円形番号[/title]
<ol class="lb-list-num-circle">
	<li>ChatGPTを開く</li>
	<li>プロンプトを入力する</li>
	<li>コードを貼り付ける</li>
</ol>


[title]CSS: 円形番号[/title]
.lb-list-num-circle {
	counter-reset: my-count;
	list-style: none;
	padding: 0;
    margin: 1em 0;
    padding-left: 0;
}

.lb-list-num-circle li {
	counter-increment: my-count;
	position: relative;
	padding-left: 35px;
	margin-bottom: 15px;
}

.lb-list-num-circle li::before {
	content: counter(my-count);
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	background: #bd93f9;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
}

4. スクエア番号リスト

ステップ１
ステップ２
ステップ３


[title]HTML: 四角番号[/title]
<ol class="lb-list-num-square">
	<li>ステップ１</li>
	<li>ステップ２</li>
	<li>ステップ３</li>
</ol>


[title]CSS: 四角番号[/title]
.lb-list-num-square { 
	counter-reset: item;
	list-style: none;
	margin: 1em 0;
    padding-left: 0;
}

.lb-list-num-square li {
	counter-increment: item;
	margin-bottom: 8px;
}

.lb-list-num-square li::before {
	content: counter(item);
	background: #6a5acd;
	color: white;
	padding: 2px 8px;
	border-radius: 2px;
	margin-right: 10px;
	font-size: 0.9em;
}

5. スッキリ下線リスト

項目その１
項目その２
項目その３


[title]HTML: 下線リスト[/title]
<ul class="lb-list-underline">
	<li>項目その１</li>
	<li>項目その２</li>
	<li>項目その３</li>
</ul>


[title]CSS: 下線リスト[/title]
.lb-list-underline {
	list-style: none;
	padding: 0;
	margin: 1em 0;
    padding-left: 0;
}

.lb-list-underline li {
	padding: 10px 0;
	border-bottom: 1px dashed #bd93f9;
}

6. 右矢印リスト

メリット１
メリット２
メリット３


[title]HTML: 矢印リスト[/title]
<ul class="lb-list-arrow">
	<li>メリット１</li>
	<li>メリット２</li>
	<li>メリット３</li>
</ul>


[title]CSS: 矢印リスト[/title]
.lb-list-arrow {
	list-style: none;
	margin: 1em 0;
    padding-left: 0;
}

.lb-list-arrow li::before {
  content: '▶';
  color: #bd93f9;
  margin-right: 10px;
}

7. 交互に色が変わるリスト

ライラック
ラベンダー
バイオレット


[title]HTML: ゼブラリスト[/title]
<ul class="lb-list-zebra">
	<li>ライラック</li>
	<li>ラベンダー</li>
	<li>バイオレット</li>
</ul>


[title]CSS: ゼブラリスト[/title]
.lb-list-zebra {
    margin: 1em 0;
    padding-left: 0;
}

.lb-list-zebra li {
	padding: 8px 15px;
	list-style: none;
}

.lb-list-zebra li:nth-child(odd) {
	background: #f9f5ff;
}

8. 二重括弧（【】）風

おすすめの理由
使い方のコツ
注意点について


[title]HTML: 括弧リスト[/title]
<ul class="lb-list-bracket">
	<li>おすすめの理由</li>
	<li>使い方のコツ</li>
	<li>注意点について</li>
</ul>


[title]CSS: 括弧リスト[/title]
.lb-list-bracket {
	list-style: none;
    margin: 1em 0;
    padding-left: 0;
}

.lb-list-bracket li::before {
	content: '【';
	color: #bd93f9;
}

.lb-list-bracket li::after {
	content: ' 】';
	color: #bd93f9;
}

9. 小さな吹き出しリスト

AIなら一瞬です
デザインも自由自在
コード不要で実装


[title]HTML: 吹き出しリスト[/title]
<ul class="lb-list-speech">
	<li>AIなら一瞬です</li>
	<li>デザインも自由自在</li>
	<li>コード不要で実装</li>
</ul>


[title]CSS: 吹き出しリスト[/title]
.lb-list-speech {
    margin: 1em 0;
    padding-left: 0;
}

.lb-list-speech li {
	background: #f1e9ff;
	padding: 5px 15px;
	border-radius: 20px;
	margin-bottom: 5px;
	display: inline-block;
	clear: both;
}

10. 立体ボーダー手順リスト

まずはインストール
次に基本設定を完了
最後に記事を公開！


[title]HTML: 立体手順[/title]
<ol class="lb-list-3d-num">
	<li>まずはインストール</li>
	<li>次に基本設定を完了</li>
	<li>最後に記事を公開！</li>
</ol>


[title]CSS: 立体手順[/title]
.lb-list-3d-num {
	counter-reset: step;
	list-style: none;
    margin: 1em 0;
    padding-left: 0;
}

.lb-list-3d-num li {
	counter-increment: step;
	border-left: 4px solid #bd93f9;
	background: #fff;
	margin-bottom: 10px;
	padding: 10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.lb-list-3d-num li::before {
	content: "STEP." counter(step) " ";
	font-weight: bold;
	color: #bd93f9;
	margin-right: 10px;
}

💡 調整のコツ
色は #bd93f9（標準的なライラック）を使用しています。サイトのロゴやメインカラーに合わせて、これらのカラーコードを書き換えるだけで、独自のブランドカラーに統一できます。