本文へスキップ

CRG-12 — LISTS

リスト装飾22点 在庫あり

チェック・番号・タイムライン。並べ方の見本。 すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-12-001
  • コピーして貼るだけ
  • 商用利用OK
  • 画像は使いません

丸チェックリストCheck Circles

.cg-ls-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 700;
}
.cg-ls-check li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cg-ls-check li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E8590C;
  clip-path: circle(50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff' stroke-width='2.6' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23fff' stroke-width='2.6' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
<ul class="cg-ls-check"><li>コピーして貼るだけ</li><li>商用利用OK</li><li>画像は使いません</li></ul>
GROSS WT. 1035 B ORIGINAL
CRG-12-002
  1. カテゴリを開く
  2. コピーを押す
  3. サイトに貼る

角番号リストNumbered Boxes

.cg-ls-num {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 700;
  counter-reset: cgnum;
}
.cg-ls-num li {
  display: flex;
  align-items: center;
  gap: 12px;
  counter-increment: cgnum;
}
.cg-ls-num li::before {
  content: counter(cgnum, decimal-leading-zero);
  flex: none;
  padding: 3px 8px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #1B1A17;
  border-radius: 5px;
}
<ol class="cg-ls-num"><li>カテゴリを開く</li><li>コピーを押す</li><li>サイトに貼る</li></ol>
GROSS WT. 615 B ORIGINAL
CRG-12-003

矢印リンクリストArrow Links

.cg-ls-arrow {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 220px;
}
.cg-ls-arrow a {
  position: relative;
  display: block;
  padding: 13px 30px 13px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1B1A17;
  text-decoration: none;
  border-bottom: 2px solid #D9D5CB;
  transition: padding-left .2s, color .2s;
}
.cg-ls-arrow a::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: solid #E8590C;
  border-width: 2.5px 2.5px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.cg-ls-arrow a:hover { padding-left: 12px; color: #E8590C; }
<ul class="cg-ls-arrow"><li><a href="#">会社概要</a></li><li><a href="#">採用情報</a></li><li><a href="#">お問い合わせ</a></li></ul>
GROSS WT. 758 B ORIGINAL
CRG-12-004
  • 2024会社設立
  • 2025サービス公開
  • 202610万ユーザー突破

縦タイムラインVertical Timeline

.cg-ls-tl {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cg-ls-tl li {
  position: relative;
  padding: 0 0 24px 28px;
  font-size: 14px;
}
.cg-ls-tl li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: -6px;
  width: 2px;
  background: #D9D5CB;
}
.cg-ls-tl li:last-child::before { display: none; }
.cg-ls-tl li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E8590C;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #E8590C;
}
.cg-ls-tl b {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #E8590C;
}
<ul class="cg-ls-tl"><li><b>2024</b>会社設立</li><li><b>2025</b>サービス公開</li><li><b>2026</b>10万ユーザー突破</li></ul>
GROSS WT. 805 B ORIGINAL
CRG-12-005
  • ブレンドコーヒー¥480
  • カフェラテ¥550
  • チーズケーキ¥620

ドットリーダー(メニュー表)Dotted Leaders

.cg-ls-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 250px;
  display: grid;
  gap: 12px;
  font-size: 14px;
}
.cg-ls-menu li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cg-ls-menu i {
  flex: 1;
  border-bottom: 2px dotted #B5AF9F;
  transform: translateY(-4px);
}
.cg-ls-menu b { font-variant-numeric: tabular-nums; }
<ul class="cg-ls-menu"><li><span>ブレンドコーヒー</span><i></i><b>¥480</b></li><li><span>カフェラテ</span><i></i><b>¥550</b></li><li><span>チーズケーキ</span><i></i><b>¥620</b></li></ul>
GROSS WT. 559 B ORIGINAL
CRG-12-006
  • 受付開始 9:00
  • 開演 10:00
  • 休憩 12:00
  • 終了 16:00

ストライプ行リストStriped Rows

