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

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

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

簡単な吹き出し

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

20161002_1_1

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

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

20161002_1_2

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

枠線付きの吹き出し

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

20161002_1_3

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

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

20161002_1_4

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

おまけ

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

幅が半分で色違いの四角形を透明度60%で追加しました。2px ほどずれています。

20161002_1_5

実際には、訪問してくれた人は吹き出しを見にくるわけではないので問題ないのでしょうが、なんとなく気になったもので。これなら left:50%; 抜きで margin-left だけで位置を決めたほうがいいのかもしれません。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP