プラカンブログSTAFF BLOG

2015.09.29

CSSのみで作る!簡単な吹き出しの作り方(レスポンシブ対応)

CSSのみで作る!簡単な吹き出しの作り方(レスポンシブ対応)

お風呂あがりは、エッセンシャルオイルをキャリアオイルで希釈して、身体をマッサージしているデザイナーの嶋津です。

今回は真面目に、画像などを使用せず、CSSのみで作れる簡単な吹き出しの作り方(レスポンシブ対応)をわかりやすく紹介したいと思います。では早速行きましょう!

HTMLの記述

右の吹き出し

吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し

左の吹き出し

吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し

HTMLの記述は簡単ですね。

<p>タグを<div>タグで囲み、適当なクラス名を2つ付けただけです。ポイントは共通と固有のclass名を付けることです。

CSSの記述

共通

.fukidashi {
	width: 500px;
	position: relative;
   margin: 0 auto;
}

左右共通のclass名「fukidashi」に「width」と「relative」と「margin」を指定し、吹き出しの幅や位置を調節します。

右の吹き出し

.fukidashi.right p {
    border: 2px solid #6C88B7;
    border-radius: 3px;
    padding: 10px;
}
.fukidashi.right p:after,
.fukidashi.right p:before {
	content: ' ';
    position:absolute;
	border-top: solid 10px transparent;
	border-bottom: solid 10px transparent;
	border-left: solid 15px #ffffff;
    top: 10px;
	right: -12px;
}
.fukidashi.right p:before {
	border-left-color: #6C88B7;
	right: -15px;
}

左の吹き出し

.fukidashi.left p {
    border: 2px solid #B76BB4;
    border-radius: 3px;
    padding: 10px;
}
.fukidashi.left p:after,
.fukidashi.left p:before {
	content: ' ';
    position:absolute;
	border-top: solid 10px transparent;
	border-bottom: solid 10px transparent;
	border-right: solid 15px #ffffff;
    top: 10px;
	left: -12px;
}
.fukidashi.left p:before {
	border-right-color: #B76BB4;
	left: -15px;
}

CSSはちょっと複雑そうに見えますが、意外とシンプルです。

個別のクラス名を指定した<p>タグに「border」と「padding」を記述し、吹き出しの線と内側の余白を指定します。

さらに、<p>タグの擬似クラス「:after」と「:before」に「content」と「absolute」と「border」を記述し、吹き出しの位置と形を指定します。

そして、<p>タグの擬似クラス「:before」だけ、吹き出しに応じた「border」の色と位置を指定します。これでCSSの記述は完了です。

「border」と「potision」の記述の詳細を知りたい方は、下記の記事を見ていただければ、こういうことか!とよく理解できると思います。

*CSSで吹き出しを表現する | http://morobrand.net/mororeco/css/balloon/
*CSSのborderと疑似要素で吹き出しを作る | http://coding-factory.com/cm/cm72.html
*CSS : positionの「absolute」「relative」「fixed」のリファレンス | http://www.css-lecture.com/log/css/037.html

レスポンシブ対応

@media only screen and (max-width: 739px) {
.fukidashi {
	width: 80%;
	margin: 0 auto;
}}

吹き出しを可変させたいという方には、CSSにさらに上記のコードを記述します。レスポンシブ対応に便利なメディアクエリという技術です。これで、スマートフォンやタブレットのウィンドウ幅にも対応できます。

ここで注意点があります。それは、メディアクエリはIE8以下には対応していないことです。しかし、安心してください。対処法があります。それは以下のコードを<head>内に記述することです。


これでIE8以下のサイトにも対応できました。ただ、この記述法の場合、メディアクエリの「media type」を省略すると無効になります。また、CSSを「@import」で呼び出している場合も無効になります。詳しく知りたい方は下記のURLを読んでみてください。

*レスポンシブWebデザインをIE8に対応させる方法 http://www.aiship.jp/knowhow/archives/8311
*レスポンシブの基本、メディアクエリの書き方 http://sole-color-blog.com/wp/php/71/

まとめ

吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し

吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し吹き出し

上記のような吹き出しが出来たと思うのですが、どうでしょうか?

画像ではなく、CSSで吹き出しを作れるなんて、とても便利ですよね。しかも、可変まで簡単にできます。

最初は、グーグル先生への質問の仕方が下手なせいか、手こずったのですが、色々と試行錯誤した中で、すっきりとした記述で吹き出しを作れるようになりました。

皆さんも是非、吹き出しを作る際は、画像ではなく、CSSで作ってみることをお勧めします。

この記事は、SHIMAZU が書きました。