WordPressの使い方・Tips発信サイト

CSSで吹き出しデザインを簡単に実装する方法

 

CSSで吹き出しを作られているサイトが最近よく見られるようになってきました。

下の画像のような感じですね。

吹き出しイメージ

このようなCSSで吹き出しデザインを簡単に作る方法を解説したいと思います。

CSSで吹き出しを簡単に作る方法

結論から。

初めての場合、下記のサイトを使って作成するのが一番早いかと思いました。

CSS ARROW PLEASE

http://www.cssarrowplease.com/

プレビュー画面

入力値に値を入力して、右の生成されたCSSをstyle.cssに貼り付ける感じですね。

プレビューとソースコード

ただし、細かいところの設定はこの画面のみではできません。

例えば上記の場合、吹き出しの矢印をもうちょっと左に寄せたいな。という場合です。

その場合は「.arrow_box:after, .arrow_box:before 」の「left:50%」を左に寄るように20%などに変更します。

また、h2などの見出しタグを吹き出しにする用途も多いはずです。

その場合は下記サンプルコードのようにh2タグを追記した形でCSSを記述する必要があります。

CSS

 HTML

 

出来上がりはこんな感じですね。

CSSで吹き出し完成

いったん完成したらそのコードは使い回せると思うので、2回目以降はそのコードを貼り付けてちょっと修正する方法が一番早そうですね。

CSSで吹き出しが出来る理屈

吹き出しはboderプロパティの性質と「after、before」擬似要素を利用して作成します。

widthとheightが0でborderだけサイズがあるとtop、right、bottom、leftの方向ごとに対応して三角形が出来上がります。

下記のような感じですね。

CSS

HTML

width0、height0のときborderが矢印になる

例えば、border-topだけ残してあとは透明にする場合は下記のようなCSSを書きます。

そうすると、下記のような三角形だけ残ります。

border-topの三角形だけ残る

これを、after、beforeの擬似要素で実装すると吹き出しができあがります。

CSS吹き出しデザインのまとめ

初めての場合はツールを使った方が断然早いですが、理屈だけは覚えておいた方が良さそうですね。

2回目以降は使い回しでOKかと思います。