CSSで吹き出しを作っちゃうよ

画像を使わずCSSだけで吹き出しを使いたい場面が最近よくあります。
簡単な作り方をご紹介しまーす。

CSSだけで吹き出しを作るメリット

画像を使用せず、CSSだけで吹き出しを作るメリットとして以下のようなものが挙げられます。

  • 吹き出し内部のテキスト量に応じて、吹き出しのサイズが自動的に調整される
  • 後から吹き出しのデザインを変更したくなった場合にCSSの指定で容易に変更可能
  • 画像を使用しない分だけファイルサイズを節約できる
  • iPhoneやAndroidでも表示できる

吹き出しをCSSで作る場合の考え方

吹き出しの外枠のボックスを用意してあげて、擬似要素である「:before」や「:after」といった要素を使って表現します。

自分で一から作ろうとすると、border要素を使って三角形を作ったり・・・、そして吹き出しに枠線を付ける場合は三角形を二枚重ねて微妙にずらしてとか・・・、ああ、めっちゃ複雑...!

吹き出しを簡単に作ることができるWebサービスを使ってラクをしちゃいましょう。

CSS ARROW PLEASE!

CSSで吹き出しを作る際、一から考えて記述するよりも、ジェネレーター系のサイトを使うとかなり楽です。

CSS ARROW PLEASE!」がオススメのサービスです。

サイトにアクセスしたら、以下の設定を変更することで、自動的に右側のエリアに表示されているCSSの表記が書き変わります。

Position

吹き出しのヒゲ「▲」の表示位置を変更できます。

Color

吹き出し内部の色を変更できます。

Size

吹き出しのヒゲ「▲」の大きさ(太さ)を変更できます。

Border Width

吹き出しの外枠の線幅を変更できます。「0px」を指定すると、外枠が非表示になります。

Border color

吹き出しの外枠の色を変更できます。

CSS記述例

.arrow_box {
	position: relative;
	background: #95c6d5;
	border: 1px solid #ffffff;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(149, 198, 213, 0);
	border-top-color: #95c6d5;
	border-width: 20px;
	margin-left: -20px;
}
.arrow_box:before {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 21px;
	margin-left: -21px;
}

ジェネレーターでは、「arrow_box」というクラス名で出力されますが、当然「baloon」とか、自分で好きなクラス名を付けてもいいわけです。

このジェネレーターでは、吹き出しのヒゲの位置は縦、横ともに中央に表示されますが、位置はCSSを変更すれば調整することが可能です。

他にも、ポワーンとした吹き出しや、吹き出しのヒゲが三角ではなく、もっと漫画っぽくニョキっとした吹き出しを作りたい場合もあるかもしれません。

そんな時は、こんなサイトを参考にしています。

Pure CSS speech bubbles

英語だと、吹き出しのことを「speech bubbles」とか、単に「bubbles」とかって言うんですね。

Pure CSS speech bubblesにアクセスしたら、ページ上部に「view the CSS file」というテキストリンクがあると思うので、ここをクリックしてみてください。それぞれの吹き出しのCSSが分かりやすく記述されてますよ!

HTMLソースとCSSを見て、そのまま吹き出しに使えますね。

以上、CSSで吹き出しを作る際に参考になりそうなサイトの紹介でした!

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

プログラミング 無料体験

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。

【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒
※自然の音からデスメタルまで聴きます。

@tomicci
詳しいプロフィール

【運営サイト】
ザ サイベース
おと風景