CSSで円形の画像と吹き出しを並べて表示する

前回の記事「CSSで画像の好きな位置を円形にトリミングする方法」では画像の任意の位置で円形に切り抜いてTwitterやLineのアイコンみたいなモノを作ってみました。

こんなの。

■CSS例

img {
	width:100px;
	height:100px;
	border-radius:50%;
	object-fit:cover;
	object-position:-10px;
}

元画像がどんなサイズだろうと、5行書くだけで任意の位置を円形でくり抜けるんだから便利ですよねー。

せっかくなので（？）今回はこの写真の横に吹き出しを付けて、より一層それっぽくしてみたいと思います。

角丸な吹き出しの作り方

表示例

ソース

<div style="background-color:rgb(113,147,193);padding:1em;">
<p style="border-radius:10px;background-color:white;width:200px;padding:1em;">
ここにセリフが入ります。<br>
二行目はここ。<br>
</p>
</div>

解説

解説も何もPタグにborder-radius付けて角丸にしただけですね。

背景色をラインっぽい青にして、Pタグの背景色を白にすることで、それっぽい雰囲気にしています。

画像（アイコン）と吹き出しを横に並べる

失敗例

最初に表示した円形の画像と吹き出しを何も考えずに列挙すると、縦並びになってしまいます。

imgタグはインライン要素（行に入る要素）ですが、Pタグはブロック要素なので、別の行に移動されるわけですね。

なので、Pタグをインラインブロックにしてしまいましょう。

表示例

ソース

<div style="background-color:rgb(113,147,193);padding:1em;">
	<p style="display:inline-block;">
		<img src="[画像ファイル]" style="width:100px;height:100px;object-fit:cover;border-radius:50%;" />
	</p>
	<p style="border-radius:10px;background-color:white;width:200px;padding:1em;display:inline-block;vertical-align:top;">
		ここにセリフが入ります。<br>
		二行目はここ。<br>
	</p>
</div>

解説

画像も吹き出しもinline-blockにしたPタグで囲んで横並びを実現しています。

ただ、画像と吹き出しは高さが異なる可能性が高いため、吹き出し側にはvertical-align:top;を付けることで、上揃えにしています。これを付けていないと画像と吹き出しのサイズが異なる場合にガタガタになってしまいます。

これでも十分それっぽくなったと思うのですが、もうちょい吹き出しらしくするために三角形も付けてみましょうか。

CSSで三角形を作るにはborderのtransparentをうまく使う

まず三角形が描けないと話にならないので、そこからです。

元々、borderの角は斜めで表現されている性質を利用するのですが、まずコレを見るのが理解しやすいと思います。

この図形は高さも0、幅も0でborderだけが20pxで指定されている状態です。

CSS例

div {
	width:0;
	height:0;
	border-left:20px solid red;
	border-top:20px solid green;
	border-right:20px solid blue;
	border-bottom:20px solid black;
}

このようにborderとborderの繋ぎ目は元々斜めなので、1箇所だけ残して、残りを消してしまえば三角形を作ることが出来るんですね。

表示例

ソース

div {
	width:0;
	height:0;
	border-left:20px solid transparent;
	border-top:20px solid transparent;
	border-right:20px solid blue;
	border-bottom:20px solid transparent;
}

解説

先述の赤、緑、青、黒で表示された図形と見比べればわかりやすいと思いますが、右の青だけ残して、残りをtransparent（透明）にしているわけです。そうするとまるで左を指している三角形っぽいでしょう？

吹き出しをよりソレっぽくする

表示例

ソース

<div style="background-color:rgb(113,147,193);padding:1em;">
	<p style="display:inline-block;">
		<img src="[画像ファイル]" style="width:100px;height:100px;object-fit:cover;border-radius:50%;" />
	</p>
	<p class="bubble">
		我輩は犬である。<br>
		名前はまだない。<br>
	</p>
</div>

<style>
.bubble {
	border-radius:10px;
	background-color:white;
	width:200px;
	padding:1em;
	display:inline-block;
	vertical-align: top;
	position:relative;
	margin:0 0 0 1em;
}
.bubble:before {
	content:'';
	position:absolute;
	width:0;
	height:0;
	left:-20px;
	top:20px;
	border-left:10px solid transparent;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	border-right:10px solid white;
}
</style>

解説

HTMLをいじらずにCSSで済ませるため、before疑似要素（要素の直前に内容を挿入する）を使いました。

そのため、bubbleクラスを作り、吹き出しで使うPタグに設定しています。

目新しいことはないですが、あえて解説するとしたら、position関係ですかね。

position:absolute;を指定すると絶対座標で配置が出来るわけですが、普通絶対座標なんて使いづらいです。ページ内の座標指定なんてしたくない。

ということで、親要素であるbubbleのpositionにrelativeを指定することにより、bubbleを基準として、そこからの相対座標をbubble:beforeで指定しています。

left:-20px;top:20px;という部分ですね。角丸吹き出しを基準として、そこから左に20ピクセル、下に20ピクセル移動した位置に白い三角形を配置しています。

まとめ

• 画像と文字を横に並べる場合はinline-blockを使うと簡単。
• inline-blockで並べた場合、高さが違う要素ではガタガタになってしまう。そのときはvertical-alignで揃えよう。
• CSSで三角形を表現するにはborderとtransparentの組み合わせが簡単。
• 吹き出しの左側に三角形を付けたい場合はbefore疑似要素を使って三角形を挿入してしまうのも手。

といったところでしょうか。

吹き出しなんて画像使っても良いんですけど、そうすると今度はレスポンシブデザインで困るじゃないですか。

なんだかんだPCとスマホの両方に対応するには画像使うより、CSSをぐりぐりいじったほうが後々のメンテが楽になるケースが多いんですよねー。

以上、ちょっと別に管理しているサイトでアイコンと吹き出しを付ける必要があったので、備忘録がてら記事にしてみました。

悩んでいる方の参考になれば幸いです。