<p class="thumb"><img class="none" src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/05/cssarrowplease.png" alt="CSS ARROW PLEASE" title="cssarrowplease" width="510" height="320" class="aligncenter size-full wp-image-20208" /></p>
<p>WEBサイト上に会話調のコンテンツを作ろうとするとき、吹き出しのデザインを使いたいなんてこともありますよね。</p>
<p>しかし、０から作ろうとするとなかなか面倒なのが現実。テンプレがあればサクッと作れるものなんでしょうけれども。そこで今回は、吹き出し調のデザインを簡単に作ることができるサービスをご紹介します。</p><!--more-->

<div class="arrow_box"><p>こんな感じの吹き出しを作ることができます。</p>
<p>吹き出しの方向も4方向から指定して作成することが可能です。</p>
</div>
<h3 class='header-label'>吹き出し調のボックスを簡単に作れるジェネレータ</h3>
<p>「<a href="http://cssarrowplease.com/" target="_blank">cssarrowplease</a>」は、<strong>フキダシ調ボックスのCSSを生成するオンラインジェネレータ。</strong></p>
<p>フキダシの方向や色などを指定すると、それぞれに合わせたCSSを生成してくれるので、設置したいサイトのCSSに追加し、簡単なHTMLを記述するだけでフキダシのボックスを利用することができます。</p>

<h4 class='tips'>吹き出しのデザインを設定</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/05/cssarrowplease1.png" alt="css generate" title="cssarrowplease1" width="500" height="305" class="aligncenter size-full wp-image-20211" /><br />吹き出しの方向やサイズ、そして吹き出し内と外枠の色、サイズを指定すると右側にCSSが生成されます。</p>

<h4 class='tips'>サイトにCSSとHTMLを追加</h4>
<p>生成されたCSSと、下記CSSを設置したいサイトにあわせて調節し、サイトに記述します。このCSSがあると、角丸（丸角）や影がうまく表示されます。</p>
<pre class="line-numbers"><code class="language-css" data-line="3-4" data-language="CSS">.arrow_box{padding:40px;width:400px;height:100px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,0.3)}</code></pre>
<p>ジェネレータで生成されたCSSにも .arrow_box があるので、詳しい方であれば上記CSSとマージしたほうがよさそうですね。</p>
<p>そしてフキダシを表示させたい部分に下記HTMLコードをコピペして完了です。</p>
<pre class="line-numbers"><code class="language-markup" data-line="3-4" data-language="Markup">&lt;div class="arrow_box"&gt;
&#12371;&#12371;&#12395;&#12486;&#12461;&#12473;&#12488;
&lt;/div&gt;</code></pre>
<p>試してみたい方は<a href="http://cssarrowplease.com/" target="_blank">cssarrowplease</a>へどうぞ。</p>
<p>FAQや「とは？」系コンテンツを会話調で表現したい時などに、手間をかけずにデザインできるので便利ですね。</p>