菊池崇の実践！CSS3道場 ― 第5回

CSS3を駆使してTwitter風のふきだしを作る

2011年03月24日 10時01分更新

菊池崇

ツイートする

　「スピーチ・バブル」（ふきだし）は、Webページでコメントを表示するときに効果的なデザインテクニックだ。たとえば、Twitterのトップページのデザインでもふきだしが採用されている。


Twitterで使われている「ふきだし」のデザイン

　ふきだしのデザインは従来、Photoshopなどで三角形や角丸の画像を作成し、CSSで位置を調整するといった手間がかかり、作成が非常に面倒だった。だが、 CSS3なら画像を一切用意することなく、スタイルシートの記述だけで作れる。また、文書構造上不必要なdiv要素などを記述する必要もなく、シンプルに記述できるのもポイントだ。

　今回のCSS3道場では、CSS3を使った「ふきだし」のデザインテクニックを紹介しよう。

基本的なふきだしをデザインする

　もっとも基本的なふきだしを作ってみよう。実装のポイントは、三角形で表現される「しっぽ」の部分だ。この三角形は、前回の「ドッグイヤーデザイン」と同じ手法を使う。


サンプル1の完成図

■HTMLソース（サンプル1〜4共通）

<blockquote class="speech-bubble"><p>この吹き出しは画像を使わずにCSSだけでデザインしています。</p></blockquote>

　最初に、ふきだしのボックス部分（.speech-bubble p）に対するスタイルを設定する。今回は、ボックスの横幅をウィンドウサイズの80%に指定する。

padding : 15px;
margin : 20px auto 0;
width : 80%;

　次に、ボックスにborder-radiusプロパティを使って角丸処理を適用する。border-radiusの使い方は連載第1回で解説しているので参考にしてほしい。-webkit-、-moz-はそれぞれWebKit、Firefoxのベンダープリフィックスだ。

-webkit-border-radius : 10px;
-moz-border-radius : 10px;
border-radius : 10px;

　続いて、ボックスにグラデーションを適用する。CSS3では、backgroundプロパティとgradientでグラデーションを適用できるが、今回は「Ultimate CSS Gradient Generator」というツールを利用した。


Ultimate CSS Gradient Generator

　 Ultimate CSS Gradient Generatorは、ブラウザー上でCSS3のグラデーションを簡単に作成できるオンラインジェネレーターだ。PhotoshopのようなUIで、開始色や終了色をカラーピッカーで選択すると、自動的にCSSのコードを生成してくれる。生成されたCSSコードはコピー＆ペーストでそのまま使えるので非常に手軽だ。