.cg-ls-stripe {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 230px;
  font-size: 14px;
  border: 2px solid #1B1A17;
  border-radius: 8px;
  overflow: hidden;
}
.cg-ls-stripe li { padding: 11px 16px; background: #fff; }
.cg-ls-stripe li:nth-child(even) { background: #F3EFE5; }
<ul class="cg-ls-stripe"><li>受付開始 9:00</li><li>開演 10:00</li><li>休憩 12:00</li><li>終了 16:00</li></ul>
GROSS WT. 406 B ORIGINAL
CRG-12-007
  • 設営はスタッフが行います
  • 雨天の場合は中止です
  • 駐車場はありません

四角ビュレットSquare Bullets

.cg-ls-sq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.cg-ls-sq li {
  position: relative;
  padding-left: 20px;
}
.cg-ls-sq li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 9px;
  height: 9px;
  background: #E8590C;
  transform: rotate(45deg);
}
<ul class="cg-ls-sq"><li>設営はスタッフが行います</li><li>雨天の場合は中止です</li><li>駐車場はありません</li></ul>
GROSS WT. 483 B ORIGINAL
CRG-12-008
  1. グラデボタン
  2. マーカー見出し
  3. グラスカード

ランキングリストRanking

.cg-ls-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
  counter-reset: cgrank;
}
.cg-ls-rank li {
  display: flex;
  align-items: center;
  gap: 14px;
  counter-increment: cgrank;
}
.cg-ls-rank li::before {
  content: counter(cgrank);
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  border-radius: 50%;
  color: #fff;
  background: #8B857A;
}
.cg-ls-rank li:nth-child(1)::before { background: #D4A017; }
.cg-ls-rank li:nth-child(2)::before { background: #9AA2AC; }
.cg-ls-rank li:nth-child(3)::before { background: #A66A3A; }
<ol class="cg-ls-rank"><li>グラデボタン</li><li>マーカー見出し</li><li>グラスカード</li></ol>
GROSS WT. 827 B ORIGINAL
CRG-12-009
  • デザイン確定
  • 実装
  • 公開

完了チェックリストProgress Checklist

.cg-ls-todo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 14.5px;
  font-weight: 700;
}
.cg-ls-todo li {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cg-ls-todo li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid #B5AF9F;
  border-radius: 6px;
  box-sizing: border-box;
}
.cg-ls-todo li.done {
  color: #8B857A;
  text-decoration: line-through;
  text-decoration-color: #E8590C;
  text-decoration-thickness: 2px;
}
.cg-ls-todo li.done::before {
  border-color: #E8590C;
  background: #E8590C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.5 3.5L18 8' stroke='%23fff' stroke-width='3' fill='none'/%3E%3C/svg%3E") center / 14px no-repeat;
}
<ul class="cg-ls-todo"><li class="done">デザイン確定</li><li class="done">実装</li><li>公開</li></ul>
GROSS WT. 909 B ORIGINAL
CRG-12-010
コピペ
コードをコピーして貼り付けること。
スニペット
再利用できる小さなコード片。

用語定義リストDefinition List

.cg-ls-def {
  margin: 0;
  width: 260px;
  font-size: 13.5px;
}
.cg-ls-def dt {
  display: inline-block;
  font-weight: 900;
  color: #E8590C;
  border-bottom: 2px solid #E8590C;
  padding-bottom: 2px;
  margin-bottom: 6px;
}
.cg-ls-def dd {
  margin: 0 0 16px;
  color: #5A5650;
  line-height: 1.7;
}
<dl class="cg-ls-def"><dt>コピペ</dt><dd>コードをコピーして貼り付けること。</dd><dt>スニペット</dt><dd>再利用できる小さなコード片。</dd></dl>
GROSS WT. 482 B ORIGINAL
CRG-12-011

タグクラウドTag Cloud

.cg-ls-cloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 260px;
}
.cg-ls-cloud a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #5A5650;
  background: #EFECE4;
  border-radius: 30px;
  text-decoration: none;
  transition: all .18s;
}
.cg-ls-cloud a:hover {
  color: #fff;
  background: #E8590C;
  transform: translateY(-2px);
}
<ul class="cg-ls-cloud"><li><a href="#">CSS</a></li><li><a href="#">HTML</a></li><li><a href="#">Design</a></li><li><a href="#">Tips</a></li><li><a href="#">Layout</a></li></ul>
GROSS WT. 621 B ORIGINAL
CRG-12-012
無料で使えますか？

