MENU
  1. ホーム
  2. HTML&CSS
  3. 【html&css】おしゃれな点・数字・アイコンリストデザイン13選

【html&css】おしゃれな点・数字・アイコンリストデザイン13選

HTML&CSS
list-design-001

本記事では、カスタマイズ可能なおしゃれな点・数字・アイコンリストデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次

おしゃれなフリー素材デザイン集

本サイトでは、リスト（ボックス）以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集
  • 見出し
  • ボタン
  • ボックス
  • ローディング
  • リスト
  • 吹き出し
  • アコーディオンメニュー
  • 検索フォーム
  • セレクトボックス
  • パンくずリスト
  • テキストボックス
  • ツールチップ
  • Q&Aリスト
  • 引用ボックス
  • レーダーチャート
  • 「READ MORE」ボタン
  • タブボタン
  • トグルボタン
  • チェックボックス
  • フッター
  • 付箋
  • ページネーション
  • 円グラフ
  • ラジオボタン
  • 目次
  • 棒グラフ
  • モーダルウィンドウ
  • タイムライン（ステップバー）

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

あわせて読みたい
Code Stock – UIコピペサイト

点付きのリスト

ここでは、以下の点付きのリストデザイン例を記載しています。

点付きのリストデザイン
  • スタンダード
  • 下線あり
  • 引用風
  • タイトル（小）
  • タイトル（大）
  • タイトル（大）＆背景色

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もリストページでは選択式でご用意しました。

調整項目一覧
  • 基調色
  • タグの種類：ul, ol
  • 枠線：あり, なし
  • 左線の色
  • 背景の色

ご興味があれば「リスト一覧ページ」を一読ください。

あわせて読みたい
LIST – Code Stock

スタンダード

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-1">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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;
}

下線あり

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-2">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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;
}

引用風

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-3">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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;
}

タイトル（小）

タイトル
  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<div class="list-4">
  <div>タイトル</div>
  <ul>
    <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
  </ul>
</div>
CSSコード表示
.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;
}

タイトル（大）

タイトル
  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<div class="list-5">
  <div>タイトル</div>
  <ul>
    <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
  </ul>
</div>
CSSコード表示
.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;
}

タイトル（大）＆背景色

タイトル
  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<div class="list-6">
  <div>タイトル</div>
  <ul>
    <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
  </ul>
</div>
CSSコード表示
.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, ol
  • 枠線：あり, なし
  • 番号の形状：円, 四角

ご興味があれば「リスト一覧ページ」を一読ください。

あわせて読みたい
LIST – Code Stock

番号に背景

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-7">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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, ol
  • 枠線：あり, なし
  • 番号の形状：円, 四角
  • 絵文字
  • 左線の色
  • 背景色
  • 線の色
  • アイコンの色

ご興味があれば「リスト一覧ページ」を一読ください。

あわせて読みたい
LIST – Code Stock

矢印

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-8">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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: '';
}

矢印（円形）

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-9">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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;
}

チェックマーク

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-10">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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: '';
}

絵文字

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-11">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.list-11 {
  list-style-type: '👉 ';
  padding: 1em 1em 1em 2.5em;
  border: 2px solid #2589d0;
}

.list-11 li {
  padding: .3em;
}

見出し風

  • リストの項目1
  • リストの項目2
  • リストの項目3
HTMLコード表示
<ul class="list-12">
  <li>リストの項目1</li>
  <li>リストの項目2</li>
  <li>リストの項目3</li>
</ul>
CSSコード表示
.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;
}

ディレクトリリスト (ツリー構造)

  • folder1
    • index.html
    • style.css
  • folder2
    • folder2-1
      • index.html
      • style.css
HTMLコード表示
<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>
CSSコード表示
.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&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次