CSSでLINEみたいな吹き出しを作るには

2016/10/06

最近、ブログでもよく見かける「吹き出し」ですが、HTML/CSSでどのように作るか紹介したいと思います。せっかくですので、LINE風の吹き出しを作ってみます。

[ad#top-1]

1 まずは尻尾の部分を作る
2 吹き出し本体を作る
3 本体と尻尾を合体させる

まずは尻尾の部分を作る

吹き出しを作るうえで最も悩ましいのが尻尾の部分です。僕も最初にどのように作るのか不思議に思っていましたが、意外や意外、Borderを太くするときに現れる斜めの線を利用していたんです。下の矢印で示した部分ですね。これを利用するんです。

これを使ってどうやって吹き出しの尻尾にするか、順を追って説明します。

まずHTML側はDIV要素のみでOK。TABLEタグは使いません。classをballoonとしておきます。

<div class="balloon"></div>

次にCSSです。以下のようにwidthとheightをゼロにして、ボーダーサイズを20pxとしておきます。ボーダー色はわかりやすく4色で設定します。ちなみに#00c300はLINE色です。

.balloon{
  width: 0px;
  height: 0px;
  background: #eee;
  border-style: solid;
  border-width: 20px;
  border-color: red yellow blue #00c300;
}

するとこんな感じになります。ボーダー部分だけ残り、4色の三角形で構成された四角が現れます。

今度はLINE色の三角だけを残し、それ以外を消します。CSSはこんな感じです。border-colorの設定にtransparentを使うと透過状態になります。

.balloon{
  width: 0px;
  height: 0px;
  background: #eee;
  border-style: solid;
  border-width: 20px;
  border-color: transparent transparent transparent #00c300;
}

するとこんな感じ。グレー部分が残っていますが、これは後で消すとして、いまは分かりやすくするために残しておきます。それっぽくなってきました。

次に、吹き出しの尻尾らしく形を整えます。透明化したところのサイズ設定することで整形できます。

.balloon{
  width: 0px;
  height: 0px;
  /* background: #eee; */
  border-style: solid;
  border-width: 0px 0px 10px 20px; /* ここで形を整える */
  border-color: transparent transparent transparent #00c300;
}

border-widthで各箇所のサイズを設定することで尻尾らしくなりました。好みに応じて設定してください。ちなみにbackground設定を消すことで（上の例ではコメントアウト）、尻尾以外の色を消しました。

吹き出し本体を作る

尻尾の部分はいったん置いておいて、次に吹き出しの本体を作ります。これは一般的な角丸の四角を作るだけ。positionをrelativeにわざわざ設定していますが、これは後につながるので書いておきます。

.balloon{
  width: 200px;
  height: 50px;
  background: #00c300;
  border-radius: 15px;
  padding: 5px;
  position: relative;
}

あえて説明するまでもなくこんな角丸の四角ができます。

本体と尻尾を合体させる

最後に本体と尻尾を合体させます。

先ほどの本体のballoon要素に、「balloon: before」という要素を追加して、その中に、right, topを0px、positionをabsolute, contentを”として設定します。そして、先ほど完成させた尻尾のコードを追加します。※わかりやすく尻尾の色を赤にしています。更に、

.balloon{
  width: 200px;
  height: 50px;
  background: #00c300;
  border-radius: 15px;
  padding: 5px;
  position: relative;
}
.balloon: before{
  right: 0px;
  top: 0px;
  position: absolute;
  content: '';  /* これはおまじない程度で思ってもらえれば */

  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0px 0px 10px 20px;
  border-color: transparent transparent transparent red;
}

するとこんな感じになります。本体に対して右上に尻尾が設置されました。

あとはこれを位置を変えてやると吹き出しになります。（尻尾の色もLINE色に戻して）

.balloon{
  width: 200px;
  height: 50px;
  background: #00c300;
  border-radius: 15px;
  padding: 5px;
  position: relative;
}
.balloon: before{
  right: 0px;
  top: 0px;
  position: absolute;
  content: '';

  width: -15px; /* ここで位置調整 */
  height: 5px;  /* ここで位置調整 */
  border-style: solid;
  border-width: 0px 0px 10px 20px;
  border-color: transparent transparent transparent #00c300;
}

いい感じに吹き出しになりました。