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

モールス信号風下線見出し

見出し下に点と線を交互に並べたモールス信号風の装飾。通信・テック系サービスや無線関連コンテンツの見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">モールス風見出し</h4>
          <div class="morse"><span class="dot"></span><span class="dash"></span><span class="dot"></span><span class="dot"></span><span class="dash"></span><span class="dot"></span></div>
        </div>

CSS

.d02-10-35 .wrap{ text-align:center; }
        .d02-10-35 .ttl{ all:unset; display:block; font-size:21px; font-weight:800; color:#1f2937; margin-bottom:8px; }
        .d02-10-35 .morse{ display:flex; align-items:center; justify-content:center; gap:4px; }
        .d02-10-35 .dot{ width:5px; height:5px; border-radius:50%; background:#059669; }
        .d02-10-35 .dash{ width:16px; height:5px; border-radius:2px; background:#059669; }

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