LINE・チャットのようなコミュニケーションツールでの吹き出しや、ブログ・Webサイトで見られる吹き出しなど、吹き出しをデザインに組み込むケースも多いと思います。今回はCSSで吹き出しを作りたい方向けに、画像を使わずにCSSのみで吹き出しデザインを作成する方法と、吹き出し作成に便利なジェネレーターを紹介します。
目 次
CSSで吹き出しを作る方法
- CSSの吹き出し(下向き)
- CSSの吹き出し(上向き)
- CSSの吹き出し(右向き)
- CSSの吹き出し(左向き)
- 吹き出し部の形状を変える(其の1)
- 吹き出し部の形状を変える(其の2)
- 円形の吹き出し
- 枠線の吹き出し
吹き出しを作れるジェネレーター
吹き出しデザインのアイデア
CSSで吹き出しを作る方法
1
吹き出し(下向き)
CSSで吹き出しを作り方は、文章を書くエリア(要素)に疑似クラス(before)で吹き出し部(三角形)を追加して形成します。下向きにしたい場合はborderプロパティを下記のように記述します。
左右のborder-color(線カラー)を透明化させborder-width(線幅)で10px(上) 10px(右) 0(下) 10px(左)と、下の線幅を0にして下向きの三角を作ります。
CSSでの三角形の作り方については下記記事を参考にしてみてください。
吹き出し(下向き)
html
[html]
<div class="bubble01" >吹き出し(下向き)</div>
[/html]
CSS
[css]
.bubble01 {
position: relative;
display: inline-block;
width: 200px;
text-align: center;
color:#FFF;
padding: 25px;
background-color: #f39800;
border-radius: 5px;
}
.bubble01:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: #f39800 transparent;
border-width: 10px 10px 0 10px;
bottom: -10px;
left: 50%;
margin-left: -10px;
}
[/css]
2
吹き出し(上向き)
上向きの吹き出しは、左右のborder-color(線カラー)を透明化させborder-width(線幅)で0(上) 10px(右) 10px(下) 10px(左)と、上の線幅を0にして上向きの三角を作ります。
吹き出し(上向き)
html
[html]
<div class="bubble02" >吹き出し(上向き)</div>
[/html]
CSS
[css]
.bubble02 {
position: relative;
display: inline-block;
width: 200px;
text-align: center;
color:#FFF;
padding: 25px;
background-color: #f39800;
border-radius: 5px;
}
.bubble02:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: #f39800 transparent;
border-width: 0 10px 10px 10px;
top: -10px;
left: 50%;
margin-left: -10px;
}
[/css]
3
吹き出し(右向き)
右向きの吹き出しは、上下のborder-color(線カラー)を透明化させborder-width(線幅)で10px(上) 0(右) 10px(下) 10px(左)と、右の線幅を0にして右向きの三角を作ります。
吹き出し(右向き)
html
[html]
<div class="bubble03" >吹き出し(右向き)</div>
[/html]
CSS
[css]
.bubble03 {
position: relative;
display: inline-block;
width: 200px;
text-align: center;
color:#FFF;
padding: 25px;
background-color: #f39800;
border-radius: 5px;
}
.bubble03:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: transparent #f39800;
border-width: 10px 0 10px 10px;
top: 50%;
right: -10px;
margin-top: -10px;
}
[/css]
4
吹き出し(左向き)
左向きの吹き出しは、上下のborder-color(線カラー)を透明化させborder-width(線幅)で10px(上) 10px(右) 10px(下) 0(左)と、左の線幅を0にして左向きの三角を作ります。
吹き出し(左向き)
html
[html]
<div class="bubble04" >吹き出し(左向き)</div>
[/html]
CSS
[css]
.bubble04 {
position: relative;
display: inline-block;
width: 200px;
text-align: center;
color:#FFF;
padding: 25px;
background-color: #f39800;
border-radius: 5px;
}
.bubble04:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: transparent #f39800;
border-width: 10px 10px 10px 0;
top: 50%;
left: -10px;
margin-top: -10px;
}
[/css]
5
吹き出し部の形状を変える(其の1)
吹き出し部(三角形)を鋭角にしたい場合の例です。border-width(線幅)で20px(上) 10px(右) 0(下) 10px(左)と、上の線幅を20pxにサイズ変更してにして鋭角の三角を作ります。
CSSでの吹き出し
html
[html]
<div class="bubble05" >CSSでの吹き出し</div>
[/html]
CSS
[css]
.bubble05 {
position: relative;
display: inline-block;
width: 200px;
text-align: center;
color:#FFF;
padding: 25px;
background-color: #f39800;
border-radius: 5px;
}
.bubble05:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: #f39800 transparent;
border-width: 20px 10px 0 10px;
bottom: -20px;
left: 50%;
margin-left: -10px;
}
[/css]
6
吹き出し部の形状を変える(其の2)
吹き出し部(三角形)のバリエーション例です。border-width(線幅)で20px(上) 20px(右) 0(下) 0(左)とすることで角度が変わった三角を作ることができます。
CSSでの吹き出し
html
[html]
<div class="bubble06" >CSSでの吹き出し</div>
[/html]
CSS
[css]
.bubble06 {
position: relative;
display: inline-block;
width: 200px;
text-align: center;
color:#FFF;
padding: 25px;
background-color: #f39800;
border-radius: 5px;
}
.bubble06:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: #f39800 transparent;
border-width: 20px 20px 0 0;
bottom: -20px;
left: 50%;
margin-left: -10px;
}
[/css]
7
円形の吹き出し
円形の吹き出しを作る場合は、⑤で紹介した鋭角の三角形を使用した方がキレイな吹き出しを作れます。
吹き出し
html
[html]
<div class="bubble07" >吹き出し</div>
[/html]
CSS
[css]
.bubble07 {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color:#FFF;
background-color: #f39800;
border-radius: 50%;
}
.bubble07:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: #f39800 transparent;
border-width: 30px 10px 0 10px;
bottom: -28px;
left: 50%;
margin-left: -10px;
}
[/css]
8
枠線の吹き出し
枠線の吹き出しは吹き出し部(三角形)の疑似クラス(before・after)を用い作成します。beforeとafterをz-index(深度)で重ね合わせafter(下層)の表示位置を調整し枠線を作ります。
CSSでの吹き出し
html
[html]
<div class="bubble08" >CSSでの吹き出し</div>
[/html]
CSS
[css]
.bubble08 {
position: relative;
display: inline-block;
width: 200px;
text-align: center;
padding: 25px;
background-color: #FFF;
border: #000 solid 4px;
}
.bubble08:before {
content: ”;
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: #FFF transparent;
border-width: 25px 25px 0 0;
bottom: -16px;
left: 50%;
margin-left: -10px;
}
.bubble08:after
{
content: ”;
position: absolute;
display: block;
z-index: 0;
border-style: solid;
border-color: #000 transparent;
border-width: 25px 25px 0 0;
bottom: -25px;
left: 50%;
margin-left: -14px;
}
[/css]
簡単に吹き出しを作れるジェネレーター
これまでCSSでの吹き出しに作り方を解説しましたが、CSSなんて理解しなくてもいいから手軽にソースだけ欲しいという方もいるでしょう。そんな方はブラウザでCSSの吹き出しを作ることができるジェネレーターを利用してみましょう。簡単な操作で吹き出しを作成できるジェネレーターを4サイト紹介します。
1
cssarrowplease
2
CSS Speech Bubble Generator CSS Arrow
3
Bubbly
4
Bubbler
吹き出しデザインのアイデア
コードコミュニティサイトCodepenで公開しているCSSで作られた吹き出しのアイデアからデザイン例をピックアップしました。CSSでの吹き出しを作成する時の参考にしてみてください。
responsive speech bubble
Comic Bubbles
Speech bubble
Responsive Comic Book Layout
漫画のコマ割りのようなレイアウト
See the Pen Responsive Comic Book Layout by Chris Smith (@chris22smith) on CodePen.
Alternating speech bubbles
直線的でスタイリッシュなCSS吹き出しのデザイン
See the Pen Alternating speech bubbles by Kevin Østerkilde (@Kosai106) on CodePen.
