【CSS】CSSだけで作る吹き出し

本日はCSSだけで吹き出しを作ります。

といってもCSSだけで吹き出しを作る方法は調べればすぐに 見つかるので、この記事ではなぜ吹き出しにできるのか解説したいと思います。

解説するのはサルワカさんで紹介されていた吹き出しです。

CSSで作る！吹き出しデザインのサンプル19選

html

<!--吹き出しはじまり-->
<div class="balloon5">
  <div class="faceicon">
    ★ここに画像を入れる <img~>★
  </div>
  <div class="chatting">
    <div class="says">
      <p>★文章を入れる★</p>
    </div>
  </div>
</div>
<!--吹き出し終わり-->

CSS

.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

顔画像は円形にする

faceicon imgにborder-radius 50%を設定することで円形にできる

ネガティブマージンについて

「margin-right: -90px;」の部分です。

marginにマイナス値を設定する以下のようなことができます。

• top / left　　　　要素を引き延ばす
• right / bottom　　要素に重ねる

今回はfaceiconのmargin-rightにマイナスを設定することで顔画像の上に吹き出し要素を重ねることができます。

ただし、そのままだと顔画像と重なってしまうので、saysのmarginの左に105を設定し、重ならないようにしています。

吹き出しの大きさは画面サイズ、コンテンツ長さに合わせて変更する

まず吹き出しの親要素のwidthは100%にしておきます。これで画面サイズ変更に対応可能です。

次にdisplayにinline-blockを設定することで、設定する文章に比例した大きさの吹き出しにすることができます。

吹き出しの三角形をつける

擬似要素afterとborderを組み合わせて三角形を作り、その位置をabsoluteとtop/leftで移動させています。absoluteを使うために元の要素に.saysにrelativeを設定します。

あとがき

ネガティブマージンの挙動についてかなり試行錯誤しましたが、正直まだよくわかっていない部分がたくさんあります。

100%幅を使ったレイアウトに固定幅を持った要素を配置するのに使えるという概念はわかるんですが、イマイチ腹に落ちない感じです。

参考URL

コピペで使えるfloatレイアウト（可変リキッド・固定幅（2段組・3段組） | WebTerminal

[CSS]ネガティブマージンの理解を深め、活用するテクニック集 | コリス

CSSのborderプロパティで三角形を作る | un-Tech

CSSの疑似要素とは？beforeとafterの使い方まとめ

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？