← 動的パーツギャラリーへ戻る

パーツ番号 01-04-03 ・ CSSのみ

番号付き特徴リスト(縦)

大きな01/02/03の番号と説明を縦に並べたリストです。ホバーで番号に色が差します。WordPressのサービスの流れや強み紹介に使えます。

hoverautocss

プレビュー

ソースコード

HTML

<ol class="d01-04-03-list">
          <li>
            <span class="d01-04-03-n">01</span>
            <div class="d01-04-03-t"><b>ヒアリング</b><p>課題と目標を丁寧に整理します。</p></div>
          </li>
          <li>
            <span class="d01-04-03-n">02</span>
            <div class="d01-04-03-t"><b>設計・提案</b><p>最適なプランをご提案します。</p></div>
          </li>
          <li>
            <span class="d01-04-03-n">03</span>
            <div class="d01-04-03-t"><b>実装・改善</b><p>公開後も継続してサポート。</p></div>
          </li>
        </ol>

CSS

.prev.d01-04-03{background:#fff}
        .d01-04-03-list{list-style:none;margin:0;padding:0;width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px}
        .d01-04-03-list li{display:flex;align-items:flex-start;gap:16px}
        .d01-04-03-n{font-size:38px;font-weight:800;line-height:1;color:#e0e4ef;-webkit-text-stroke:0;transition:color .3s ease;min-width:56px}
        .d01-04-03-list li:hover .d01-04-03-n{color:#5b7cfa}
        .d01-04-03-t b{display:block;font-size:15px;color:#20263c;margin-bottom:4px}
        .d01-04-03-t p{margin:0;font-size:12.5px;line-height:1.55;color:#6a7288}

クラス名 .d01-04-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。