SNSボタンに必須！CSSだけで吹き出しを作る

2016年10月2日カテゴリー : CSS コメント : 0

　ツイッターなどでの拡散を期待してブログに SNS ボタンを設置するのはもはや定番になりましたが、デザインに使われる吹き出しは画像を使わないでも実現することができます。最近は吹き出しジェネレータが Web サービスとして公開されているので仕組みを知らなくても導入できるのですが、細かい位置調整などをしようとするとある程度原理を理解していないと厳しいと思います。

　そこで今回は CSS だけで作成できる吹き出しについて解説したいと思います。ポイントは三角形を利用することですが、以前に CSS だけで作成できる三角形について記事をまとめているので、よろしければこちらもあわせてお願いします。

CSSのみで三角形を作るには | Naokix.net

簡単な吹き出し

まずは SNS ボタンで拡散された数字を表示する四角形から作成します。

20161002_1_1

<div class="balloon"></div>

.balloon {
    position: relative;
    background: #ccc;
    height: 50px;
    width: 100px;
    border-radius: 3px;
}

.balloon {

position: relative;

background: #ccc;

height: 50px;

width: 100px;

border-radius: 3px;

}

わかりやすくするために背景色を付けました。position プロパティで relative を指定していますが、これはこの後の三角形の位置決めとして position:absolute; を使用するのに必要なものなので、忘れないようにしてください。SNS ボタン的に角が丸まっていたほうがそれっぽいかと思い、border-radius を適用。

次に、この四角形に三角形をくっつけます。擬似要素の after を利用します。

20161002_1_2

<div class="balloon"></div>

.balloon {
    position: relative;
    background: #ccc;
    height: 50px;
    width: 100px;
    border-radius: 3px;
}

.balloon::after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: 50%;
    margin-left: -8px;
    
    border: 10px solid transparent;
    border-top: 16px solid #ccc;
}

.balloon {

position: relative;

background: #ccc;

height: 50px;

width: 100px;

border-radius: 3px;

}

.balloon::after {

content: '';

position: absolute;

bottom: -26px;

left: 50%;

margin-left: -8px;

border: 10px solid transparent;

border-top: 16px solid #ccc;

}

margin-left を指定していますが、これは left:50% で真ん中の位置に来るのは三角形の左端なので、三角形の底辺の半分だけ左にずらす必要があります。

枠線付きの吹き出し

こちらの方が SNS ボタンに使われることが多いのではないでしょうか。

20161002_1_3

先ほどは背景色を指定していましたが、今度は border を使って枠線を表示させています。

<div class="balloon"></div>

.balloon {
    position: relative;
    height: 50px;
    width: 100px;
    border: 1px solid #bbb;
    border-radius: 3px;
}

.balloon::after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: 50%;
    margin-left: -8px;
    
    border: 10px solid transparent;
    border-top: 16px solid #bbb;
}

.balloon::before {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -8px;
    
    border: 10px solid transparent;
    border-top: 16px solid #fff;
    z-index: 1;
}

.balloon {

position: relative;

height: 50px;

width: 100px;

border: 1px solid #bbb;

border-radius: 3px;

}

.balloon::after {

content: '';

position: absolute;

bottom: -26px;

left: 50%;

margin-left: -8px;

border: 10px solid transparent;

border-top: 16px solid #bbb;

}

.balloon::before {

content: '';

position: absolute;

bottom: -24px;

left: 50%;

margin-left: -8px;

border: 10px solid transparent;

border-top: 16px solid #fff;

z-index: 1;

}

今度は擬似要素 before を使って先ほどと同じ大きさの三角形を表示させます。ただし、色は枠線内部の背景色と同じにします。今回でいえば白です。これをほんのわずかにずらすことで枠線を実現しているのですね。色を変えて確認してみるとわかりやすいかと。

20161002_1_4

四角形の枠線の太さを 1px で指定しているので三角形も 1px ずらせばよいのではないかと考えていたのですが、いろいろ試してみた結果、2px ずらしたときが一番しっくりきました。このあたりは細かくお好みで調整してもらえればと思います。

おまけ

三角形を真ん中に配置するために、left:50%; と margin-left で三角形の半分だけ左に移動しましたが、よーく見ると少しずれているような。そこで次のようにして確認してみました。

<div class="balloon"></div>
<div class="balloon2"></div>

.balloon {
    position: relative;
    background: #ccc;
    height: 50px;
    width: 100px;
    border-radius: 3px;
    
    margin-bottom: 5px;
}

.balloon::after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: 50%;
    margin-left: -8px;
    
    border: 10px solid transparent;
    border-top: 16px solid #ccc;
}

.balloon2 {
    background: #EE4257;
    height: 50px;
    width: 50px;
    opacity: 0.6;
}