カードに斜めリボンを付ける方法【HTML/CSS・サンプルコード付き】

タイトル・説明文・サイズ・配置・背景色・枠線・影・文字などを設定して、HTMLとCSSを自動生成できます。

カードに斜めリボンを付ける方法

カードの右上に斜めリボンを付ける方法を紹介します。このサンプルでは、カード内に配置した「NEW」ラベルをCSSのtransformで45度回転させ、右上を横切る斜めリボンとして表示します。画像やJavaScriptを使用せず、HTMLとCSSだけでカードに目立つ装飾を追加できます。

ブログの新着記事、ECサイトの新商品、会員サイトの新しいコンテンツ、サービス紹介など、特定のカードを目立たせたい場面に利用できます。カードの右上へ青色のリボンを重ねることで、カードタイトルや説明文の配置を大きく変えずに「NEW」などの情報を分かりやすく表示できます。

HTMLではリボンの「NEW」という文字、カードタイトル、説明文を変更できます。CSSではカードの横幅、余白、背景色、枠線、角丸、影に加えて、リボンの横幅、位置、背景色、文字サイズ、回転角度などを調整できます。シンプルなカードにアクセントを加えたい場合や、複数のカードの中から特定の項目を目立たせたい場合に利用しやすいサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

NEW

カードタイトル

右上に斜めリボンを付けたカードUIです。HTMLとCSSだけで装飾できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>カードに斜めリボンを付ける方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カード表示エリア -->
  <div class="card-ribbon_wrap">

    <!-- 斜めリボン付きカード -->
    <div class="card-ribbon_card">

      <!-- 斜めリボン -->
      <div class="card-ribbon_label">NEW</div>

      <!-- カードタイトル -->
      <h3>カードタイトル</h3>

      <!-- カード説明文 -->
      <p>
        右上に斜めリボンを付けたカードUIです。
        HTMLとCSSだけで装飾できます。
      </p>

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カード表示エリア */
.card-ribbon_wrap{
  display:flex;  /* カードを配置 */
  justify-content:center;  /* カードを中央寄せ */
  padding:40px 20px;  /* 外側の余白 */
}

/* 斜めリボン付きカード */
.card-ribbon_card{
  position:relative;  /* リボンをカード内で配置する基準 */
  overflow:hidden;  /* はみ出したリボン部分を隠す */
  width:320px;  /* カードの横幅 */
  padding:32px 24px;  /* カード内側の余白 */
  border:1px solid #dbeafe;  /* カードの枠線 */
  border-radius:18px;  /* カードの角丸 */
  background:#ffffff;  /* カード背景色 */
  box-shadow:0 12px 30px rgba(15,23,42,.08);  /* カードの影 */
}

/* 斜めリボン */
.card-ribbon_label{
  position:absolute;  /* カード内で絶対配置 */
  top:18px;  /* 上からの位置 */
  right:-42px;  /* 右からの位置 */
  width:150px;  /* リボンの横幅 */
  padding:8px 0;  /* リボン上下の余白 */
  background:#2563eb;  /* リボン背景色 */
  color:#ffffff;  /* リボン文字色 */
  text-align:center;  /* 文字を中央寄せ */
  font-size:13px;  /* 文字サイズ */
  font-weight:900;  /* 文字の太さ */
  transform:rotate(45deg);  /* リボンを斜めにする */
}

/* カードタイトル */
.card-ribbon_card h3{
  margin:0 0 12px;  /* タイトル下の余白 */
  color:#0f172a;  /* タイトル文字色 */
  font-size:22px;  /* タイトル文字サイズ */
  font-weight:900;  /* タイトル文字の太さ */
}

/* カード説明文 */
.card-ribbon_card p{
  margin:0;  /* 外側余白 */
  color:#475569;  /* 説明文の文字色 */
  font-size:15px;  /* 説明文の文字サイズ */
  line-height:1.8;  /* 行間 */
}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではカードタイトル、説明文、斜めリボンを配置します。CSSではカードの横幅や余白、枠線、角丸、影などを設定し、リボンをカードの右上へ絶対配置して45度回転させることで、右上を横切る斜めリボンを作成します。JavaScriptや外部ライブラリは使用しません。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlは斜めリボン付きカードの内容を構成するファイルです。「NEW」のリボン文字、カードタイトル、説明文を変更できます。

style.cssはカード表示エリア、カード本体、斜めリボン、タイトル、説明文のデザインを設定するファイルです。カードの横幅、余白、背景色、枠線、角丸、影に加えて、リボンの位置、横幅、太さ、背景色、文字色、文字サイズ、回転角度などを変更できます。カードにはoverflow:hidden;を指定し、回転によって外側へはみ出したリボン部分を隠しています。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。カードの右上に「NEW」と表示された斜めリボン付きカードを確認できます。

リボンの文字を変更する場合は、index.htmlにある<div class="card-ribbon_label">NEW</div>の「NEW」を編集します。カードタイトルと説明文も同じindex.htmlから用途に合わせて変更できます。

カスタマイズできる内容
index.htmlでは「NEW」のリボン文字、カードタイトル、説明文を変更できます。リボンの文字は「NEW」以外にも、カードの用途に合わせた短い文字へ変更できます。

style.cssではカードの横幅、内側余白、背景色、枠線、角丸、影を変更できます。斜めリボンについても、上下左右の位置、横幅、太さ、背景色、文字色、文字サイズ、傾きを調整できます。

数値調整
style.css
padding:40px 20px;
カード表示エリアの内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると左右の余白が広がります。

width:320px;
カード本体の横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。

padding:32px 24px;
カード本体の内側余白です。上下の32pxを大きくすると上下の余白が広がり、左右の24pxを大きくすると文章とカード端の間隔が広がります。

border:1px solid #dbeafe;
カードの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:18px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 12px 30px rgba(15,23,42,.08);
カードの影です。12pxや30pxを変更すると、影の位置や広がりを調整できます。

top:18px;
斜めリボンの上からの位置です。値を大きくするとリボンが下へ移動し、小さくすると上へ移動します。

right:-42px;
斜めリボンの右からの位置です。値を変更すると、カード右上に対するリボンの左右位置を調整できます。

width:150px;
斜めリボンの横幅です。値を大きくするとリボンが長くなり、小さくすると短くなります。

padding:8px 0;
斜めリボンの上下余白です。8pxを大きくするとリボンが太くなり、小さくすると細くなります。

font-size:13px;
斜めリボンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

transform:rotate(45deg);
リボンを回転させる角度です。45degの値を変更するとリボンの傾きが変わります。

margin:0 0 12px;
カードタイトルの下側余白です。12pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。

font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。

font-size:15px;
カード説明文の文字サイズです。値を大きくすると説明文が大きくなり、小さくすると小さくなります。

line-height:1.8;
カード説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

レスポンシブ対応
現在のstyle.cssではカード本体にwidth:320px;を指定しており、スマートフォン向けのメディアクエリやmax-width:100%;は設定していません。そのため、画面幅がカード本体と左右の余白を合わせた幅より狭い場合は、横方向にはみ出す可能性があります。スマートフォン・タブレット・PCへ対応させる場合は、配布コード側にも画面幅に応じてカードを縮小するレスポンシブ処理を追加する必要があります。