CSSでリボンを作成する方法 | 福岡LP(ランディングページ）ホームページ制作

HTMLの準備

まずはリボンを表示するためのHTML構造を用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでリボン作成</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="ribbon-container">
    <div class="ribbon custom">特別なオファー</div>
  </div>
</body>
</html>

HTMLのポイント

<div class="ribbon-container">はリボン全体を囲むコンテナです。リボン自体は<div class="ribbon">で定義し、それぞれのリボンの種類に応じて追加のクラスを使用します。

CSSでリボンをスタイリング

次に、CSSを使ってリボンをスタイリングします。

アレンジしたリボン

特別なオファー

以下はアレンジしたリボン用のCSSコードです。

.ribbon.custom {
  display: inline-block;
  position: relative;
  height: 50px; /* リボンの高さ */
  line-height: 50px; /* リボン内のテキストの高さ */
  text-align: center;
  padding: 0 40px; /* 横幅の余白 */
  font-size: 18px; /* 文字サイズ */
  font-weight: bold;
  background: red;
  color: #fff; /* 文字色 */
  overflow: hidden;
  z-index: 0;
}

.ribbon.custom:before, .ribbon.custom:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  z-index: -1;
}

.ribbon.custom:before {
  top: 0;
  left: 0;
  border-width: 25px 0 25px 20px; /* 左端の装飾 */
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

.ribbon.custom:after {
  top: 0;
  right: 0;
  border-width: 25px 20px 25px 0; /* 右端の装飾 */
  border-color: transparent rgba(255, 255, 255, 1) transparent transparent;
}

まとめ

CSSを使えば、画像を使わずにリボンデザインを簡単に作成できます。今回紹介したアレンジ例を基に、さらにカスタマイズして、自分のサイトに合ったデザインを作成してみてください！