パーツ番号 02-10-19 ・ CSSのみ

矢印下線見出し

見出し下に小さな矢印を連続で並べた帯を敷くスタイル。手順紹介やフロー説明の導入見出しに進行感を持たせられる。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">導入ステップ</h4>
          <div class="arrows">&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;</div>
        </div>

CSS

.d02-10-19 .wrap{ text-align:center; }
        .d02-10-19 .ttl{ all:unset; display:block; font-size:22px; font-weight:800; color:#1f2937; margin-bottom:6px; }
        .d02-10-19 .arrows{ color:#f59e0b; font-size:14px; letter-spacing:2px; font-weight:700; }

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