コピペで使える！箇条書きデザイン9選！

投稿・ページ内で使える、箇条書きのデザインサンプルをご紹介します。

 

コードをコピーしてソースモードで入力してお使いいただけます。

もちろん自分好みにカスタマイズして使って頂いても構いません。

 

 

 

A頭のアイコンが点

A-01.シンプルな箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: circle; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: circle; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

A-02.枠線つき箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="border: 1px solid #000000; list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="border: 1px solid #000000; list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: circle; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: circle; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

A-03.背景色つき箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: #f8f9f1; list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: #f8f9f1; list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: circle; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: circle; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

A-04.下線つきの箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: none; list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: none; list-style-type: disc; margin: 2em 0; padding: 24px 36px 24px 36px; line-height: 2.5;">
  <li>
    <p style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</p>
    <ul style="list-style-type: circle; margin: 16px 16px 24px; line-height: 2.5;">
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    <p style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</p>
    <ul style="list-style-type: circle; margin: 16px 16px 24px; line-height: 2.5;">
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

B頭のアイコンが番号

B-01.シンプルな箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

B-02.枠線つき箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="border: 1px solid #000000; list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="border: 1px solid #000000; list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

B-03.背景色つき箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: #f8f9f1; list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
  <li>シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: #f8f9f1; list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin-bottom: 16px; line-height: 2.5;">
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    <li>シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

B-04.下線つきの箇条書き

• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き
• シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: none; list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
  <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
</ul>

● 箇条書きの中に箇条書きする場合

• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
• シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き
  • シンプルな箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: none; list-style-type: decimal-leading-zero; margin: 2em 0; padding: 24px 36px 24px 48px; line-height: 2.5;">
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin: 16px 16px 24px; line-height: 2.5;">
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    </ul>
  </li>
  <li>
    シンプルな箇条書き
    <ul style="list-style-type: disc; margin: 16px 16px 24px; line-height: 2.5;">
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    <li style="border-bottom: 1px dashed #666666;">シンプルな箇条書き</li>
    </ul>
  </li>
</ul>

C付箋風

• 付箋風の箇条書き
• 付箋風の箇条書き
• 付箋風の箇条書き
• 付箋風の箇条書き
• 付箋風の箇条書き

▼以下のグレーの中をコピーして使ってください

<ul style="background: none; list-style-type: none; margin: 2em 0; padding: 0 0 24px; line-height: 2.5;">
  <li style="background: #f5f5f5; border-left: 6px solid #000000; margin: 0 0 6px; padding-left: 8px; box-shadow: 0 2px 0 #dddddd;">付箋風の箇条書き</li>
  <li style="background: #f5f5f5; border-left: 6px solid #000000; margin: 0 0 6px; padding-left: 8px; box-shadow: 0 2px 0 #dddddd;">付箋風の箇条書き</li>
  <li style="background: #f5f5f5; border-left: 6px solid #000000; margin: 0 0 6px; padding-left: 8px; box-shadow: 0 2px 0 #dddddd;">付箋風の箇条書き</li>
  <li style="background: #f5f5f5; border-left: 6px solid #000000; margin: 0 0 6px; padding-left: 8px; box-shadow: 0 2px 0 #dddddd;">付箋風の箇条書き</li>
  <li style="background: #f5f5f5; border-left: 6px solid #000000; margin: 0 0 6px; padding-left: 8px; box-shadow: 0 2px 0 #dddddd;">付箋風の箇条書き</li>
</ul>

ソースモード切り替え方法