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

Pinterest風ピン埋め込みカード

縦長の画像と保存ボタン、参照元サイト名を備えたPinterest風の静止カードです。インテリアやレシピなど画像中心コンテンツの引用見本に向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-15-07-card">
          <div class="d06-15-07-img">
            <span class="d06-15-07-save">保存</span>
          </div>
          <p class="d06-15-07-title">北欧風リビングのレイアウト実例集</p>
          <div class="d06-15-07-source"><span class="d06-15-07-favicon"></span>interior-note.example</div>
        </div>

CSS

.d06-15-07-card{ width:150px; margin:0 auto; text-align:left; }
        .d06-15-07-img{ position:relative; height:150px; border-radius:16px; background:linear-gradient(160deg,#ffafbd,#ffc3a0); margin-bottom:8px; }
        .d06-15-07-save{ position:absolute; top:8px; right:8px; background:#e60023; color:#fff; font-size:9.5px; font-weight:700; padding:5px 10px; border-radius:16px; }
        .d06-15-07-title{ font-size:10.5px; font-weight:700; color:#111; line-height:1.4; margin:0 0 4px; }
        .d06-15-07-source{ display:flex; align-items:center; gap:5px; font-size:9px; color:#5f5f5f; }
        .d06-15-07-favicon{ width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,#6a93ff,#8f6aff); flex-shrink:0; }

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