画像を使わずにHTMLとCSSだけで「割引シール」を表現する

前回に引き続き、画像を使わないでHTMLとCSSだけで表現するシリーズです。

前回の記事はこちら↓

今回は、スーパーなどでよく見かける「本日3割引き」といった割引シール(半額シール・値引きシール)をHTMLとCSSだけで表現してみます。

割引シールという響きからネタ記事のような印象を受けるかもしれませんが、意外にも実用的な内容です。

それでは早速作っていきます。

まずは完成形がこちらです。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

 

作業の手順は背景の円、ギザギザの図形、テキストの順番になります。

それぞれ注意点も交えながら解説していきます。

最初に背景の円を作っていきます。

circleクラスを持ったdiv要素に対して、width、height、background-color、border-radius: 50%を指定します。

最終的に割引シールの大きさはcircleクラスにtransform: scaleを指定することで細かく調整することができますので、この時点ではwidthとheightを細かく指定する必要はありません。

デモではひとまず200pxに指定しています。

ただし、widthとheightは200pxずつ、100pxずつといった縦横ともに同じ長さに指定しないと正円になりませんので、ご注意ください。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

次に、内側のギザギザの円形を描いていきます。

こちらの図形は、円を描いてからギザギザにしているのではなく、何層も四角形を重ねることで表現しています。

したがって、まずは一つsquareクラスのdivを作り、CSSで四角形になるように指定します。

四角形ができたら、circleクラスにposition: relativeを指定します。

続いてsquareクラスをposition: absoluteに指定すれば、circleクラスを基準とした好きな場所に四角を重ねることができます。

position: absoluteを使うには、position: absoluteの記述の下にtop、left、right、bottomなどの記述する必要があります。

position: relativeで指定した親要素の一番上がtop: 0px、一番左がleft: 0pxとなっていますので、デモのようにtop: 40px、left: 40pxのような記述をしながら、中央に四角形を配置していきます。

また、topとbottom、leftとrightは対になっている値なので、それぞれ一つずつ指定すれば問題ありません。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

 

中央に配置ができたら、square2のdiv要素を作り、全く同じCSSの指定をします。

すると、要素が完全に重なりますので、square2にはtransform: rotateで傾きを加えてあげます。

傾きの角度の表記は〇〇degといった表記をしますので、transfrom: rotate(15deg)のような記述になります。

あとは、次の四角形を作ってプラス15度傾けて重ね、さらに次の四角形を15度傾けて重ねるということを続けます。

6つの四角形が重なった時点で、シンメトリーのギザギザの図形にすることができます。

この際、傾ける角度を30度ずつにすると、ギザギザの山が細かくない図形を作ることができます。

下の例のように、お好みの角度に調整してみてください。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

最後にテキストをのせます。

割引きシールなどの広告によくある、「サブのテキストを小さく、メインのテキストを大きく」というパターンを採用するため、textクラスは2つ用意しています。

それぞれフォントや色、文字の大きさを指定したら、四角形の要素と同じようにposition: absoluteで中央付近に合わせ、調整していきます。

以上で完成です。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

割引シールのようなラベルをするものは、HTMLバナーやECサイトの商品に重ねて付箋のように使う場合が多いかと思います。

その状況を考えると、一番親要素であるcircleクラスにposition: relativeを指定してしまっていては、自由にラベルの位置を移動させることができません。

そこで、実際に利用する場合はさらに外側をwrapperクラスのようなdivで囲っておくと、使い勝手がよくなります。

また、自由に図形を重ねる仕組みが理解できれば、図形の組み合わせで背景を作ったり、ラベルのアレンジも可能になります。

下に2つの例を用意してみました。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

 

さらに応用として、JavaScriptなどの言語を使えば実際のECサイトで見かけるような「商品の割引きの値を自動で書き換えたりすること」も可能です。

この割引シールを足がけにして、様々なことに利用していただければ幸いです。