［み］CSSだけで吹き出しをカンタンに作成する方法

最近ようやくCSSがわかってきたみはらです。

ということで、ちょっと調子に乗って、CSSで吹き出しを作成してみたいと思います。いつもどおり、コピペで利用することができますので、どんどんご利用くださいませ。

よくある三角の吹き出し

まずは、よくみかけるこんな吹き出しをつくります。

ソースはこちらです。

HTML

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            * {
                box-sizing: border-box;
            }

            .wrapper {
                padding: 30px;
                position: relative;
            }

            .fukidashi {
                position: relative;
                background: #ccc;
                height: 50px;
                width: 100px;
                margin-bottom: 20px;
            }

            .fukidashi:after {
                content: '';
                position: absolute;
                border-top: 10px solid #ccc;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                bottom: -9px;
                left: 5px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="fukidashi">
            </div>
        </div>
    </body>
</html>

HTMLはものすごくシンプルです。fukidashiというclassのdivに吹き出しをつけます。

肝心の吹き出しは、after疑似要素を使って絶対配置でつけます。まず、wrapperにposition:relativeを指定し、fukidashiのafter擬似要素にposition:absoluteを指定します。そして吹き出しは、borderを使って表示します。

高さと幅が0の要素に対してborderを指定すると、各位置のボーダーが三角形で表示されます。これを利用して吹き出しにしています。

今回の下向きの三角形の吹き出しを作成するには、border-topに下向きの三角形の部分となる指定をいれてやります。border-topを指定するだけだと三角にならないので、border-leftとborder-rightを指定して、border-topが三角形になるようにします。

そして、colorにtransparentを指定することで、border-leftとborder-rightを見えなくして、下向きの三角形が完成します。あとは、top(bottom)とleft(right)を指定して吹き出しの表示位置を決めれば完成です。

三角形の位置を変えるには、表示するborderとtransparentのborderの組み合わせを変えれば、基本的に今回のやり方といっしょです。

ほわほわほわっていうカンジの吹き出し

次は、ほわほわほわっとアタマで考えてることを表示するときに使いそうな吹き出しです。

ソースはこちらです。

HTML

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                box-sizing: border-box;
            }

            .wrapper {
                padding: 30px;
                position: relative;
            } 

            .howa {
                position: relative;
                background: #ccc;
                height: 70px;
                width: 100px;
                margin-bottom: 20px;
                border-radius: 50px;
            }

            .howa:before {
                content: '';
                position: absolute;
                background: #ccc;
                height: 20px;
                width: 20px;
                border-radius: 10px;
                bottom: -20px;
                left: 70px;
            }

            .howa:after {
                content: '';
                position: absolute;
                background: #ccc;
                height: 10px;
                width: 10px;
                border-radius: 5px;
                bottom: -30px;
                left: 90px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="howa">
            </div>
        </div>
    </body>
</html>

またしても、HTMLはものすごくシンプルです。howaというclassのdivに吹き出しをつけます。

before擬似要素とafter擬似要素を使ってほわほわほわっていう吹き出し部分を作ります。今回のでは、before要素で大きめのほわを、after要素で小さめのほわを作成しています。before・after擬似要素で円を作るのはじつはカンタンです。高さと幅を同じ大きさに合わせて、border-radiusに高さ（幅）の半分の大きさを指定してやると円を作ることができます。

2つの円ができたら、あとは、top（bottom）とleft（right）で円の位置を調整して完成です。