CSSでLINEみたいな吹き出しを作るには
最近、ブログでもよく見かける「吹き出し」ですが、HTML/CSSでどのように作るか紹介したいと思います。せっかくですので、LINE風の吹き出しを作ってみます。
[ad#top-1]
まずは尻尾の部分を作る
吹き出しを作るうえで最も悩ましいのが尻尾の部分です。僕も最初にどのように作るのか不思議に思っていましたが、意外や意外、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; }
いい感じに吹き出しになりました。
実際のLINEの吹き出しの尻尾は若干曲線を描いていますが、まあこんなところで十分でしょう。
[ad#ad-1]
スポンサーリンク