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

画像添付風メッセージカード(静止)

画像枠付きのメッセージカードを固定表示したデザインです。写真共有やレポート報告の画面例に適しています。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <span class="av">M</span>
          <div class="body">
            <div class="img">画像</div>
            <p class="cap">現地の様子です。</p>
          </div>
        </div>

CSS

.d10-10-06 .card{ display:flex; gap:9px; align-items:flex-start; width:100%; }
        .d10-10-06 .av{ width:26px; height:26px; border-radius:50%; flex:none; background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-10-06 .body{ background:#f8f9fb; border-radius:10px; padding:8px; max-width:72%; }
        .d10-10-06 .img{ height:70px; border-radius:7px; background:repeating-linear-gradient(45deg,#e5e7eb,#e5e7eb 8px,#f3f4f6 8px,#f3f4f6 16px); display:flex; align-items:center; justify-content:center; font-size:11px; color:#9ca3af; margin-bottom:6px; }
        .d10-10-06 .cap{ margin:0; font-size:12px; color:#333; }

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