← 静的パーツギャラリーへ戻る

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

埋め込みコード表示付きカード

上部に投稿プレビュー、下部に埋め込み用HTMLコード風の表示を配置したカードです。SNS投稿の埋め込み機能を紹介するブログ記事などの見本に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-15-10-card">
          <div class="d06-15-10-preview">
            <div class="d06-15-10-phead"><span class="d06-15-10-pavatar"></span><span class="d06-15-10-pname">工房だより</span></div>
            <p class="d06-15-10-ptext">今週の新作を店頭に並べました。</p>
          </div>
          <div class="d06-15-10-code">
            &lt;blockquote class="embed-post"&gt;<br>
            &nbsp;&nbsp;&lt;a href="#"&gt;投稿を見る&lt;/a&gt;<br>
            &lt;/blockquote&gt;
            <span class="d06-15-10-copy">コピー</span>
          </div>
        </div>

CSS

.d06-15-10-card{ width:100%; max-width:250px; text-align:left; }
        .d06-15-10-preview{ background:#fff; border:1px solid #e5e7eb; border-radius:10px 10px 0 0; padding:10px 12px; }
        .d06-15-10-phead{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
        .d06-15-10-pavatar{ width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#60a5fa,#3b82f6); flex-shrink:0; }
        .d06-15-10-pname{ font-size:10.5px; font-weight:700; color:#111827; }
        .d06-15-10-ptext{ font-size:10.5px; color:#374151; margin:0; }
        .d06-15-10-code{ position:relative; background:#1e293b; color:#94a3b8; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; line-height:1.7; padding:10px 12px; border-radius:0 0 10px 10px; }
        .d06-15-10-copy{ position:absolute; top:8px; right:8px; background:#334155; color:#e2e8f0; font-size:8.5px; padding:3px 8px; border-radius:5px; font-family:inherit; }

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