実際に書いてみる!CSSで吹き出しを作る方法【初心者向け】

初心者向けにCSSで吹き出しを作る方法について解説しています。LINEのような吹き出しを実際にソースコードを書いて説明しています。上向き下向き・左向き右向きの吹き出しの作り方を紹介しているので、ぜひ参考にしてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSでLINEのような吹き出しを作る方法について解説しています。

実際にソースコードを書いて説明しているので、書きながら実践的に理解していきましょう。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

大石ゆかり

田島メンター!!メニューの横に吹き出しのような三角を付けたいのですが、どうすればいいですか〜?

田島悠介

それでは今回はbeforeとafterの疑似要素を使って、画面に吹き出しの形を作成する例を紹介しよう。

大石ゆかり

beforeとafterは、要素の直前や直後に何かを入れるものでしたね。

田島悠介

そうだね。吹き出しの三角形部分を作るのにはいくつかの手順があるんだ。ひとつ例を見てみよう。

 

最初に実行結果をお見せします。

 

吹き出しの書き方

左向きの吹き出しを例に書き方をみていきます。まず、吹き出しの枠を作ります。

html部分
------------------------------------------
<div class="balloon-left">
  左だよ
</div>
------------------------------------------
css部分
------------------------------------------
.balloon-left {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 150px;
  height: 40px;
  line-height: 34px;
  text-align: center;
  background: #44FF44;
  border: 3px solid #000000;
  z-index: 0;
}
------------------------------------------

 

次に、:beforeで、吹き出しの尖った部分を作ります。

html部分
------------------------------------------
<div>
  左だよ
</div>
------------------------------------------
css部分
------------------------------------------
.balloon-left {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 150px;
  height: 40px;
  line-height: 34px;
  text-align: center;
  background: #44FF44;
  border: 3px solid #000000;
  z-index: 0;
}
.balloon-left:before {
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #44FF44 transparent transparent;
  content: "";
  position: absolute;
  top: 50%; left: -8px;
  margin-top: -9px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: 0;
}
------------------------------------------

最後に、:afterで吹き出しの尖った部分に枠線を追加します。

html部分
------------------------------------------
<div class="balloon-left">
  左だよ
</div>
------------------------------------------
css部分
------------------------------------------
.balloon-left {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 150px;
  height: 40px;
  line-height: 34px;
  text-align: center;
  background: #44FF44;
  border: 3px solid #000000;
  z-index: 0;
}
.balloon-left:before {
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #44FF44 transparent transparent;
  content: "";
  position: absolute;
  top: 50%; left: -8px;
  margin-top: -9px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: 0;
}
.balloon-left:after {
  border-style: solid;
  border-width: 11px 11px 11px 0;
  border-color: transparent #000000 transparent transparent;
  content: "";
  position: absolute;
  top: 50%; left: -12px;
  margin-top: -10px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: -1;
}
------------------------------------------

以上で吹き出しが完成しました。

 

田島悠介

beforeで三角の部分、afterで枠線の部分を形成しているんだ。

大石ゆかり

一番最後に処理されるafterで枠を作っているんですね。枠線を入れない場合はbeforeだけでいいということでしょうか?

田島悠介

そうなるね。次は色々な方向で作成してみようか。

 

左向きと右向き

左向きと右向きの吹き出しは次のように作ります。

html部分
--------------------------
<div class="balloon-left">
  左だよ
</div>
<div class="balloon-right">
  右だよ
</div>
--------------------------
css部分
--------------------------
/*左向き*/
.balloon-left {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 150px;
  height: 40px;
  line-height: 34px;
  text-align: center;
  background: #44FF44;
  border: 3px solid #000000;
  z-index: 0;
}
.balloon-left:before {
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #44FF44 transparent transparent;
  content: "";
  position: absolute;
  top: 50%; left: -8px;
  margin-top: -9px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: 0;
}
.balloon-left:after {
  border-style: solid;
  border-width: 11px 11px 11px 0;
  border-color: transparent #000000 transparent transparent;
  content: "";
  position: absolute;
  top: 50%; left: -12px;
  margin-top: -10px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: -1;
}
/* 右向き */
.balloon-right {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 150px;
  height: 40px;
  line-height: 34px;
  text-align: center;
  background: #44FF44;
  border: 3px solid #000000;
  z-index: 0;
}
.balloon-right:before {
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #44FF44;
  content: "";
  position: absolute;
  top: 50%; right: -8px;
  margin-top: -9px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: 0;
}
.balloon-right:after {
  border-style: solid;
  border-width: 11px 0 11px 11px;
  border-color: transparent transparent transparent #000000;
  content: "";
  position: absolute;
  top: 50%; right: -12px;
  margin-top: -10px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: -1;
}
-----------------------------

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

上向きと下向き

上向きと下向きの吹き出しの作り方です。また、border-radiusを使って、丸くしています。

html部分
--------------------------------
<div class="balloon-top">
  上だよ
</div>
<div class="balloon-bottom">
  下だよ
</div>
--------------------------------
css部分
--------------------------------
/* 上向き */
.balloon-top {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 150px;
  height: 40px;
  line-height: 32px;
  text-align: center;
  background: #44FF44;
  border: 3px solid #000000;
  z-index: 0;
  border-radius: 60%;
}
.balloon-top:before {
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #44FF44 transparent;
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  margin-left: -9px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: 0;
}
.balloon-top:after {
  border-style: solid;
  border-width: 0 11px 11px 11px;
  border-color: transparent transparent #000000 transparent;
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  margin-left: -10px;
  display: block;
  width: 0px;
  height: 0px;
  z-index: -1;
}
/* 下向き */
.balloon-bottom {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  width: auto;
  min-width: 150px;
  height: 40px;
  line-height: 34px;
  text-align: center;
  background-color: #44FF44;
  border: 3px solid #000000;
  z-index: 0;
  border-radius: 60%;
}
.balloon-bottom:before {
  content: "";
  position: absolute;
  bottom: -8px; left: 50%;
  margin-left: -9px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #44FF44 transparent transparent transparent;
  z-index: 0;
}
.balloon-bottom:after {
  border-style: solid;
  border-width: 11px 11px 0 11px;
  border-color: #000000 transparent transparent transparent;
  content: "";
  position: absolute;
  bottom: -12px; left: 50%;
  margin-left: -10px;
  width: 0px;
  height: 0px;
  z-index: -1;
}
----------------------------

 

まとめ

CSS部分は少し複雑ですが、色や形などは以下の例をベースにカスタムすることで様々なパターンの吹き出しを作ることができます。

多少失敗してもパラメータを変えて練習してみましょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

田島悠介

左右と上下、それぞれの場合の例だよ。

大石ゆかり

かなり複雑な手順なんですね。自分でやるとなるとなかなか大変そうです。

田島悠介

まずはサンプルで実際に画面に反映させてみて、そこから手を加えてみるのもいいね。

大石ゆかり

そうですね、色々練習してみます。ありがとうございました!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。