サイト制作では、HTMLを使ってウェブページを構造化した後、CSSを使って見栄えやレイアウトを整えていきます。このCSSですがとても便利なもので、なんと図形なども作成できてしまいます。画像ではないので小さくても鮮明で、サイズやカラーもCSSで編集できることが大きなメリットになります。   そこで今回はCSSで吹き出し風のデザインを作ってみたいと思います。 サイトの中でもコメント欄やお客様の声などを紹介する場面で使えそうですね。  

吹き出しデザインの構成要素

パッと見たところ一つの図形に見えますが、HTMLとCSSで作成する上で実は幾つかのパーツが重なって吹き出しの形になっています。まずはそこを整理したいと思います。 はじめに今回作成する吹き出しのデザインはこちらです。     【　ボディ部分　】 吹き出しのメインに当たる部分です。HTMLでは全体を囲む親要素と、内部のコンテンツを構成する子要素に分かれます。   【　ポイント部分　】 吹き出しの特徴的な部分です。CSSを調整することで位置、大きさ、形などをカスタマイズできることが可能です。   上記の2つの部分が合わさることにより吹き出しのデザインができ上がります。 では実際に作成していきましょう。  

吹き出しデザインのHTML

まずHTMLで吹き出しの構成を作ります。注目する点はdivで親要素を設定し、その子要素としてpを使っているところです。class名には親要素に”balloon”、子要素に”balloon_content”と設定しています。

<div class="balloon">
　<p class="balloon_content">CSSで作る吹き出し風デザイン</p>
</div>

   

吹き出しデザインのCSS

続いてCSSでバルーンの形を作っていきます。ここではメイン部分とポイント部分に対してそれぞれCSSを適用しています。メイン部分は親要素と子要素への記述ですが、ポイント部分は、擬似要素である:afterを使って再現しています。

.balloon {
 width: 500px ; /*吹き出しの幅*/
 height: 60px ; /*吹き出しの高さ*/
 background: #660000 ; /*背景色*/
 padding: 0 ;
 position: relative ; /*相対位置指定*/
}
.balloon .balloon_content {
 background: #660000 ; /*背景色*/
 position: relative ; /*相対位置指定*/
 color: #fff ; /*吹き出し内の文字色*/
 padding: 20px ;
}
.balloon .balloon_content:after {
 content: ' ' ; /*空白にしていく*/
 width: 0 ;　/*三角形を作るために幅は0にしておく*/
 height: 0 ;　/*三角形を作るために高さは0にしておく*/
 position: absolute ;
 border:15px solid transparent; /*ポイント部分を透明化*/
 border-top-color: #660000 ; /*ポイント部分にあたる箇所・方向を決定、可視化する*/
 top: 100% ; /*ポイント部分の上端からの距離（＝下端に付く）*/
 left: 50% ; /*ポイント部分の左端からの距離*/
}

   

borderプロパティで三角形を作成する

今回 のテーマのポイントとなる部分ですね、borderで三角形？と思われた方も多いと思います。しかし実際にこれから解説する内容で三角形だけでなく台形や扇型などいろんな図形を作成することが出来るのです。実はborderプロパティですが、ブロック要素へのwidthとheightを0に指定した上で、borderのサイズを指定すると三角形の図形になるのです。 そして、after擬似要素で三角形を配置することで吹き出し風のデザインが出来上がります。  

カスタマイズも簡単、いろんなバリエーションのデザインも

このデザインは全てCSSで作成しているので、各プロパティの値を変更するだけで簡単に編集することができます。   枠線を作る場合は、メイン部分にborderを設定し、before疑似要素とafter疑似要素を重ねる事で表現します。

.blog_ballon {
 width: 600px ;
 height: 40px ;
 background: #fff ;
 padding: 0 ;
 position: relative ;
 margin: 30px 0 ;
 border: solid 3px #999 ;
}
.blog_ballon .blog_ballon_cont {
 position: relative ;
 color: #333 ;
 padding: 10px ;
}
.blog_ballon .blog_ballon_cont:before {
 content: ' ' ;
 width: 0 ;
 height: 0 ;
 position: absolute ;
 border:15px solid transparent;
 border-top-color:#999;
 top: 100% ;
 left: 85% ;
}
.blog_ballon .blog_ballon_cont:after {
 content: ' ' ;
 width: 0 ;
 height: 0 ;
 position: absolute ;
 border:13px solid transparent;
 border-top-color:#fff;
 top: 95% ;
 left: 85.3% ;
}

  角丸やポイント部分もborder-radiusを使用すればこのように再現可能です。

.blog_ballon {
 width: 600px ;
 height: 44px ;
 background: #ccc ;
 padding: 0 ;
 position: relative ;
 margin: 30px 0 ;
 border-radius: 10px ;
}
.blog_ballon .blog_ballon_cont {
 position: relative ;
 color: #333 ;
 padding: 10px ;
}
.blog_ballon .blog_ballon_cont:before {
 content: "";
 position: absolute;
 bottom: -10px; left: 20px;
 margin-left: 0;
 display: block;
 width: 30px;
 height: 30px;
 background-color: #555;
 border-radius: 0 30px 0 30px;
 z-index: -1;
}
.blog_ballon .blog_ballon_cont:after {
 content: "";
 position: absolute;
 bottom: -5px; left: 30px;
 margin-left: 0;
 display: block;
 width: 30px;
 height: 30px;
 background: #fff ;
 border-radius: 0 30px 0 30px;
 z-index: -1;
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
}

  いかがですか、CSSでもこのようなデザインを表現できるので、ぜひ積極的に取り入れていくのも良いのではないでしょうか。