CSSリボンボックスの作り方！基本からバリエーションまでご紹介

CSSのリボンデザインは、見出しやサイトを彩るデザインとして用いられます。

バリエーションも豊富で組み合わせ次第で色々なリボンボックスが作れるため、Webデザインに役立つはず。

今回は、CSSで作るリボンボックスについて基本から応用編まで詳しくご紹介して行こうと思います。

この記事を読む当たってのご注意
以下にご紹介するコードの「【実行結果】」のプレビューは、このサイトの仕様の兼ね合いにより、ご紹介しているコードを少し微調整しております。

 CSSの基本のリボンデザイン

まずは、CSSのリボンボックスの基本的なデザインについて見ていきましょう。

このように、両端をカットしたシンプルでフラットなリボンデザインです。

【HTML】

<h2 class="ribbon01">見出しのテキスト</h2>

【CSS】

.ribbon01 {
        display: inline-block;
        position: relative;
        height: 60px; 
        line-height: 60px; 
        text-align: center;
        padding: 0 30px; 
        font-size: 20px; 
        background: #008080; 
        color: #FFFFFF; 
        box-sizing: border-box;
}
 
.ribbon01:before,
.ribbon01:after {
        position: absolute;
        content: "";
        width: 0px;
        height: 0px;
        z-index: 1;
}
 
.ribbon01:before {
        top: 0;
        left: 0;
        border-width: 30px 0px 30px 25px;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
}
 
.ribbon01:after {
        top: 0;
        right: 0;
        border-width: 30px 25px 30px 0px;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
}

【実行結果】

見出しのテキスト

HTMLタグは、見出しとしてリボンボックスを使う場合は、<h2 class=”ribbon”>や<h3 class=”ribbon”＞タグを利用してください。

サイト内に挿入するなど、見出し以外に使う場合は<div class＝”ribbon”>文字<／div>を利用してください。HTML部分は、どのデザインのリボンボックスでも共通して使えます。

CSSについて詳しくないと、コードの意味が分からなくて混乱してしまうかもしれません。

しかし、それぞれの意味がわかればデザイン構築する時にも自分の好きなデザインでリボンボックスが作れます。

コードブロックの意味をご紹介します。

 【リボンクラス】

.ribbon01{
        display: inline-block;（インラインブロックに指定）
        position: relative;（相対位置表示）
        height: 60px; （リボンボックスの高さ）
        line-height: 60px; （行の高さ）
        text-align: center;（テキストの表示位置）
        padding: 0 30px; （上下左右の隙間）
        font-size: 20px; （文字の大きさ）
        background: #008080; （背景の色）
        color: #FFFFFF; （文字色）
        box-sizing: border-box;（表示領域の指定）
}

box-sizing: border-box;は必須ではないので、デザインやページによって追加（あるいは削除）を行ってください。

 【疑似要素】

続いて、疑似要素（スタイルを適用するためのコード）を指定します。

.ribbon01:before,
.ribbon01:after {
        position: absolute;（絶対位置に指定）
        content: "";（テキストを入れる場合はここに）
        width: 0px;（疑似要素の幅）
        height: 0px;（疑似要素の高さ、リボンのへこんでいる部分）
        z-index: 1;（ボックスの重なり方の指定）
}
 
.ribbon01:before {
        top: 0;
        left: 0;
        border-width: 30px 0px 30px 20px;（左端の切れ込みの深さ）
        border-color: transparent transparent transparent #FFFFFF;（左端の切れ込みのデザイン）
        border-style: solid;
}
 
.ribbon01:after {
        top: 0;
        right: 0;
        border-width: 30px 20px 30px 0px;（右端の切れ込みの深さ）
        border-color: transparent #FFFFFF transparent transparent;（右端の切れ込みのデザイン）
        border-style: solid;
}

transparentは「透明」という意味です。リボンのような三角形に切ったようなデザインを表示するために、一辺を残し背景を透過します。

「#FFFFFF」は白のカラーコードなので、サイトやブログなどの背景色に合わせて色を変えてください。

数値やデザイン、色、サイズ、切れ込みの深さなどを変えることで基本のデザインでも違った表情が楽しめます。

こちらのコードはリボンボックスのデザインの基本となるので、詳しく解説させていただきました。

もしも、コードが反映されない場合はこちらの記事で原因を確認してみてください。

関連記事：CSSが適用されない原因とは？反映されないときの対処法を解説！

 リボンにステッチ（縫い目）を付ける

