CSS | 漫画のフキダシ(ノーマルバージョン)のCSSデザインサンプル

CSS,CSS デザイン サンプル集

SVGで作成した漫画のフキダシをCSSでのカスタマイズを可能にしたデザインサンプルになります。

こちらは円形に尻尾があるノーマルバージョンになります。

漫画のフキダシ(ノーマルバージョン)

CSSで加工可能にした漫画のフキダシのデザイン、ノーマルバージョンの表示サンプルとサンプルコードになります。

See the Pen CSS | Fried egg by yochans (@yochans) on CodePen.

HTMLに設置した「.speech-bubble」がフキダシ本体部分になります。

テキストはSVGのtextタグでも作成可能ですが、利用やカスタマイズのしやすさを考えて「.speech-bubble」の中にpタグで作成しています。

「.speech-bubble path{}」にてフキダシ部分の加工、「.speech-bubble p{}」にてテキスト部分のカスタマイズが可能になっています。

<div class="contaner">
	<div class="speech-bubble">
		<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
			<path d="m136.38 9.5251c-82.252 3.9069-115.93 97.206-92.948 159.54 8.1518 24.771 24.26 48.267 48.481 62.538-9.4816 11.016-24.253 16.831-37.633 23.049 18.327-0.71611 36.532-6.377 51.14-16.531 63.106 25.082 123.95-33.873 128.74-88.492 8.3375-48.564-10.212-105.94-59.626-131.18-11.673-5.7141-24.866-8.9484-38.151-8.9241z" fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="1" />
		</svg>
		<p>吾輩は<br>猫である。</p>
	</div>
</div>

フキダシのサイズは「width」「height」で調整できます。

フキダシは透過していますが、背景色を付けたい場合は「fill」に通常のCSSと同じくカラーコードを指定することで色を付ける事が可能です。

フキダシの枠色は「stroke」、太さは「stroke-width」で指定可能です。

コメントアウトしてありますが、フキダシの枠を破線(点線)にする用のコードを書いてあります。

フキダシの尻尾の向きを逆にしたい場合は「transform」の「scaleX()」に「-1」を指定して下さい。

.contaner {
	position: relative;
	width: 100%;
	height: 260px;
}

.speech-bubble {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 100%;
}

.speech-bubble svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
	height: 220px;
	transform: translate(-50%, -50%) scaleX(1); /* scale(-1)で左右反転 */
}

.speech-bubble path {
	fill: none;
	stroke: #000;
	stroke-width: 1;
/* 破線にする場合 */
/* 	stroke-dasharray: 3, 3; */
/* 	stroke-dashoffset: 1; */
}

.speech-bubble p {
	position: absolute;
	top: 0;
	left: -14px;
	font-size: 22px;
	color: #404040;
	writing-mode: vertical-rl;
	text-align: left;
	transform: translate(-50%, -50%);
}

縦書きではなく横書きにする場合は以下のCSSコードを外します。

	writing-mode: vertical-rl;
	text-align: left;