フィードカード Feed Card
SNSフィードに表示されるカード型の投稿UI。ユーザー情報、コンテンツ、アクションをまとめて表示。
ライブデモ
T
今日のランチは最高でした！新しくオープンしたカフェのパスタが絶品。おすすめです。
12 いいね 3 コメント 2 シェア
ソースコード
<div class="demo-feed-card">
<div class="demo-feed-header">
<div class="demo-feed-avatar">T</div>
<div class="demo-feed-user-info">
<div class="demo-feed-username">田中太郎 <span class="demo-feed-handle">@tanaka_taro</span></div>
<div class="demo-feed-timestamp">3時間前</div>
</div>
<button class="demo-feed-more">⋯</button>
</div>
<div class="demo-feed-content">
<p>今日のランチは最高でした！新しくオープンしたカフェのパスタが絶品。おすすめです。</p>
<div class="demo-feed-image"></div>
</div>
<div class="demo-feed-stats">
<span>12 いいね</span>
<span>3 コメント</span>
<span>2 シェア</span>
</div>
<div class="demo-feed-actions">
<button class="demo-feed-action demo-feed-like">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
いいね
</button>
<button class="demo-feed-action">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
コメント
</button>
<button class="demo-feed-action">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
シェア
</button>
<button class="demo-feed-action demo-feed-bookmark">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
保存
</button>
</div>
</div>.demo-feed-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }
.demo-feed-header {
display: flex; align-items: center; gap: 10px; padding: 14px 16px;
}
.demo-feed-avatar {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
background: color-mix(in srgb, var(--ui-primary) 15%, #fff);
color: var(--ui-primary); display: flex; align-items: center;
justify-content: center; font-weight: 700; font-size: 16px;
}
.demo-feed-user-info { flex: 1; min-width: 0; }
.demo-feed-username { font-size: 14px; font-weight: 600; color: #111; }
.demo-feed-handle { font-weight: 400; color: #999; font-size: 13px; }
.demo-feed-timestamp { font-size: 12px; color: #999; }
.demo-feed-more {
border: none; background: none; font-size: 18px; color: #999;
cursor: pointer; padding: 4px 8px; border-radius: 50%;
transition: background 0.2s;
}
.demo-feed-more:hover { background: #f3f4f6; }
.demo-feed-content { padding: 0 16px; }
.demo-feed-content p { margin: 0 0 12px; font-size: 14px; color: #333; line-height: 1.6; }
.demo-feed-image {
width: 100%; height: 160px; border-radius: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--ui-primary) 15%, #fff), color-mix(in srgb, var(--ui-primary) 5%, #f3f4f6));
}
.demo-feed-stats {
display: flex; gap: 16px; padding: 12px 16px; font-size: 12px; color: #999;
}
.demo-feed-actions {
display: flex; border-top: 1px solid #f3f4f6;
}
.demo-feed-action {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 10px; border: none; background: none;
font-size: 13px; color: #666; cursor: pointer; transition: all 0.2s;
}
.demo-feed-action:hover { background: #f9fafb; color: var(--ui-primary); }
.demo-feed-action:hover svg { stroke: var(--ui-primary); }
.demo-feed-action.liked { color: #ef4444; }
.demo-feed-action.liked svg { stroke: #ef4444; fill: #ef4444; }
.demo-feed-action.bookmarked { color: var(--ui-primary); }
.demo-feed-action.bookmarked svg { stroke: var(--ui-primary); fill: var(--ui-primary); }(function(){
var likeBtn = document.querySelector('.demo-feed-like');
likeBtn.addEventListener('click', function(){ this.classList.toggle('liked'); });
var bookmarkBtn = document.querySelector('.demo-feed-bookmark');
bookmarkBtn.addEventListener('click', function(){ this.classList.toggle('bookmarked'); });
})();AIプロンプト
Basic
SNSフィードカードをHTML/CSSで作ってください。ユーザーアバター、名前、投稿テキスト、画像、いいね・コメント・シェアボタンを含みます。
Custom
以下の仕様でフィードカードを実装してください。 - ユーザー情報（アバター、名前、ハンドル名、タイムスタンプ） - 投稿テキストと画像プレースホルダー - エンゲージメント数表示（いいね、コメント、シェア） - アクションボタン（いいね、コメント、シェア、保存） - プライマリカラー: #2563eb - いいね・保存のトグル機能
Advanced
高機能なフィードカードを実装してください。 - 画像カルーセル（複数画像対応） - 長文テキストの「もっと見る」折りたたみ - リンクプレビュー（OGP風カード） - インライン動画再生 - ダブルタップでいいね（ハートアニメーション付き） - 投稿メニュー（編集、削除、報告） - シェア時のSNS選択ダイアログ - Intersection Observerで遅延読み込み