先ほどの基本のCSSリボンボックスのデザインに、ステッチ（縫い目）のような模様を付ける方法をご紹介します。

【HTML】

<div class="ribbon02">
  <h3>見出しのテキスト</h3>
</div>

【CSS】

.ribbon02 {
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 7px 0;
  font-size: 18px;
  background:#008080;
  color: #FFF;
  box-sizing: border-box;
}

.ribbon02 h3 {
  margin: 0;
  padding: 0 30px;
  border-top: dashed 1px #FFF;
  border-bottom: dashed 1px #FFF;
  line-height: 46px;
}

.ribbon02:before, .ribbon2:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon02:before {
　top: 0;
  left: 0;
  border-width: 30px 0px 30px 20px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon02:after {
　top: 0;
  right: 0;
  border-width: 30px 20px 30px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

ここでポイントとなるのが以下の部分。

.ribbon02 h3 {
  margin: 0;
  padding: 0 30px;
  border-top: dashed 1px #FFFFFF;
  border-bottom: dashed 1px #FFFFFF;
  line-height: 45px;
}

【実行結果】

border-topは上のステッチ、 border-bottomは下のステッチを意味します。

ピクセル数は縫い目の細かさ、「#FFFFFF」の部分はステッチの色を意味するので適宜変えてみてください。

ピクセルを2pxにした時のボックスはこんな感じです。よりステッチが分かりやすく、太めになっていますね。

影を付ける

リボンのボックスに影を入れる場合は、以下の「box-shadow」コードを使います。

-moz-box-shadow:        -5px 5px 0px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow:     -5px 5px 0px rgba(0, 0, 0, 0.3); 
box-shadow:             -5px 5px 0px rgba(0, 0, 0, 0.3);

こちらは、基本のリボンクラスのコードの最後に挿入しました。

基本のリボンデザインだけでなく、後程紹介する応用デザインにも適用できます。

ピクセル数は影の強さなので、控えめにしたい場合は少なく、影を目立たせたい場合は数字を大きくしてください。

 折ったリボンデザイン

裏側から折り返されているようなリボンボックスも、見出しにぴったりです。

こちらは、分かりやすいように折り返し部分の色を変えて、大きめにしています。

【HTML】

<h2 class="ribbon03">見出しのテキスト</h2>

【CSS】

.ribbon03{
  position:relative;
  background: #008080;
 color: #FFFFFF;
  padding: 1em;
}

.ribbon03:after{
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #000000 transparent transparent;
  border-width: 0 40px 10px 0;
}

【実行結果】

見出しのテキスト

折り返し部分は、.ribbon:after以降の部分です。

色を変えたい場合は  border-color: transparent #000000 transparent transparent;の＃のコードを任意のカラーコードに変えましょう。

折り返し部分のサイズを変えたい場合は、  border-width: 0 40px 10px 0;の40px の数字を変更してください。（左から3番目の10pxの数字を変えると、折り返し部分の位置が変わってしまいます。）

さらに華やかにするために、切ったリボンの要素を追加してみましょう。

【HTML】

<h2 class="ribbon04">見出しのテキスト</h2>

【CSS】

.ribbon04{
  display: inline-block;
  position: relative;
  background: #008080;
  color:#FFFFFF;
  padding: 1em;
  text-align: center;
}
.ribbon04:before,
.ribbon04:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.ribbon04:before{
  right: 0;
  bottom: -10px;
  border-style: solid;
  border-color: transparent transparent transparent #2F4F4F;
  border-width: 0 0 10px 30px;
}
.ribbon04:after{
  right: -90px;
  bottom: -11px;
  width: 60px;
  z-index: -2;
  border: 30px solid #008080;
  border-right-color: transparent;
}

【実行結果】 

見出しのテキスト

ボックスにかけるリボンCSS

ここからは、ボックスにかけるタイプのリボンCSSデザインをご紹介していきます。

 斜め掛けリボンのCSS

斜め掛けリボンのCSSは、キャンペーンページなど注目して欲しい部分の装飾におすすめです。

【HTML】

<div class="ribbon-wrapper01">
  <div class="ribbon-content">
    <span class="ribbon">リボン部分のテキスト</span>
  </div>
  <p>ボックス内のテキスト</p>
</div>

【CSS】

.ribbon-wrapper01{
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: 350px;
  height: 100px;
  background: #B0C4DE;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

.ribbon-wrapper01 .ribbon-content {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 89px;
  height: 91px;
  overflow: hidden;
  }

.ribbon-wrapper01 .ribbon {
  display: inline-block;
  position: absolute;
  padding: 7px 0;
  left: -25px;
  top: 25px;
  width: 170px;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  background: #008080;
  color: #FFFFFF;
  letter-spacing: 0.2em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ribbon-wrapper01 .ribbon:before,
.ribbon-wrapper01 .ribbon:after {
  position: absolute;
  content: "";
  border-top: 6px solid #000000;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  bottom: -6px;
}

.ribbon-wrapper01 .ribbon:before {
  left: 15px;
}

.ribbon-wrapper01 .ribbon:after {
  right: 20px;
}

【実行結果】

斜め掛けリボンは見出しではなく、ボックスの装飾に使うことが多いのでHTMLのタグも以下のようなものを使います。

<div class="ribbon-wrapper01">→斜め掛けリボンのクラス
  <div class="ribbon-content">→ボックス内のクラス
    <span class="ribbon">リボン部分のテキスト</span>
  </div>
 <p>ボックスの中のテキスト</p>
</div>

 装飾風リボンデザイン

こちらもボックスの装飾に多く使われるリボンデザインです。ただ、装飾風リボンデザインは見出しの装飾にも使えるのでHTML部分は使用する場面によって変更してみてください。

【HTML】

<div class="ribbon-wrapper02">
  <span class="ribbon">リボン部分のテキスト</span>
  <div>
    <p>装飾風リボンデザイン</p>
  </div>
</div>

【CSS】

.ribbon-wrapper02{  
  display: block;
  position: relative;
  margin: 20px auto;
  padding: 20px 0;
  width: 250px;
  background: #99CCCC;
  box-sizing: border-box;
 }

.ribbon-wrapper02 .ribbon {  
  display: inline-block;
  position: absolute;
  top: -6px;
  right: 10px;
  margin: 0;
  padding: 10px 0;
  z-index: 2;
  width: 50px;
  text-align: center;
  color: white;
  font-size: 20px;
  background: linear-gradient(#008080 0%, #000080 100%);
  border-radius: 2px 0 0 0;
  }

.ribbon-wrapper02 .ribbon:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 5px #000080;
  border-right: solid 5px transparent;
}

.ribbon-wrapper02 .ribbon:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 25px solid #000080;
  border-right: 25px solid #000080;
  border-bottom: 15px solid transparent;
}

斜め掛けリボンは見出しではなく、ボックスの装飾に使うことが多いのでHTMLのタグも以下のようなものを使います。

【実行結果】

<div class="ribbon-wrapper02">→斜め掛けリボンのクラス
  <div class="ribbon-content">→ボックス内のクラス
    <span class="ribbon">リボン部分のテキスト</span>
  </div>
 <p>ボックスの中のテキスト</p>
</div>

装飾風リボンデザインは要素が細かいので、上記のコードをコピペして自分のサイトやjsbinなどの動作確認サイトで数字やデザインを色々と変えてみてください。

 簡単にCSSリボンが作れるジェネレーターも

CSSでリボンデザインを作る方法をご紹介いたしましたが、「時間がないのですぐにサイトデザインをしたい」「もっと簡単にボックスデザインしてみたい」という方にはジェネレーターもおすすめです。

リボンデザインのジェネレーターとして人気のサイトがこちらの『CSS3D.net』です。

使い方は以下の通りで、自分でコードを組むよりも簡単にリボンのボックスが作成できます。

STEP1.リボンのタイプを選択する

「Examples」の欄のアイコンから、任意のデザインを選択します。

STEP2.詳細を決める

サイズ・高さ・文字の隙間・色合いなどを指定します。

STEP3.ジェネレートをする

全て設定が決まったら「Generate」ボタンを推すと、HTMLタグとCSSコードが表示されるのでコピペして使います。

選択すればいいので簡単にデザインできますが、使用できるデザインには限りがあります。

やはりコードの構成が分かっているとよりアレンジがきくので押さえておくと良いですよ。

無料サービスのメリットや注意点について知りたい方はこちらもご覧ください。

関連記事：無料で作れる！ホームページ作成サービスのメリットや注意点をご紹介します

 まとめ

CSSのリボンデザインをご紹介しました。

リボン＝かわいいというイメージからか赤やピンクで作成されることも多いですが、色味を変えるとクールに仕上げられるので本記事では青系の色味でサンプルを作成しました。

サイズやデザインを変えてみるとwebデザインの幅も広がるので、まずは基本のリボンボックスから試してみてくださいね。