はじめに

見出しやワンポイントとしてよく使うリボンのデザイン。
画像データを探してきたり、イチから自分で作ったり、
準備からはじめるといろいろ面倒で大変。
ところが今では、CSSだけで簡単に作ることができるようになりました。
本日はコピペですぐ使えるCSSのリボンサンプルを少しだけご紹介いたします。

サンプルのご紹介

サンプルA:両端をカットしたリボン

HTMLの記述はこちら

サンプルコード

スタンダードなリボンのデザイン。

記述方法は割愛しますが、heightの高さ指定を変えて細身のリボンにしたり
:beforeや:afterを非表示にすれば、片方をカットしたリボンも作れます。

サンプルB:立体的なリボン

HTMLの記述はこちら

リボンのシャドウまでCSSでつくれます。
ポイントの見出しに存在感を持たせたい時におすすめです。

応用:背景に柄をつけたリボン

AのサンプルAのリボンに背景をつけたリボンです。

ちょっと手をくわえるだけで、マスキングテープのような仕上がりに。

背景以外にも、グラデーションをかけてみても面白いかもしれません。

まとめ

いかがでしょうか?
HTML5ができてから、自由度の高いデザインも
コーディング上で作れるようになりました。
コードをコピペするだけで誰でも作れるリボンのデザイン。
是非、デザインに取り込んでみてください!

Written by