CSSリボンで可愛いは作れる!リボン型ボックスの作り方を解説

いつもお世話になっております。
ドラム式洗濯機購入を妻におねだりしたんですが、大きすぎる!洗浄力が欲しい!乾燥機能のシワが気になる!
と、全力ツッコミをもらいハイテク家電GETの夢が散ったゆずのすけです!

みなさんがWEBサイトを見ている時、

こういったかわいい見出しを見かけることはありませんか?

今回は、かわいいリボン型の見出し・ボックスを作る方法について解説していきます。

CSSで作るリボンのコードをみてみよう

では、早速上記のリボンのコードを見てみましょう。

HTML

CSS

初心者さんが見ると、これだけで「うわあ」となってしまいそうなコード量ですね。
今回はこれを一つ一つ紐解いていきます。

CSSを使ったリボンの作り方

まず、HTMLの<h2>タグの方には「ribbon」というクラス名があてられています。

「ribbon」クラスのCSSはこちら。

この部分のCSSではリボンの高さや、幅、文字の大きさ、リボンの色などを指定しています。

自分で練習してみたいという方は、こちらのコードの値を自分でアレンジしてみると理解が深まりますよ。

そして、以下が「ribbon」クラスに対する擬似要素CSSになります。

擬似要素って何?

いきなり出てきて、擬似要素と言われても困りますよね。
擬似要素については、またあらためて別の記事で解説させていただきます。

今回の記事の中では、

  • :beforeribbonクラスの直前コンテンツを追加する機能
  • :afterribbonクラスの直後コンテンツを追加する機能

と考えてください。

これらの擬似要素は、実際にはHTMLに存在はしていません。なので、コードに余分なモノを書かずにコンテンツを追加する事ができる便利な機能です。
この便利機能を使って、リボンは作られているんですね。

擬似要素はcontentプロパティを使って文字や画像を、追加したい要素(今回の場合<h2>タグ)の直前や直後に表示させる事が出来ます。

今回の場合ですと、文字や画像ではなく白い三角形を直前と直後に表示させています。

これにより、長方形の四角が欠けた状態になり、リボン状に見えているというわけなんですね。

これが、リボンの作り方の正体になります。

まとめ

今回はリボン型ボックスの作り方を解説しましたが、いかがだったでしょうか?
初心者が見るとあまりのコード量に「うわ・・・」と思ってしまうかもしれません。
ですが、擬似要素を使ったデザインを覚えると表現の幅が広がります。ぜひ、この機会に挑戦してみてくださいね。
この記事があなたの悩みを解決する手助けになれば幸いです。