|
|---|
![]() |
|---|
「スピーチ・バブル」(ふきだし)は、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
ソーシャルリアクション
この連載の記事
- 第6回 CSS3 transformならバッジも5分で作れる!
- 第4回 10分でできる、海外Webデザイン風テクニック
- 第3回 box-shadowを極めて「Mac風UI」を作る!
- 第2回 text-shadowで作る「見出し」デザインのアイデア
- 第1回 もう画像は要らない!CSS3で作る申し込みボタン
- この連載の一覧へ

























