HTML・CSS広告を含む記事です

CSSの吹き出しを擬似要素で作成！コピペOK｜before afterの使い方

画像：CSSと疑似要素で作る吹き出し。before・afterに枠線で三角を作る。

今回はHTMLとCSSだけで吹き出しを作る方法を解説。作り方はもちろん、色々なデザインの吹き出しもコピペで使えます。

CSSの吹き出しは画像も不要で軽量かつ修正も簡単です。

解説内容は、

  • 吹き出し作成に使うCSSプロパティについて
    • 吹き出しが出来る仕組み
  • CSSで吹き出しを綺麗に作るポイント

仕組みを理解すれば、後は自分でもカスタマイズ出来ますよね。ブログやLINE風の会話形式などの吹き出しが作れる様になりますよ。

吹き出しはレスポンシブ対応で、中のテキスト量に合わせて伸縮します。PC・スマホでも問題ありません。

吹き出し作成に使うCSS

まず吹き出しはテキストが入る本体と、吹き出し口とに分かれます。その吹き出し口を作るのに使うのが疑似要素であるbeforeとafterです。

そして、今回キモとなるCSSプロパティが以下の通り。

  • borderプロパティ
  • positionプロパティ

実は、borderは枠線だけでなく吹き出しの三角を作る事が出来ます。そしてpositionで吹き出しの位置を決める事で完成します。

よく見かけるシンプルな四角いデザインの吹き出しを例にして、仕組みから作り方を解説していきます。

CSSで吹き出しが出来る仕組み解説

吹き出しは枠線無しと枠線有りとでは作り方が違います。borderで作るこの枠線の仕組みが理解できると大抵の吹き出しは簡単に作れますよ。

まずは以下、四角いデザインの吹き出しで解説。

枠線が無い吹き出しの仕組み

下に吹き出しがある枠線無しのデザイン

テキストが入る本体部分はごく普通のボックス。本体の横幅はテキストの長さに合わせると収まりが良いです。
今回の様に枠線を引かない場合は背景色が必要になります。

完成版ソースコード

<p class="speechbubble01-bottom">下に吹き出しがある枠線無しのデザイン</p>
/** 四角い吹きだし下向き（枠線なしバージョン）**/
/* テキストが入る本体部分 */
.speechbubble01-bottom {
  background: #44a5e6;
  color: #fff;
  font-size: 100%;
  padding: 1.5em;
  display: inline-block;
  position: relative;
}

/* 吹き出し部分の記述はココに */
.speechbubble01-bottom::before {
  content: "";
  border: 10px solid transparent;
  border-top: 10px solid #43a5e6;
  margin-left: -10px;
  top: 100%;
  left: 50%;
  position: absolute;
}

吹き出しのサイズを中身に合わせる

/* テキストの長さに合わせるなら */
.speechbubble01-bottom {
  display: inline-block;
}

吹き出しに入る文字量に合わせて吹き出し全体のサイズが変わる様にすると見栄えが良いです。

インラインブロックやインラインフレックスでテキスト幅にフィットさせるのがポイント。吹き出し部分の縦横サイズは同じくらいにし、全体的に小さめにするとバランスが良いです。

吹き出し口の位置決めはpositionを使う

画像：positionで吹き出し口の位置を決める
/* 吹き出しの基準位置 */
.speechbubble01-bottom {
  position: relative;
}

/* 吹き出し部分の位置調整 */
.speechbubble01-bottom::before {
  margin-left: -10px;
  top: 100%;
  left: 50%;
  position: absolute;
}

吹き出しを上下左右に作る訳ですが、位置決めの基準をテキストが入る本体にしておけば簡単です。

後は疑似要素側でtopやleftで好きな位置へ合わせます。この時、ボーダーの線幅分だけネガティブマージンするのがポイント。

吹き出し口を左右中央に配置するには、線幅のpx分だけマージンをマイナスにするのがポイントです。

吹き出し口はボーダーで作る

画像：borderの仕組み。不要な辺をtransparentで透明にする。残りが吹き出しに見える。

吹き出し口は疑似要素である「::before」にボーダーで作ります。

テキストなどの中身が無いエリアではボーダーの各辺が三角形になり、サイズは線幅で決まります。

ボーダー線は「transparent」で透明に出来て線幅もそのまま。不要な辺だけ透明にすれば、残った線が吹き出しに見える訳です。

/* 吹き出し部分の作成 */
.speechbubble01-bottom::before {
  content: "";
  border: 10px solid transparent;
  border-top: 10px solid #43a5e6;
}

CSSの記述は、先にボーダーの線を全て「transparent」で透明にしておき、次に、必要な吹き出し方向の線にだけ色指定をすれば簡単です。

枠線が有る吹き出しの仕組み

下に吹き出しがある枠線有りのデザイン

枠線が有る吹き出しの作り方を理解出来ると吹き出しデザインのパターンが増えます。ひと手間加えるだけなので試してくださいね。

完成版ソースコード

<p class="speechbubble02-bottom">下に吹き出しがある枠線有りのデザイン</p>
/** 四角い吹きだし下向き（枠線ありバージョン）**/
/* テキストが入る本体部分 */
.speechbubble02-bottom {
  background: #fff;
  color: #333;
  position: relative;
  padding: 1.5em;
  border: 2px solid #44a5e6;
  display: inline-block;
}

.speechbubble02-bottom::before {
  content: "";
  border: 10px solid transparent;
  border-top: 10px solid #44a5e6;
  margin-left: -10px;
  top: 100%;
  left: 50%;
  position: absolute;
}

/* ::afterで吹き出しを追加し重ねる */
.speechbubble02-bottom::after {
  content: "";
  border: 10px solid transparent;
  border-top: 10px solid #fff;
  margin-left: -10px;
  margin-top: -3px;
  top: 100%;
  left: 50%;
  position: absolute;
}

