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

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

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

こちらは四角形のフキダシバージョンになります。

漫画のフキダシ(四角形バージョン01)

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

See the Pen CSS | speech balloons(normal version) 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">
		<p>吾輩は<br>猫である。</p>
		<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
			<path d="m69.113 33.073h126.36c3.1094 0 5.6126 0 5.6126 1e-6v191.82h-5.6126-126.36-5.6127v-191.82c0-1e-6 2.5032-1e-6 5.6127-1e-6z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
		</svg>
	</div>
</div>

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

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

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

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

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

.speech-bubble svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
	height: 220px;
}

.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: -20px;
	font-size: 18px;
	color: #404040;
	writing-mode: vertical-rl;
	text-align: left;
	transform: translate(-50%, -50%);
}

漫画のフキダシ(四角形バージョン02)

ふたつの四角形を重ねて作ったフキダシになります。

See the Pen CSS | speech balloons(square version 01) by yochans (@yochans) on CodePen.

<div class="contaner">
	<div class="speech-bubble">
		<p>吾輩は猫である。</p>
		<p>名前はまだ<br>ない。</p>
		<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
		<path d="m121.18 211.67v31.75h-100.01v-137.58h77.787m0 0-1.1e-5 -87.313 5.8933-1e-6h132.68c3.2649 0 5.8933 0 5.8933 1e-6v193.15h-122.24" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
		</svg>	
	</div>
</div>

テキストの場所が2箇所になりますので、pタグをふたつに別けています。
「:nth-child()」を使って個別に位置を指定します。

.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%);
}

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

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

.speech-bubble p:nth-child(1) {
	top: -10px;
	left: 10px;
}

.speech-bubble p:nth-child(2) {
	top: 40px;
	left: -70px;
}

漫画のフキダシ(四角形バージョン03)

四角形の交差する場所を少しだけはみ出させたタイプです。

See the Pen CSS | speech balloons(square version 01) by yochans (@yochans) on CodePen.

<div class="contaner">
	<div class="speech-bubble">
		<p>吾輩は猫である。</p>
		<p>名前はまだ<br>ない。</p>
		<svg width="1e3" height="1e3" version="1.1" viewBox="0 0 264.58 264.58" xmlns="http://www.w3.org/2000/svg">
			<path d="m121.71 201.08c-0.0755 14.111-0.13418 28.223 0 42.333h-100.54v-137.58h89.958m-11.642 10.583c-0.17639-32.632-0.35278-65.264-0.52918-97.896 48.154-2e-6 96.308-2e-6 144.46 0v193.15h-132.29" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
		</svg>
	</div>
</div>

テキストの場所が2箇所になりますので、pタグをふたつに別けています。
「:nth-child()」を使って個別に位置を指定します。

四角形バージョン03は四角形バージョン02のものと同じもので使えます。

.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%);
}

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

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

.speech-bubble p:nth-child(1) {
	top: -10px;
	left: 10px;
}

.speech-bubble p:nth-child(2) {
	top: 40px;
	left: -70px;
}