いつもお世話になっております。
ドラム式洗濯機購入を妻におねだりしたんですが、大きすぎる！洗浄力が欲しい！乾燥機能のシワが気になる！
と、全力ツッコミをもらいハイテク家電GETの夢が散ったゆずのすけです！
みなさんがWEBサイトを見ている時、
こういったかわいい見出しを見かけることはありませんか？
今回は、かわいいリボン型の見出し・ボックスを作る方法について解説していきます。
CSSで作るリボンのコードをみてみよう
では、早速上記のリボンのコードを見てみましょう。
HTML
|
1 |
<h2 class="ribbon">Hello World!!</h2> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.ribbon { display: inline-block; position: relative; height: 50px; line-height: 50px; text-align: center; padding: 0 30px; font-size: 18px; background: #cle0ff; color: #fff; box-sizing: border-box; } .ribbon:before, .ribbon:after { position: absolute; content: ""; width: 0px; height: 0px; z-index: 1; } .ribbon:before { top: 0; left: 0; border-width: 25px 0px 25px 15px; border-color: transparent transparent transparent #fff; border-style: solid; } .ribbon:after { top: 0; right: 0; border-width: 25px 15px 25px 0px; border-color: transparent #fff transparent transparent; border-style: solid; } |
初心者さんが見ると、これだけで「うわあ」となってしまいそうなコード量ですね。
今回はこれを一つ一つ紐解いていきます。
CSSを使ったリボンの作り方
まず、HTMLの<h2>タグの方には「ribbon」というクラス名があてられています。
「ribbon」クラスのCSSはこちら。
|
1 2 3 4 5 6 7 8 9 10 11 |
.ribbon { display: inline-block; /* インラインブロック要素に変更 */ position: relative; /*後に定める擬似要素の基準となる位置を親に持たせる */ height: 60px; /* リボンの高さ */ line-height: 60px; /* テキストを上下中央にしている */ text-align: center; /* テキストを左右中央にしている */ padding: 0 40px; /* 内側の隙間を縦0,横を40pxに指定 */ font-size: 20px; /* 文字の大きさを20pxに */ background: #c1e0ff; /* リボンの色 */ color: #fff; /* 文字の色 */ } |
この部分のCSSではリボンの高さや、幅、文字の大きさ、リボンの色などを指定しています。
自分で練習してみたいという方は、こちらのコードの値を自分でアレンジしてみると理解が深まりますよ。
そして、以下が「ribbon」クラスに対する擬似要素CSSになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.ribbon:before { content: ""; /* 擬似要素の中に入れる文字など、今回はなし */ width: 0px; /* 擬似要素の幅 */ height: 0px; /* 擬似要素の高さ */ z-index: 1; /* z軸における擬似要素の位置、今回は親要素より一つ手前 */ position: absolute; /* 子要素の位置を親要素のもつ、position: relative基準に */ top: 0; left: 0; /* ここまで位置の指定 今回の場合親要素左上にひっついている */ border-width: 30px 0px 30px 15px; /* borderの幅 */ border-color: transparent transparent transparent #fff; /* borderの色 左のみ白くしている、他は透明色 */ border-style: solid; /* borderスタイル */ } .ribbon:after { content: ""; /* 擬似要素の中に入れる文字など、今回はなし */ width: 0px; /* 擬似要素の幅 */ height: 0px; /* 擬似要素の高さ */ z-index: 1; /* z軸における擬似要素の位置、今回は親要素より一つ手前 */ position: absolute; /* 子要素の位置を親要素のもつ、position: relative基準に */ top: 0; right: 0; /* ここまで位置の指定 親要素右上にひっついている */ border-width: 30px 15px 30px 0px; border-color: transparent #fff transparent transparent; /* borderの色 右のみ白くしている、他は透明色 */ border-style: solid; } |
擬似要素って何？
いきなり出てきて、擬似要素と言われても困りますよね。
擬似要素については、またあらためて別の記事で解説させていただきます。
今回の記事の中では、
- :beforeがribbonクラスの直前にコンテンツを追加する機能
- :afterはribbonクラスの直後にコンテンツを追加する機能
と考えてください。
これらの擬似要素は、実際にはHTMLに存在はしていません。なので、コードに余分なモノを書かずにコンテンツを追加する事ができる便利な機能です。
この便利機能を使って、リボンは作られているんですね。
擬似要素はcontentプロパティを使って文字や画像を、追加したい要素（今回の場合<h2>タグ）の直前や直後に表示させる事が出来ます。
今回の場合ですと、文字や画像ではなく白い三角形を直前と直後に表示させています。
これにより、長方形の四角が欠けた状態になり、リボン状に見えているというわけなんですね。
これが、リボンの作り方の正体になります。
まとめ
今回はリボン型ボックスの作り方を解説しましたが、いかがだったでしょうか？
初心者が見るとあまりのコード量に「うわ・・・」と思ってしまうかもしれません。
ですが、擬似要素を使ったデザインを覚えると表現の幅が広がります。ぜひ、この機会に挑戦してみてくださいね。
この記事があなたの悩みを解決する手助けになれば幸いです。
