CSSで作る！綺麗なWeb用リボンデザイン22選

画像を使わなくても、立派なリボンをWebサイト上に表示することができます。この記事では様々な形のリボンの作り方を使用サンプルとともに紹介していきます。どれもHTMLとCSSのコピペで使うことができます。 はじめに リボンのテキストはサンプルでは「Welocome to My Blog!」や「NEW」などとしていますが、お好みのテキストに変えてご利用ください。ただし、複数行にわたるような長文にするとデザインが崩れてしまうことがあります。なるべく、短めのテキストを入れて頂くのがおすすめです。 また、HTMLコードでは例としてh3タグを使っていますが、この部分をh1~h5やpタグ、div、spanタグに置き換えてそのまま使うことができます。

[natsukareala]

“.ribbon4 { display: inline-block; position: relative; height: 60px;/*高さ*/ line-height: 60px;/*高さ*/ text-align: center; padding: 0 40px 0 18px;/*文字の左右の余白*/ font-size: 18px;/*文字サイズ*/ background: #ffc668;/*背景色*/ color: #FFF;/*文字色*/ box-sizing: border-box

[kathew]

技法が大変勉強になる。コピペで使う場合はマークアップが汚れることには注意

[yuki-oshino-gg]

いつもわかりやすい。。。応援してます！

[tsukuruiroiro]

セルクマ

[AfroRay]

[][]