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

引用返信付きメッセージ(固定表示)

元のメッセージを引用しながら返信する形式を固定表示したものです。問い合わせ履歴の見本などに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="chat">
          <div class="row">
            <div class="quote">明日の集合時間は何時ですか？</div>
            <p class="bub">9時に駅前でお願いします。</p>
          </div>
        </div>

CSS

.d10-10-08 .chat{ width:100%; }
        .d10-10-08 .row{ max-width:82%; }
        .d10-10-08 .quote{ font-size:11px; color:#6b7280; background:#eef0f4; border-left:3px solid #9ca3af; padding:6px 10px; border-radius:6px 6px 0 0; }
        .d10-10-08 .bub{ margin:0; font-size:12.5px; color:#333; background:#f1f2f6; padding:9px 12px; border-radius:0 0 10px 10px; }

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