CSSで作成する吹き出しとデザインのアイデア

CSSで作成する吹き出しとデザインのアイデア
LINE・チャットのようなコミュニケーションツールでの吹き出しや、ブログ・Webサイトで見られる吹き出しなど、吹き出しをデザインに組み込むケースも多いと思います。今回はCSSで吹き出しを作りたい方向けに、画像を使わずにCSSのみで吹き出しデザインを作成する方法と、吹き出し作成に便利なジェネレーターを紹介します。

目　次
CSSで吹き出しを作る方法
吹き出しを作れるジェネレーター
吹き出しデザインのアイデア




CSSで吹き出しを作る方法




1

吹き出し(下向き)

CSSで吹き出しを作り方は、文章を書くエリア(要素)に疑似クラス(before)で吹き出し部(三角形)を追加して形成します。下向きにしたい場合はborderプロパティを下記のように記述します。 左右のborder-color(線カラー)を透明化させborder-width(線幅)で10px(上) 10px(右) 0(下) 10px(左)と、下の線幅を0にして下向きの三角を作ります。

CSSでの三角形の作り方については下記記事を参考にしてみてください。

画像を使わずにCSSだけで三角・矢印を作る方法

design.webclips.jp/css-arrow/


吹き出し(下向き)
html
<div class="bubble01" >吹き出し(下向き)</div>
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;
}


2

吹き出し(上向き)

上向きの吹き出しは、左右のborder-color(線カラー)を透明化させborder-width(線幅)で0(上) 10px(右) 10px(下) 10px(左)と、上の線幅を0にして上向きの三角を作ります。

吹き出し(上向き)
html
<div class="bubble02" >吹き出し(上向き)</div>
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;
}


3

吹き出し(右向き)

右向きの吹き出しは、上下のborder-color(線カラー)を透明化させborder-width(線幅)で10px(上) 0(右) 10px(下) 10px(左)と、右の線幅を0にして右向きの三角を作ります。

吹き出し(右向き)
html
<div class="bubble03" >吹き出し(右向き)</div>
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;
}


4

吹き出し(左向き)

左向きの吹き出しは、上下のborder-color(線カラー)を透明化させborder-width(線幅)で10px(上) 10px(右) 10px(下) 0(左)と、左の線幅を0にして左向きの三角を作ります。

吹き出し(左向き)
html
<div class="bubble04" >吹き出し(左向き)</div>
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;
}


5

吹き出し部の形状を変える(其の1)

吹き出し部(三角形)を鋭角にしたい場合の例です。border-width(線幅)で20px(上) 10px(右) 0(下) 10px(左)と、上の線幅を20pxにサイズ変更してにして鋭角の三角を作ります。

CSSでの吹き出し
html
<div class="bubble05" >CSSでの吹き出し</div>
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;
}


6

吹き出し部の形状を変える(其の2)

吹き出し部(三角形)のバリエーション例です。border-width(線幅)で20px(上) 20px(右) 0(下) 0(左)とすることで角度が変わった三角を作ることができます。

CSSでの吹き出し
html
<div class="bubble06" >CSSでの吹き出し</div>
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;
}


7

円形の吹き出し

円形の吹き出しを作る場合は、⑤で紹介した鋭角の三角形を使用した方がキレイな吹き出しを作れます。

吹き出し
html
<div class="bubble07" >吹き出し</div>
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;
}


8

枠線の吹き出し

枠線の吹き出しは吹き出し部(三角形)の疑似クラス(before・after)を用い作成します。beforeとafterをz-index(深度)で重ね合わせafter(下層)の表示位置を調整し枠線を作ります。

CSSでの吹き出し
html
<div class="bubble08" >CSSでの吹き出し</div>
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の吹き出しを作ることができるジェネレーターを利用してみましょう。簡単な操作で吹き出しを作成できるジェネレーターを4サイト紹介します。


1

cssarrowplease

吹き出し向きと、枠線(線幅)を指定できるシンプルな吹き出しジェネレーター

2

CSS Speech Bubble Generator CSS Arrow

吹き出し向きと、グラデーション・影(シャドー)までカスタマイズできる吹き出しジェネレーター

3

Bubbly

吹き出し向きと、出っ張り(三角)の大きさを指定できるシンプルな吹き出しジェネレーター

4

Bubbler

吹き出し向きと、枠線(線幅)・出っ張り(三角)の位置などカスタマイズできる吹き出しジェネレーター



吹き出しデザインのアイデア


コードコミュニティサイトCodepenで公開しているCSSで作られた吹き出しのアイデアからデザイン例をピックアップしました。CSSでの吹き出しを作成する時の参考にしてみてください。

responsive speech bubble

レスポンシブ対応の丸みのあるCSS吹き出しのデザイン

See the Pen responsive speech bubble by peros (@perossing) on CodePen.



Comic Bubbles

円を重ね合わせた漫画でみられるCSS吹き出しのデザイン

See the Pen Comic Bubbles by Tiffany Rayside (@tmrDevelops) on CodePen.



Speech bubble

角度を変えた立体感のあるCSS吹き出しのデザイン

See the Pen Speech bubble by Ana Tudor (@thebabydino) on CodePen.



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.



Speech Bubble Animation

吹き出しを重ねたアニメーション

See the Pen Speech Bubble Animation by Ali Klein (@AliKlein) on CodePen.



origami – speech bubble

折り紙を折ったようなCSS吹き出しのデザイン

See the Pen origami – speech bubble by Moorthy (@moorthy-g) on CodePen.

会話調の文章や、強調したい箇所など効果的に使用することができますね。アイデア次第では、個性的な吹き出しも作成できますので参考にしてみてください。以上、CSSで作成する吹き出しとデザインのアイデアでした。

CSSで簡単に作れるおしゃれな見出しデザイン20選

design.webclips.jp/css-midashi-ribon/

CSSで実装するボタンデザインとホバーエフェクトのアイデア

design.webclips.jp/css-button/



＼ Webデザインに関するお役立ち情報を定期的に配信中 ／

Follow @webclips_jp

  • 【CodePen】ハンバーガーメニューのアイデア10選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービス11選
  • CSSボタンのデザインとホバーエフェクトのアイデア
  • 【CodePen】トグルボタン(スイッチ)のアイデア15選
  • 【CodePen】マグネットボタンのアイデア10選
  • 【CodePen】Ken Burns Effectのアイデア8選
PopularPosts
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 漢字が使える日本語フリーフォント97選（商用利用可）
  • 無料で使えるデジタル風フォント13選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 無料で使えるフリーイラスト素材サイト55選（商用利用可)
  • Photoshopで使用できる“煙・湯気系”ブラシ10選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年12月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選（商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選
  • 人物の線画イラストをダウンロードできるフリー素材サイト7選
  • イラスト素材サイト「イラストAC」の使い方 (商用利用可)