はぴすぷ

CSSだけで吹き出し・バルーンを作る方法（SNS連携ボタンのアレ）

      2015/09/22

どうも。今回はよくSNS連携ボタンの上とか右に付いてるあれを作る方法です。

SS_0848

そう、こういうやつ。

自分でも↓のように、似たものを作りたいと思ったんです。

SS_0824

このコメント入力フォームのカスタマイズでやってる流れの一部です。
【WordPress】コメント入力フォームのカスタマイズ②jQueryのスライド機能で表示を切替える

というわけでやってみます。

スポンサーリンク

吹き出し・バルーンを作る

まずは簡単なことから順番に進めていこう。

角丸の枠を作る

いやいや、角丸の枠くらい簡単っすよ(；・∀・)

あれでしょ？borderとradiusでしょ？

ええ、その通り！

99

<style>
.balloon-t1 {
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 2px;
    padding: 2px 5px;
}
</style>
<span class="balloon-t1">99</span>

これは簡単！

吹き出しの尖った部分を作る

そうそう。それが分からんのですよ！

これが結構分かってみると面白い。

まずこれを見てくれ。
サイズが0のdivに対して、全ての辺に違う色のボーダーをつけてみた。

<div class="border-t1"></div>
<style>
.border-t1 {
    border-top: 20px solid red;
    border-right: 20px solid blue;
    border-bottom: 20px solid green;
    border-left: 20px solid yellow;
    width: 0px;
    height: 0px;
}
</style>

これに対して、1辺だけボーダーを指定しないとこうなる。

.border-t01 {
    border-top: 20px solid red;
    border-right: 20px solid blue;
    border-left: 20px solid yellow;
}
.border-t02 {
    border-top: 20px solid red;
    border-right: 20px solid blue;
    border-bottom: 20px solid green;
}
.border-t03 {
    border-right: 20px solid blue;
    border-bottom: 20px solid green;
    border-left: 20px solid yellow;
}
.border-t04 {
    border-top: 20px solid red;
    border-bottom: 20px solid green;
    border-left: 20px solid yellow;
}

更に隣合う辺の色を透明にしてみる。

.border-t05 {
    border-top: 20px solid red;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}
.border-t06 {
    border-top: 20px solid transparent;
    border-right: 20px solid blue;
    border-bottom: 20px solid transparent;
}
.border-t07 {
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-left: 20px solid transparent;
}
.border-t08 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid yellow;
}

何となく分かった気がしませんか(^q^)

多くの吹き出しの尖った部分は、この方法で作ったボーダーの三角形を2個重ねて作り出しています。

角丸の枠と三角形を組み合わせる

単純にそれぞれの要素を作って、配置しても良いのですが、「:befor」と「:after」を使って三角形を作ると便利です。

「:befor」と「:after」で、中身の無い要素を作るには、「content: ”;」を指定します。

まずは角丸の枠の左側に三角形を2つ付けるサンプル。分かりやすいように三角形の色は赤と青にしています。
左

<span class="balloon-t0 balloon-t2">左</span> 
<style>
.balloon-t0 {
    display: inline-block;
    position: relative;
    background-color: #fff;
    font-size: 20px;
    border: 2px solid #999;
    border-radius: 4px;
    padding: 10px 20px;
    margin: 12px;
}
.balloon-t2:before {
    content: '';
    position: absolute;
    border-right: 12px solid red;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    top: 50%;
    left: -12px;
    margin-top: -12px;
}
.balloon-t2:after {
    content: '';
    position: absolute;
    border-right: 8px solid blue;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    top: 50%;
    left: -8px;
    margin-top: -8px;
}
</style>

親の「position」を「relative」、子を「absolute」にすることで、角丸の枠を対象に三角形を絶対値で配置出来るようにしています。

後は、垂直方向にセンタリングする為に「top: 50%;」を指定。borderの幅分ずれるので、「margin-top」と「left」を調整しています。

親の「display」を「inline-block」にしているのは、素のspanの状態だと、垂直方向に付けた「margin」と「padding」が前後の要素にかからず、重なってしまうからです。

これで、左から出てる吹き出しは出来ました！

他の方向のサンプル

ほとんど同じですが一応載せておきますね。

右下上

/* 右 */
.balloon-t3:before {
    content: '';
    position: absolute;
    border-left: 12px solid red;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    top: 50%;
    right: -12px;
    margin-top: -12px;
}
.balloon-t3:after {
    content: '';
    position: absolute;
    border-left: 8px solid blue;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    top: 50%;
    right: -8px;
    margin-top: -8px;
}
/* 下 */
.balloon-t4:before {
    content: '';
    position: absolute;
    border-top: 12px solid red;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    bottom: -12px;
    left: 50%;
    margin-left: -12px;
}
.balloon-t4:after {
    content: '';
    position: absolute;
    border-top: 8px solid blue;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
}
/* 上 */
.balloon-t5:before {
    content: '';
    position: absolute;
    border-bottom: 12px solid red;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    top: -12px;
    left: 50%;
    margin-left: -12px;
}
.balloon-t5:after {
    content: '';
    position: absolute;
    border-bottom: 8px solid blue;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}

 

終わりに

いやーCSSは難しいですね！全然思ったとおりに表示されないｗ

あ、クラス名ですがサイト全体に影響与えないようにテスト用にと「t」を付けて連番振りました。特に深い意味はありませんｗ

吹き出し・バルーンは、この方法で実装されているのをよく見かけますが、他にも画像を一部使ったり違う方法で実装しているものもありました。

Chromeならデベロッパーツールから、すぐに実装方法を確認できますし、要素・スタイルの追加・変更も簡単に出来ます。

好みの見た目になるようにChrome上でいじくって、それをスタイルに落としこむのがいい感じです(・∀・)

とりあえずWordPressの投稿画面で、ビジュアルとテキストの切替えする度に、書いたコードがぶっ飛んでて何度もブチ切れそうになりながらの投稿でした(；´∀｀)

これはコード埋め込む記事書く時は外部エディタ使ったほうがいいや…。それでは！

 - CSS, Webサイト構築