画像を使わなくても、立派なリボンをWebサイト上に表示することができます。この記事では様々な形のリボンの作り方を使用サンプルとともに紹介していきます。どれもHTMLとCSSのコピペで使うことができます。 はじめに リボンのテキストはサンプルでは「Welocome to My Blog!」や「NEW」などとしていますが、お好みのテキストに変えてご利用ください。ただし、複数行にわたるような長文にするとデザインが崩れてしまうことがあります。なるべく、短めのテキストを入れて頂くのがおすすめです。 また、HTMLコードでは例としてh3タグを使っていますが、この部分をh1~h5やpタグ、div、spanタグに置き換えてそのまま使うことができます。
![CSSで作る!綺麗なWeb用リボンデザイン22選](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ecde054356b09d5834250b405f3ec6d3a141a02/height=288;version=1;width=512/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F05%2Fgaa-05.png)