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

CSS3を駆使してTwitter風のふきだしを作る (1/3)

　「スピーチ・バブル」（ふきだし）は、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コードはコピー＆ペーストでそのまま使えるので非常に手軽だ。

WebKitにおけるgradientの仕様変更

　WebKitの仕様書が今年1月に更新され、gradientのシンタックスが変更された。新しいシンタックスはFirefoxのシンタックスに近く、Safari 5.1とChrome 10で採用されている。

　当面、WebKit系のブラウザーには2つの記述方法が併存することになり、従来のシンタックスがすぐに使えなくなるわけではないが、将来的な変更も視野にいれておこう。

■WebKitの新しいシンタックス

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()

参考：http://www.webkit.org/blog/1424/css3-gradients/
http://dev.w3.org/csswg/css3-images/#gradients