吹き出し口を追加する

実は疑似要素「::before」「::after」それぞれに吹き出しを作り、重なりを少しずらす事で枠線が有る様に見せています。

 /* ::afterの吹き出しの色を変更し位置も調整 */ 
.speechbubble02-bottom::after {
  border: 10px solid transparent;
  border-top: 10px solid #fff;
  margin-left: -10px;
  margin-top: -3px;
}

追加した吹き出しは、テキストエリアに指定したボーダーの線幅と揃うようにマージンを微調整。ボーダーの色も変更します。

重なり順が上になる「::after」のボーダーにテキストエリアと同じ色を付けるのがポイントです。ここでは白色を指定。
上に重ねた吹き出しは、テキスト部分のボーダー線の太さと揃う様にずらします。

角丸の吹き出しデザイン CSS

下に吹き出しがある角丸デザイン

吹き出しの角が少し丸まった可愛い吹き出しのサンプルです。柔らかさやポップな雰囲気を出したい時に使えますね。
先ほど解説した枠線無しの吹き出しサンプルを使い角を丸めました。

完成版ソースコード

/* 角丸の吹きだし下向き（枠線なし） */
.speechbubble03-bottom {
  background: #44a5e6;
  color: #fff;
  font-size: 100%;
  padding: 1.5em;
  display: inline-block;
  border-radius: 6px;
  position: relative;
}

.speechbubble03-bottom::before {
  content: "";
  border: 10px solid transparent;
  border-top: 10px solid #43a5e6;
  margin-left: -10px;
  top: 100%;
  left: 50%;
  position: absolute;
}
/* 枠線を角丸にする */
.speechbubble03-bottom {
  border-radius: 6px;
}

border-radiusで吹き出しの角を丸めます。さりげなく控えめに丸めるのがポイント。角丸を大きくするとダサくなってしまいます。

吹き出し位置をずらしたデザイン CSS

吹き出し位置をずらしたデザイン

普通の吹き出しにちょっと手を加えれば、一風変わった吹き出し口に変える事が出来ます。枠線有りの吹き出しの応用です。

完成版ソースコード

/* 位置をずらした吹きだし下向き（枠線あり） */
.speechbubble04-bottom {
  background: #fff;
  color: #333;
  position: relative;
  padding: 1.5em;
  border: 4px solid #44a5e6;
  display: inline-block;
}

.speechbubble04-bottom::before {
  content: "";
  border: 14px solid transparent;
  border-top: 16px solid #44a5e6;
  margin-left: -5px;
  top: 100%;
  left: 87%;
  position: absolute;
}

.speechbubble04-bottom::after {
  content: "";
  border: 14px solid transparent;
  border-top: 16px solid #fff;
  margin-left: -10px;
  margin-top: 0;
  top: 100%;
  left: 87%;
  position: absolute;
}
/* 吹き出しの重なり位置をわざとずらす */
.speechbubble04-bottom::before {
  border: 14px solid transparent;
  border-top: 16px solid #44a5e6;
  margin-left: -5px;
}

.speechbubble04-bottom::after {
  border: 14px solid transparent;
  border-top: 16px solid #fff;
  margin-left: -10px;
  margin-top: 0;
}

疑似要素「::before」「::after」それぞれでボーダーの線幅と位置を変える事で立体的に見せたり、枠線が途切れたように見せる事が出来ます。

吹き出しの枠線に空きがある事で軽さが出ますね。

会話形式の吹き出しデザイン CSS

フエル

会話形式の吹き出しデザイン

LINEやブログの様な会話形式の吹き出しです。アイコンと吹き出しの位置を反対にすれば会話っぽくなりますね。

完成版ソースコード

  <div class="chat">
    <figure class="icon">
      <img class="chat-icon__img" alt="" src="https://fueru.info/blog/wp-content/uploads/2020/10/profile.png">
      <figcaption class="name">フエル</figcaption>
    </figure>
    <div class="hukidashi">
      <p>会話形式の吹き出しデザイン</p>
    </div>
  </div>
/* 会話形式の吹き出し */
.chat {
  margin: 1em 0 1.3em;
  font-size: 95%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.chat .icon {
  width: 10%;
  margin: 0 1em;
  min-width: 80px;
  text-align: center;
}
    
.chat .chat-icon__img {
  border-radius: 50%;
  margin: 0;
  max-width: 100%;
  height: 100%;
}

.chat .icon .name {
  font-size: .65em;
  padding: 0.4em 0;
  text-align: center;
}

.chat .hukidashi {
  border: 3px solid #eee;
  margin: 1em 0 0 0;
  position: relative;
  width: 100%;
  border-radius: 0 1.2em 1.2em 1.2em;
  padding: 2.5%;
}
    
.chat .hukidashi::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 0;
  margin-left: -20px;
  border: 7px solid transparent;
  border-right: 7px solid #eee;
}

アイコンと吹き出しをフレックスで横に並べるだけなので、吹き出し自体の作り方は今までと変わりません。吹き出しが縦から横になっただけです。

サイズ等はお好みで調整して下さい。レスポンシブ対応なのでPC・スマホ問わず使えます。

まとめ、CSSと疑似要素で作る吹き出し

CSSの疑似要素（::before、::after）とborderを使った吹き出しの作り方を紹介しました。画像を使わないので軽量かつ修正も簡単です。

CSSの吹き出しなど疑似要素を使った図形作成は使う事が多いので、仕組みから覚えておくと便利ですよ。

画像：CSS疑似要素の種類と書き方解説
関連記事【初心者OK】CSS疑似要素の種類と書き方 超簡単に解説