パーツ番号 10-10-12 ・ CSSのみ

ボイスメッセージ風バブル(固定波形表示)

再生ボタンと波形バーを組み合わせたボイスメッセージ風の吹き出しです。音声入力対応チャットの見た目説明に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="row me">
          <div class="bub voice">
            <span class="play">▶</span>
            <span class="wave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
            <span class="dur">0:32</span>
          </div>
        </div>

CSS

.d10-10-12 .row{ display:flex; justify-content:flex-end; width:100%; }
        .d10-10-12 .bub.voice{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:16px; border-bottom-right-radius:4px; background:#6366f1; }
        .d10-10-12 .play{ color:#fff; font-size:11px; }
        .d10-10-12 .wave{ display:flex; align-items:center; gap:2px; height:20px; }
        .d10-10-12 .wave i{ width:2.5px; border-radius:2px; background:rgba(255,255,255,.85); display:block; }
        .d10-10-12 .wave i:nth-child(1){ height:6px; } .d10-10-12 .wave i:nth-child(2){ height:14px; }
        .d10-10-12 .wave i:nth-child(3){ height:9px; } .d10-10-12 .wave i:nth-child(4){ height:18px; }
        .d10-10-12 .wave i:nth-child(5){ height:11px; } .d10-10-12 .wave i:nth-child(6){ height:16px; }
        .d10-10-12 .wave i:nth-child(7){ height:7px; } .d10-10-12 .wave i:nth-child(8){ height:12px; }
        .d10-10-12 .dur{ font-size:10px; color:#e0e1f5; }

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