WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。
本記事では、カスタマイズ可能なおしゃれな点・数字・アイコンリストデザインのコードをご紹介します。
HTMLとCSSの両方をコピペすればすぐに利用できます。
コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。
また、リスト作成にはul・li・olタグを利用します。
ul・li・olタグの使い方を詳しく知りたい人は「【html&css】ul・li・olの使い方とおしゃれなデザインリスト」を一読ください。
divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。
本サイトでは、リスト（ボックス）以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。
以下は、主なデザインカテゴリーです。
ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。
ここでは、以下の点付きのリストデザイン例を記載しています。
実際のデザインプレビューとHTML＆CSSコードを記載しています。
さらに、以下の項目もリストページでは選択式でご用意しました。
ご興味があれば「リスト一覧ページ」を一読ください。
<ul class="list-1">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-1 {
list-style-type: disc;
padding: 1em 1em 1em 2.5em;
border: 2px solid #2589d0;
}
.list-1 li {
padding: .3em .3em .3em 0;
}
.list-1 li::marker {
color: #2589d0;
font-size: 1.1em;
}<ul class="list-2">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-2 {
list-style-type: disc;
list-style-position: inside;
padding: 1em;
border: 2px solid #2589d0;
}
.list-2 li {
padding: .5em;
}
.list-2 li:not(:last-child) {
border-bottom: 1px dashed #2589d0;
}
.list-2 li::marker {
color: #2589d0;
font-size: 1.1em;
}<ul class="list-3">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-3 {
list-style-type: disc;
padding: 1em 1em 1em 2.5em;
border-left: 5px solid #2589d0;
background-color: #f2f2f2;
}
.list-3 li {
padding: .3em .3em .3em 0;
}
.list-3 li::marker {
color: #2589d0;
font-size: 1.1em;
}<div class="list-4">
<div>タイトル</div>
<ul>
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>
</div>.list-4 {
position: relative;
padding: 1.5em 1em 1em 2.5em;
border: 2px solid #2589d0;
}
.list-4 > div {
position: absolute;
top: -.75em;
left: 1em;
padding: 0 .5em;
background-color: #fff;
color: #2589d0;
font-weight: 600;
}
.list-4 ul {
list-style-type: disc;
margin: 0;
padding: 0;
}
.list-4 li {
padding: .3em .3em .3em 0;
}
.list-4 li::marker {
color: #2589d0;
font-size: 1.1em;
}<div class="list-5">
<div>タイトル</div>
<ul>
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>
</div>.list-5 {
border: 2px solid #2589d0;
}
.list-5 > div {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 10px 0;
background-color: #2589d0;
color: #fff;
font-weight: 600;
}
.list-5 ul {
list-style-type: disc;
margin: 0;
padding: 1em 1em 1em 2.5em;
}
.list-5 li {
padding: .3em .3em .3em 0;
}
.list-5 li::marker {
color: #2589d0;
font-size: 1.1em;
}<div class="list-6">
<div>タイトル</div>
<ul>
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>
</div>.list-6 {
background-color: #f2f2f2;
}
.list-6 > div {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 10px 0;
background-color: #2589d0;
color: #fff;
font-weight: 600;
}
.list-6 ul {
list-style-type: disc;
margin: 0;
padding: 1em 1em 1em 2.5em;
}
.list-6 li {
padding: .3em .3em .3em 0;
}
.list-6 li::marker {
color: #2589d0;
font-size: 1.1em;
}ここでは、以下の番号付きのリストデザイン例を記載しています。
実際のデザインプレビューとHTML＆CSSコードを記載しています。
さらに、以下の項目もリストページでは選択式でご用意しました。
ご興味があれば「リスト一覧ページ」を一読ください。
<ul class="list-7">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-7 {
list-style-type: none;
padding: 1em;
border: 2px solid #2589d0;
counter-reset: li;
}
.list-2 li {
display: flex;
align-items: center;
padding: .3em;
}
.list-7 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;
}ここでは、以下のアイコンのリストデザイン例を記載しています。
実際のデザインプレビューとHTML＆CSSコードを記載しています。
さらに、以下の項目もリストページでは選択式でご用意しました。
ご興味があれば「リスト一覧ページ」を一読ください。
<ul class="list-8">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-8 {
list-style-type: none;
padding: 1em;
border: 2px solid #2589d0;
}
.list-8 li {
display: flex;
align-items: center;
gap: 0 10px;
padding: .3em;
}
.list-8 li::before {
transform: rotate(-45deg);
width: .4em;
height: .4em;
border-bottom: 3px solid #2589d0;
border-right: 3px solid #2589d0;
content: '';
}<ul class="list-9">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-9 {
list-style-type: none;
padding: 1em;
border: 2px solid #2589d0;
}
.list-9 li {
display: flex;
align-items: center;
gap: 0 10px;
position: relative;
padding: .3em .3em .3em 1.5em;
}
.list-9 li::before,
.list-9 li::after {
position: absolute;
content: '';
}
.list-9 li::before {
left: 0;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
background-color: #2589d0;
}
.list-9 li::after {
left: .6em;
transform: translateX(-75%) rotate(-45deg);
width: .3em;
height: .3em;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}<ul class="list-10">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-10 {
list-style-type: none;
padding: 1em;
border: 2px solid #2589d0;
}
.list-10 li {
display: flex;
align-items: center;
gap: 0 5px;
padding: .3em;
}
.list-10 li::before {
display: inline-block;
width: 10px;
height: 5px;
border-bottom: 2px solid #2589d0;
border-left: 2px solid #2589d0;
transform: rotate(-45deg) translateY(-1.5px);
content: '';
}<ul class="list-11">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-11 {
list-style-type: '👉 ';
padding: 1em 1em 1em 2.5em;
border: 2px solid #2589d0;
}
.list-11 li {
padding: .3em;
}<ul class="list-12">
<li>リストの項目1</li>
<li>リストの項目2</li>
<li>リストの項目3</li>
</ul>.list-12 {
list-style-type: none;
padding: 0;
margin: 0 auto 2em;
}
.list-12 li {
margin-bottom: 5px;
padding: .5em .7em;
border-left: 5px solid #2589d0;
background-color: #f2f2f2;
font-weight: 600;
}<ul class="list-13">
<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-13 {
padding: 1em;
list-style-type: none;
}
.list-13 ul {
list-style-type: none;
padding-left: 1.5em;
margin: 0;
}
.list-13 li {
list-style-type: none;
position: relative;
padding: .3em .3em .3em 1em;
color: #333333;
}
.list-13 li::before,
.list-13 li::after {
position: absolute;
left: 0;
background-color: #333333;
content: '';
}
.list-13 li::before {
top: 1em;
width: 10px;
height: 1px;
}
.list-13 li::after {
top: 0;
width: 1px;
height: 100%;
}
.list-13 li:last-child::after {
height: 1em;
}
/* フォルダ名（span）のスタイル調整 */
.list-13 span {
position: relative;
display: inline-block;
padding-left: 1.5em; /* アイコンを配置するための余白 */
font-weight: bold; /* お好みで太字に */
}
/* フォルダアイコンの描画 */
.list-13 span::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1.2em;
height: 1.2em;
/* 青いフォルダアイコンのSVGデータを背景として読み込む */
background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%232589d0"><path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/></svg>');
background-size: contain;
background-repeat: no-repeat;
}HTMLコードは、箇条書きを表示したい記事の本文中（カスタムHTMLブロックなど）に貼り付けます。
CSSコードは、WordPressテーマの「追加CSS」や子テーマのスタイルシートに貼り付けてください。
リスト（ulやol）にはブラウザの初期設定で左側に余白が設定されています。
CSSでul { padding-left: 0; }を指定することで、左側の余白を消して左端にぴったり揃えることができます。
はい、可能です。
CSSでli { list-style-type: none; }と指定することで、デフォルトの黒丸や数字を完全に非表示にできます。
当記事のデザインはすべてこの設定をベースにしています。
HTMLの<ul>（順序なしリスト）というタグを<ol>（順序ありリスト）に変更することで数字のリストになります。
CSSでcounter-incrementを使えば、数字のおしゃれな装飾も可能です。
適用可能です。
WordPressのエディタで作った箇条書きブロックを選択し、右側の設定パネルの「追加CSSクラス」に、当記事のCSSのクラス名（例：.custom-listなど）を入力することで、デザインを反映できます。
サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。
「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。
