CSSだけでリボンっぽい見出しをつくろうと試みたけど何かちゃちい #CSS

CSSだけでリボンっぽい見出しをつくろうと試みたけど何かちゃちい #CSS

:afterや:beforeの擬似要素をつけてリボンっぽくするとか、不思議な図形をつくるとかCSSでできるようになりました。せっかくなので、どれだけのことができるのかborderで確かめたいと思います。

まずは、borderの設定の確認から

CSSの確認をします。
CSSは、セレクタ {プロパティ名:値;} で成り立ちます。セレクタの部分にスタイルを設定したいものを記述して、プロパティに設定したい項目、値に設定したい内容を書いていくのが基本の形です。

こんなようなスタイルを設定すると、下のようになります。

これだと、親ブロックのサイズにそのまま適用してしまうので、widthとheightを設定します。

ということから、borderの値は、 の順番で設定できることがわかります。

てことは、右側や左側を透明にすれば、リボンっぽくできるということですね。

右側を透明(transparent)を設定すれば、下のように。

左側を透明(transparent)を設定すれば、下のように。

この2つを使ってそれっぽいリボンを作ります。

見出しにリボンをつけてみよう

見出しにリボンをつけるときに使うのが、:afterや:beforeのような擬似要素です。これって、どこまで擬似要素付けられるのか正直疑問ですので、またそのうち試してみたいです。

上の2つでやったことを利用してリボンっぽいのをつけた見出しを作ります。

リボンタイトル

もう少し豪華にしてみる

このままだと、リボンがのべーんとしてしまうので、もう少し豪華にしてみます。:beforeと:afterに設定した部分の位置と色を調整します。

リボンタイトル

ちょっとだけ豪華になりました。部分部分で何だかちゃちいのが気になりますが…


Back to Top