[css]下付きの吹き出しを作ってみよう

今回は、cssで吹き出しを作ってみようと思います。吹き出しを今まで画像で作っていた方は、必見です。cssで記述することでコード側で色やサイズなどの調整がきくため非常に便利です。

吹き出しを作るhtmlの構造

吹き出しを作るためのhtmlのご紹介をしたいと思います。

htmlの構造は、複雑な構造になるのかと言われますと、実はdivタグ１つだけになります。

<div class="hukudashi">cssで吹き出しをデザインしよう</div>

上記のような構造になります。非常にシンプルですよね。

cssで吹きだしのようにデザインしてみよう

cssで吹き出しのようにしていこうと思います。まず吹き出しといえば　四角形の枠が当って下や上、左や右に三角形が付いているようなデザインになるかと思います。今回はborderを使って下付きの吹きだしを作ってみようと思います。

beforeとafterの擬似要素を上手に使って作っていきたいと思います。

まずは、枠線を作ってみましょう。

<style>
 .hukidashi{
  padding:15px;
  border:1px solid #000;
  border-radius:10px;
  display:inline-block;
  width:100%;
  text-align:center;
 }
</style>
<div class="hukidashi">cssで吹き出しをデザインしよう</div>

吹き出しの枠線の部分だけを作った実装例

上記のように枠線の部分を作って吹き出しの文章が入るところができましたね。

あとは下や上、右や左に三角形の部分がつけば、吹き出しになりますね。
今回は、beforeの要素とafterの要素を使って三角形の部分を作っていきたいと思います。まずはborderの同じ色の黒部分の三角形を作ってみましょう。

<style>
 .hukidashi{
  padding:15px;
  border:1px solid #000;
  border-radius:10px;
  display:inline-block;
  width:100%;
  text-align:center;
　position:relative;
 }
 .hukidashi:before{
     position: absolute;
    content: "";
    display: inline-block;
    border-style: solid;
    bottom: -21px;
    left: 50%;
    border-left-color: #fff;
    border-right-color: #fff;
    border-top-color:#000;
    border-right-width: 20px;
    border-left-width: 20px;
    border-top-width: 20px;
    border-bottom-width: 0;
 }
</style>
<div class="hukidashi">cssで吹き出しをデザインしよう</div>

吹き出しの下に黒い三角形をつけたサンプル実装例

上記のように下に吹き出しの三角形部分ができましたね。ただこのままでは黒い部分が違和感がありますね。上の枠線の部分の背景も黒くしてしまえばそういうデザインになりますが、背景が白い状態では、この三角形の輪郭部分だけが欲しいですね。そこでafterの要素を使って次は白い三角形を枠線の太さ分ずらすことで黒い三角形の輪郭の部分だけを見えるようにしていこうと思います。

三角形の部分を輪郭だけにする考え方のサンプル

上記のようにafterを使ってbeforeで作成した三角形と同じものを作成します。

上記のサンプルでは、わかるように色を灰色にしてあります。
上記の灰色の部分を下の黒い三角形に2pxだけずらして配置します。
(1pxでもいいのですが、だいぶ細くなります）

配置したものが次のようになります。

上記の灰色の部分を白くすれば吹き出しの輪郭だけ表示されるようになりますね。

<style>
 .hukidashi{
  padding:15px;
  border:1px solid #000;
  border-radius:10px;
  display:inline-block;
  width:100%;
  text-align:center;
  margin-top:30px;
  margin-bottom:30px;
position:relative;
 }
 .hukidashi:before{
     position: absolute;
    content: "";
    display: inline-block;
    border-style: solid;
    bottom: -21px;
    left: 50%;
    border-left-color: #fff;
    border-right-color: #fff;
　　 border-top-color:#000;
    border-right-width: 20px;
    border-left-width: 20px;
    border-top-width: 20px;
    border-bottom-width: 0;
 }
 .hukidashi:after{
     position: absolute;
    content: "";
    display: inline-block;
    border-style: solid;
    bottom: -19px;
    left: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color:#eee;
    border-right-width: 20px;
    border-left-width: 20px;
    border-top-width: 20px;
    border-bottom-width: 0;
 }
</style>
<div class="hukidashi">cssで吹き出しをデザインしよう</div>

吹き出しのサンプル実装例

上記のように下付きの吹き出しを作ることができましたね。

まとめ

今回はcssで下付きの吹き出しの作り方をご紹介させていただきました。
beforeとafterで三角形を使ってずらすことで輪郭を実現するといった方法になります。ちょっとした発想力でこんなことができちゃいますね。

横付きや上付きの吹き出しも考え方は同じです。borderの輪郭でつくる吹き出しの考え方はこのようになります。ぜひご自身で試されてみてはいかがでしょうか。