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

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

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

・吹き出し内部のテキストが可変の場合、吹き出しが自動的に縦に伸びるように作れる。
・吹き出しの外枠や、内部の色変更がCSSの指定で容易に可能
・画像を使用しないので、その分だけファイルサイズを節約できる
・iPhoneやAndroidでも表示できるのでRetina対応とか楽

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

吹き出しの外枠のボックスを用意してあげて、:beforeや:afterを使って表現します。

content: "";

とか使う、よく分からないアレです。border要素を使って三角形を作ったり・・・、そんで吹き出しに枠線を付ける場合は三角形を二枚重ねて微妙にずらしてとか・・・、ああ、面倒くさい

ラクしちゃいましょう。

CSS ARROW PLEASE!

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

CSS ARROW PLEASE! http://cssarrowplease.com」はオススメのサービスです。

サイトにアクセスしたら、下記の設定を変更することで、自動的に右側のエリアに表示されている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」とか好きなクラス名を付けてもいいわけです。
このジェネレーターでは、吹き出しのヒゲの位置は縦、横ともに中央に表示されますが、位置は調整することが可能です。

今回の例では、ヒゲの位置を左に10px動かすとしたら、プロパティ「.arrow_box:after」を「margin-left: -30px;」、プロパティ「.arrow_box:before」を「margin-left: -31px;」のようにすると、ヒゲを10px左に動かすことができます。
 

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

Pure CSS speech bubbles

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

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

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

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

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

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

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

【TechAcademy】家で学べるプログラミングスクール

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

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

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

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

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景