webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

【css】で作る吹き出しはどうできているのか分かりやすく解説します

cssの吹き出しはどうできてる?
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

cssを使って、吹き出しは長方形+三角形で作れます。

背景に色をつけて、三角形を擬似要素で作成しくっつけると吹き出しになるのです

まずは三角形を作る方法について簡単に見ていきましょう。

cssで三角形を作るには、borderの性質を知る

cssのborderを使うんですが、borderがどんな構造になっているかが分かれば簡単です。

ボーダーを以下のように全体に付けたとします。

<div class="border"></div>
.border {
	border: solid #333 14px;
	width: 200px;
	height: 140px;
}

border: solid #000 3px; という書き方は、以下の意味を表します。

border → top・right・bottom・left 全てにボーダーをつける。

solid → ボーダーの種類:直線

#333 →ボーダーの色

色分けすると分かりやすいです。

<div class="border2"></div>
.border2 {
	width: 200px;
	height: 140px;
	border-top: #fdd8ed solid 24px;
	border-right: #e3ffcc solid 24px;
	border-bottom: #bdf2ff solid 24px;
	border-left: #eee solid 24px;
}

このように、ボーダーの端って真っ直ぐじゃなくて、三角形のようになってるのですね。

この性質を利用して、三角形を作りますheart

<div class="border3"></div>
.border3 {
	width: 40px;
	height: 40px;
	border-top: #fdd8ed solid 20px;
	border-right: #e3ffcc solid 20px;
	border-bottom: #bdf2ff solid 20px;
	border-left: #eee solid 20px;
}

40pxの正方形に対して、半分の20pxのボーダーを上・右・下・左につけてみるとこんな風に三角形が4つできます。

これを利用するのじゃよ。

?を浮かべる女性急に誰)

実は簡単な三角形

この性質を知っていれば、三角形は簡単です。

まず全体のborderを無色透明で設定します。

<div class="triangle"></div>
.triangle {
	width: 40px;
	height: 40px;
	border: 20px solid transparent;
}

transparentを使って、ボーダーを透明にし、その後色をつけていきます。

leftに色をつけると、こうなります。

.triangle {
	width: 40px;
	height: 40px;
	border: 20px solid transparent;
	border-left: 20px solid #fdd8ed; /* 追加 */
}

topに色をつけると、こうなります。

.triangle {
	width: 40px;
	height: 40px;
	border: 20px solid transparent;
	border-top: 20px solid #fdd8ed; /* 追加 */
}

そして、topとleft同時に色をつけてみると、

.triangle-top-left {
	width: 40px;
	height: 40px;
	border: 20px solid transparent;
	border-top: 20px solid #fdd8ed;
	border-left: 20px solid #fdd8ed;
}

こんな感じになります。

これを利用して、サイズや角度を変えて、好きな三角形を作ってみてください。

ボーダーの太さ20pxに対して、倍の40px色をつけると細長い三角形になりますよ^^

.triangle {
	width: 40px;
	height: 40px;
	border: 20px solid transparent;
  border-left: 40px solid pink;
}

ようやく吹き出しを作る!

ここまで見てきた三角形を使って吹き出しを作ります。

吹き出しだよ!!!

<div class="hukidashi">
	<p>吹き出しだよ!!!</p>
</div>
.hukidashi {
	background: pink;
	padding: 1em;
	display: inline-block;
	border-radius: 20px;
	position: relative;
}
.hukidashi::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid pink;
}

“hukidashi”という箱に背景色をつけます。

position: relativeにし、三角形を配置する為の基準にします。

beforeを使い、三角形を作ります。

position: absoluteを使い、top・leftで位置を指定します。

ボーダーの大きさが10pxなので、margin-leftに”-10px”をつけ、真ん中に配置します。

つけないとどうなるかはやってみてください。web designer

こうなります。↓

吹き出しだよ!!!

なので、左に寄せる為に”-10px”をつけます^^

三角形を右に持ってくるとこんな感じです。

吹き出しだよ!!!

.hukidashi {
	background: pink;
	padding: 1em;
	display: inline-block;
	border-radius: 20px;
	position: relative;
}
.hukidashi::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 10px solid pink;
  margin-left: auto;
}

三角形の向きと、場所を変えるといろんな吹き出しパターンが作れます!

ぜひ試してみてください。

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング 【css】で作る吹き出しはどうできているのか分かりやすく解説します

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)