このページの本文へ

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

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

菊池 崇

  • この記事をはてなブックマークに追加
本文印刷
css3

 「スピーチ・バブル」(ふきだし)は、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

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く