ソーシャル・コミュニケーション
フィードカード
SNSの投稿カード。アバター・名前・時刻のヘッダー、本文、グラデーションのメディア、いいね／コメント／シェアのアクション行。いいねはタップで切り替わり、件数も更新される。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<article class="post" id="post">
<header class="post-head">
<span class="post-ava" style="background:linear-gradient(135deg,#2b50c7,#7fa4ff)">ゆ</span>
<div class="post-id">
<span class="post-name">ゆうと</span>
<span class="post-time">30分前</span>
</div>
<button class="more-btn" type="button" aria-label="その他">
<svg width="16" height="16" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.4" fill="currentColor"/><circle cx="8" cy="8" r="1.4" fill="currentColor"/><circle cx="13" cy="8" r="1.4" fill="currentColor"/></svg>
</button>
</header>
<p class="post-text">週末の朝さんぽ。空気がきもちよかった☀️</p>
<div class="post-media" role="img" aria-label="投稿写真"></div>
<div class="post-actions">
<button class="act like-btn" type="button" aria-pressed="false" data-base="128">
<svg class="heart" width="19" height="19" viewBox="0 0 19 19"><path d="M9.5 16.5S2 11.7 2 6.8A3.8 3.8 0 019.5 4.3 3.8 3.8 0 0117 6.8c0 4.9-7.5 9.7-7.5 9.7z" stroke-width="1.4"/></svg>
<span class="act-label">いいね</span>
</button>
<button class="act" type="button">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none"><path d="M16 9.2c0 3-2.9 5.4-6.5 5.4-.9 0-1.7-.1-2.5-.4L3 15.5l1.1-2.9C3.4 11.7 3 10.5 3 9.2 3 6.2 5.9 3.8 9.5 3.8S16 6.2 16 9.2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
<span class="act-label">コメント</span>
</button>
<button class="act" type="button">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none"><path d="M15.5 3.5L8 11M15.5 3.5l-4.7 12-2.3-4.5L4 8.3l11.5-4.8z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
<span class="act-label">シェア</span>
</button>
</div>
<p class="post-likes"><b id="likeNum">128</b> 件のいいね</p>
</article>