CSSだけでリボンデザインを作成しました！

本日は、Web制作でカードデザインに使用するリボン装飾をCSSだけで作成しました。

一見シンプルなデザインですが、実際に作ってみると「こんな表現もCSSだけでできるんだ！」という発見がたくさんありました。

---

リボン本体を作る

まずは長方形のリボン本体を作成しました。

```css

.reason-ribbon {

  position: absolute;

  top: -2px;

  left: 12px;

  width: 24px;

  height: 30px;

  background: var(--gold);

}

```

カードの左上に配置し、背景色を設定することでリボンのベース部分が完成します。

ここまでは比較的シンプルなコードです。

---

ポイントは擬似要素！

今回一番勉強になったのが、この部分です。

```css

.reason-ribbon::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -7px;

  border-left: 12px solid var(--gold);

  border-right: 12px solid var(--gold);

  border-bottom: 7px solid transparent;

}

```

最初は「三角形の画像を使うのかな？」と思っていましたが、実は**border**だけで作られています。

左右のborderに色を付け、下側だけ透明にすることで、リボンの先端がV字にカットされたような形を表現できます。

画像を使わずにここまで表現できることに驚きました！

CSSだけで装飾が作れる面白さ

今回の学習を通して改めて感じたのは、

CSSはレイアウトを整えるだけではなく、細かなデザインや装飾まで表現できるということです。

画像を使わないことで、

* 色の変更が簡単

* 修正しやすい

* 表示速度にも優しい

というメリットもあります。

---

学んだこと

最初は難しく感じた擬似要素やborderですが、実際に手を動かしてみることで理解が深まりました。

小さな装飾ではありますが、こうした積み重ねがデザインの再現力につながっていくのだと感じています。

これからもCSSだけで表現できるデザインを少しずつ増やしていきたいと思います✨

本日はここまで！