はい、すべて無料です。

商用利用はできますか？

可能です。クレジット表記も不要です。

開閉FAQリストFAQ Accordion

.cg-ls-faq { width: 270px; display: grid; gap: 8px; }
.cg-ls-faq details {
  border: 2px solid #1B1A17;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.cg-ls-faq summary {
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 36px;
}
.cg-ls-faq summary::-webkit-details-marker { display: none; }
.cg-ls-faq summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: #E8590C;
}
.cg-ls-faq details[open] summary::after { content: "−"; }
.cg-ls-faq p {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 13px;
  color: #5A5650;
}
<div class="cg-ls-faq"><details open><summary>無料で使えますか？</summary><p>はい、すべて無料です。</p></details><details><summary>商用利用はできますか？</summary><p>可能です。クレジット表記も不要です。</p></details></div>
GROSS WT. 984 B ORIGINAL
CRG-12-013
  1. 疑似要素を作らずマーカー自体を装飾
  2. 色・サイズ・フォントを変更できる
  3. content で表記も変えられる

::markerカスタム番号Custom ::marker

/* li::before を使わず、リスト標準のマーカーを直接装飾する */
.cg-ls-marker {
  margin: 0;
  padding-left: 34px;
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  max-width: 280px;
}
.cg-ls-marker li::marker {
  content: counter(list-item) " — ";
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #E8590C;
}
<ol class="cg-ls-marker"><li>疑似要素を作らずマーカー自体を装飾</li><li>色・サイズ・フォントを変更できる</li><li>content で表記も変えられる</li></ol>
GROSS WT. 565 B ORIGINAL
CRG-12-014
  • 要件を確認
  • デザイン作成
  • コーディング

順にチェックが付くリストCascading Checks

