カード & テーブル

カード & テーブルに分類されるWeb表現技法12件。プロフィールカード、商品カード、統計カード、記事カードなど。ライブデモとコピーできるコード付き。

アバターと名前、肩書、一言コメント、SNSリンクとフォローボタンをまとめた定番のプロフィールカード。ホバーでふわりと浮き上がり、アバター周りの光が呼吸するように瞬きます。

商品写真と名称、星評価、価格、割引バッジをまとめたECサイト向けの商品カード。ホバーで写真がゆっくりズームし、カート追加ボタンは押すと完了表示に切り替わります。

指標名と大きな数値、前期比バッジ、簡易スパークラインを備えたダッシュボード用の統計カード。読み込み時に数値がカウントアップし、折れ線が滑らかに描画されます。

サムネイル画像とカテゴリタグ、タイトル、抜粋文、著者と日付をまとめたブログ記事カード。ホバーでサムネイルが拡大し、タイトルの色がアクセントカラーに変わります。

営業チームの実績データを見やすく整理した基本テーブル。ヘッダー強調・行区切り・数値の右寄せ・ステータスバッジで、日々のレポート表示にそのまま使えます。

在庫リスト向けの縞模様テーブル。行ホバーで色が変わり、チェックボックスで行を選択すると背景色が変化して、選んだ商品がひと目で分かります。

エントリーからエンタープライズまで4プランの機能を比較する表。おすすめプランの列を強調し、✓と×の記号で対応可否がひと目で分かります。

ホバーまたはクリックで3Dに回転し、裏面に詳細情報と申し込みボタンが現れるフリップカード。カード全体がゆっくり浮遊し、縁取りの光彩が回転し続けます。

カラフルに揺らめく背景の上に、backdrop-filterで透け感を出したグラスカード。薄い枠と斜めの光沢が時間差でゆっくり流れ、上品な質感を演出します。

列見出しをクリックすると昇順・降順で並び替わるソート機能付きテーブル。数値・文字列・日付のどの列でも矢印インジケータで並び順が確認できます。

社員名簿のような縦に長い表向けの固定ヘッダーテーブル。スクロールしてもヘッダー行と先頭列が画面に残り続け、どの行かすぐ把握できます。

注文一覧を画面幅に応じて表示切替するテーブル。広い画面は通常の表、スマホ幅では各行がラベル付きカードに変わり、狭い画面でも崩れません。