角リボン付きカード
角リボン付きカードは、カード右上に斜め 45 度のラベル帯を重ねて「PR」「NEW」「セール」などを目立たせる UI です。仕組みは難しくありません。カード側に position:relative と overflow:hidden を指定し、ラベルを position:absolute で配置したうえで tran…
解説
角リボン付きカードは、カード右上に斜め 45 度のラベル帯を重ねて「PR」「NEW」「セール」などを目立たせる UI です。仕組みは難しくありません。カード側に position:relative と overflow:hidden を指定し、ラベルを position:absolute で配置したうえで transform:rotate(45deg) で傾け、左右に長い padding を持たせることで、角をまたぐ帯に見せています。JavaScript は不要で、CSS だけで完結します。
使うとよい場面
- キャンペーンや広告枠を一覧の中で一目で識別させたいとき
- 商品カードに「在庫わずか」「限定」を付けたい EC サイト
- 料金プランで「おすすめ」を強調したい比較表
色は帯の background と文字色を変えるだけで用途別に作り分けできます。位置を左上にしたい場合は right 指定を left に変え、回転角を -45deg にします。短い語（2〜4 文字）ほど収まりが良く、長文を入れると折り返して崩れる点に注意してください。overflow:hidden を外すと帯がカード外にはみ出すので、角を切り落とす演出はこの指定で成立しています。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
リボンを左上に出すにはどうすればいいですか？
ラベルの位置指定を right から left に変え、回転角を rotate(45deg) から rotate(-45deg) にします。これで帯の傾きが左上の角に沿う向きになります。
リボンの色や文字を変えられますか？
はい。帯クラスの background で背景色、color で文字色を指定するだけで変更できます。文字は2〜4文字程度の短い語が崩れにくく、長文は折り返して見栄えが悪くなります。