.cg-ls-cascade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
}
.cg-ls-cascade li {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cg-ls-cascade li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid #C9C5BA;
  border-radius: 50%;
  box-sizing: border-box;
  background: #E8590C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.5 3.5L18 8' stroke='%23fff' stroke-width='3' fill='none'/%3E%3C/svg%3E") center / 13px no-repeat;
  background-color: transparent;
  animation: cg-ls-cascade-check 4.2s ease-in-out infinite;
}
.cg-ls-cascade li:nth-child(2)::before { animation-delay: .5s; }
.cg-ls-cascade li:nth-child(3)::before { animation-delay: 1s; }
@keyframes cg-ls-cascade-check {
  0%, 8% { background-color: transparent; border-color: #C9C5BA; background-size: 0 0; }
  20%, 88% { background-color: #E8590C; border-color: #E8590C; background-size: 13px; }
  96%, 100% { background-color: transparent; border-color: #C9C5BA; background-size: 0 0; }
}
<ul class="cg-ls-cascade"><li>要件を確認</li><li>デザイン作成</li><li>コーディング</li></ul>
GROSS WT. 1240 B ORIGINAL
CRG-12-015
  • 高速表示
  • 商用利用OK
  • 登録不要

順にスライドインするリストStaggered Slide

.cg-ls-slidein {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  width: 210px;
}
.cg-ls-slidein li {
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 700;
  background: #fff;
  border-left: 4px solid #E8590C;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 3px 10px rgba(27, 26, 23, .08);
  opacity: 0;
  animation: cg-ls-slidein-move 4.5s ease-in-out infinite;
}
.cg-ls-slidein li:nth-child(2) { animation-delay: .35s; }
.cg-ls-slidein li:nth-child(3) { animation-delay: .7s; }
@keyframes cg-ls-slidein-move {
  0% { opacity: 0; transform: translateX(-24px); }
  12%, 82% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; }
}
<ul class="cg-ls-slidein"><li>高速表示</li><li>商用利用OK</li><li>登録不要</li></ul>
GROSS WT. 780 B ORIGINAL
CRG-12-016

ホバーで進むリストShift on Hover

.cg-ls-shift {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 220px;
}
.cg-ls-shift a {
  position: relative;
  display: block;
  padding: 13px 4px 13px 0;
  font-size: 14px;
  font-weight: 700;
  color: #1B1A17;
  text-decoration: none;
  border-bottom: 2px solid #E3DFD4;
  transition: padding-left .3s cubic-bezier(.3, 1, .4, 1);
}
.cg-ls-shift a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2.5px;
  background: #E8590C;
  transform: translateY(-50%);
  transition: width .3s cubic-bezier(.3, 1, .4, 1);
}
.cg-ls-shift a:hover { padding-left: 26px; }
.cg-ls-shift a:hover::before { width: 18px; }
<ul class="cg-ls-shift"><li><a href="#">制作実績</a></li><li><a href="#">料金プラン</a></li><li><a href="#">お問い合わせ</a></li></ul>
GROSS WT. 805 B ORIGINAL
CRG-12-017
  • HTML/CSS
  • JavaScript
  • Design

伸びるスキルバーGrowing Skill Bars

.cg-ls-skill {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  width: 230px;
}
.cg-ls-skill span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}
.cg-ls-skill i {
  display: block;
  height: 9px;
  border-radius: 6px;
  background: linear-gradient(90deg, #E8590C, #F2B707);
  width: var(--w, 50%);
  transform-origin: left;
  animation: cg-ls-skill-grow 3.6s cubic-bezier(.3, 1, .4, 1) infinite;
}
@keyframes cg-ls-skill-grow {
  0% { transform: scaleX(0); }
  30%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
<ul class="cg-ls-skill"><li><span>HTML/CSS</span><i style="--w:90%"></i></li><li><span>JavaScript</span><i style="--w:70%"></i></li><li><span>Design</span><i style="--w:80%"></i></li></ul>
GROSS WT. 783 B ORIGINAL
CRG-12-018
NEWS
  • 夏季休業のお知らせ
  • 新パーツを24点追加しました
  • メンテナンス完了

ニュースティッカーNews Ticker

.cg-ls-ticker {
  display: flex;
  align-items: stretch;
  width: 270px;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.cg-ls-ticker b {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: .12em;
  color: #fff;
  background: #1B1A17;
}
.cg-ls-ticker .win {
  flex: 1;
  overflow: hidden;
  height: 40px;
}
.cg-ls-ticker ul {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: cg-ls-ticker-roll 7.5s ease-in-out infinite;
}
.cg-ls-ticker li {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
@keyframes cg-ls-ticker-roll {
  0%, 26% { transform: translateY(0); }
  33%, 59% { transform: translateY(-40px); }
  66%, 92% { transform: translateY(-80px); }
  100% { transform: translateY(0); }
}
<div class="cg-ls-ticker"><b>NEWS</b><div class="win"><ul><li>夏季休業のお知らせ</li><li>新パーツを24点追加しました</li><li>メンテナンス完了</li></ul></div></div>
GROSS WT. 1074 B ORIGINAL
CRG-12-020
  1. 人気のパーツ
  2. 定番のパーツ
  3. 新着のパーツ

番号が弾むランキングPopping Ranks

.cg-ls-pop {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  counter-reset: cgpop;
}
.cg-ls-pop li {
  display: flex;
  align-items: center;
  gap: 13px;
  counter-increment: cgpop;
}
.cg-ls-pop li::before {
  content: counter(cgpop);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: #E8590C;
  border-radius: 8px;
  animation: cg-ls-pop-beat 2.6s cubic-bezier(.3, 1.5, .5, 1) infinite;
}
.cg-ls-pop li:nth-child(2)::before { animation-delay: .2s; background: #C2426B; }
.cg-ls-pop li:nth-child(3)::before { animation-delay: .4s; background: #3A5A78; }
@keyframes cg-ls-pop-beat {
  0%, 30%, 100% { transform: scale(1); }
  15% { transform: scale(1.25) rotate(-5deg); }
}
<ol class="cg-ls-pop"><li>人気のパーツ</li><li>定番のパーツ</li><li>新着のパーツ</li></ol>
GROSS WT. 973 B ORIGINAL
CRG-12-021
  1. 1注文
  2. 2発送
  3. 3到着

ステップ進捗インジケーターStep Progress

.cg-ls-steps {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 240px;
}
.cg-ls-steps li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #A39D8F;
  text-align: center;
}
.cg-ls-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 3px;
  background: #E4E1DA;
  z-index: 0;
}
.cg-ls-steps li.done:not(:last-child)::after {
  background: #E8590C;
  transform: scaleX(1);
  transform-origin: left;
  animation: cg-ls-steps-fill .6s ease both;
}
.cg-ls-steps i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-style: normal;
  font-size: 13px;
  border-radius: 50%;
  background: #E4E1DA;
  color: #A39D8F;
  transition: background .3s, color .3s;
}
.cg-ls-steps li.done i,
.cg-ls-steps li.active i {
  background: #E8590C;
  color: #fff;
}
.cg-ls-steps li.active i {
  animation: cg-ls-steps-pulse 1.6s ease-in-out infinite;
}
.cg-ls-steps li.done span,
.cg-ls-steps li.active span { color: #1B1A17; }
@keyframes cg-ls-steps-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes cg-ls-steps-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .5); }
  50% { box-shadow: 0 0 0 6px rgba(232, 89, 12, 0); }
}
<ol class="cg-ls-steps"><li class="done"><i>1</i><span>注文</span></li><li class="active"><i>2</i><span>発送</span></li><li><i>3</i><span>到着</span></li></ol>
GROSS WT. 1577 B ORIGINAL
CRG-12-022
  • 01要件定義とヒアリング
  • 02ワイヤーフレーム作成
  • 03デザインカンプ制作
  • 04コーディング実装
  • 05ブラウザ動作確認
  • 06クライアントレビュー
  • 07修正対応
  • 08公開・納品

スクロール連動リストインScroll-Driven View Reveal List

/* animation-timeline: view() は要素自身のスクロール進入を時間軸にする機能。JS(IntersectionObserver)無しで
   スクロール連動の出現演出ができる。非対応ブラウザは@supportsでopacity:1の通常リストに落とす */
.cg-ls-view-box {
  height: 220px;
  overflow-y: auto;
  padding: 4px 16px;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  background: #F5F3EE;
}
.cg-ls-view-list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cg-ls-view-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-left: 4px solid #E8590C;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  opacity: .2;
  transform: translateX(-18px) scale(.96);
  animation: cg-ls-view-in linear both;
  animation-timeline: view(block);
  animation-range: entry 0% cover 35%;
}
.cg-ls-view-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1B1A17;
  color: #fff;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
}
@keyframes cg-ls-view-in {
  from { opacity: .2; transform: translateX(-18px) scale(.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@supports not (animation-timeline: view()) {
  .cg-ls-view-item { opacity: 1; transform: none; }
}
<div class="cg-ls-view-box"><ul class="cg-ls-view-list"><li class="cg-ls-view-item"><span class="cg-ls-view-num">01</span>要件定義とヒアリング</li><li class="cg-ls-view-item"><span class="cg-ls-view-num">02</span>ワイヤーフレーム作成</li><li class="cg-ls-view-item"><span class="cg-ls-view-num">03</span>デザインカンプ制作</li><li class="cg-ls-view-item"><span class="cg-ls-view-num">04</span>コーディング実装</li><li class="cg-ls-view-item"><span class="cg-ls-view-num">05</span>ブラウザ動作確認</li><li class="cg-ls-view-item"><span class="cg-ls-view-num">06</span>クライアントレビュー</li><li class="cg-ls-view-item"><span class="cg-ls-view-num">07</span>修正対応</li><li class="cg-ls-view-item"><span class="cg-ls-view-num">08</span>公開・納品</li></ul></div>
GROSS WT. 2271 B ORIGINAL