細枠カード（最小限の装飾）
装飾を削ぎ落とし、 1px の細い枠線だけで構成した ミニマルなカード です。影やグラデーションを使わず border と控えめな border-radius だけで囲うことで、情報そのものを主役にしています。 article 要素を使っているため、ニュースや記事の一単位として意味的にも正しい構造です。
解説
装飾を削ぎ落とし、1px の細い枠線だけで構成したミニマルなカードです。影やグラデーションを使わず border と控えめな border-radius だけで囲うことで、情報そのものを主役にしています。article 要素を使っているため、ニュースや記事の一単位として意味的にも正しい構造です。中身は見出し・本文・続きを読むリンクという最小構成で、データの一覧表示に向きます。
使う場面
- ニュースやお知らせの一覧
- 情報密度を高く保ちたいダッシュボードのデータカード
- 装飾を抑えたい管理画面やビジネス系サイト
ホバーすると枠線の色だけが transition で濃く変わる、ごく控えめな反応です。本文の line-height を広めに取って読みやすさを確保しています。枠線の色や太さ、角丸は1か所ずつ変えるだけで印象を調整でき、複数枚をグリッドに並べても破綻しません。装飾が少ないぶん、見出しと本文の文字サイズの差で情報の階層をはっきりさせると、シンプルでも読みやすいカードになります。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
枠線の色や太さは変えられますか
変えられます。.tnb の border プロパティで色と太さ、border-radius で角の丸みを調整できます。ホバー時の色は :hover 側で指定します。
複数枚を並べて一覧にできますか
できます。親要素を grid や flex にして並べれば、装飾が控えめなので枚数が増えても見た目が崩れにくいです。