| Tips 5 | 引用をかわいく演出したい | CSS |
| ＞＞ | point CSSだけで実現できる | ||
| ＞＞ | point 吹き出しの向きなども変更可能 |
文章の中で、引用部分はそれが引用であることをわかるようにする必要がある。いろいろな方法があるが、非常に簡単な方法で【1】のようなかわいらしい吹き出しの演出をする方法が「Nettuts+」の「Fun With CSS Shapes」（net.tutsplus.com/videos/screencasts/fun-with-css-shapes/）で紹介されている。これを基にもう少し使い勝手のよいCSSに変更しながら使ってみよう。
【1】完成イメージ。吹き出しのような見た目になる
まずはHTMLを準備しよう【2】。最後に空のdiv要素を配置するのがポイントだ。続いて、CSSを記述する【3】。これで完成だ。画像などをまったく必要とすることなく、吹き出し部分がCSSだけでつくられている。
【2】HTML。blockquote要素とdiv要素を配置する
【3】CSSのソース
仕組みとしては、borderプロパティで非常に太い枠線を引くことで、吹き出しのように見せている。【4】のように枠線同士の境界線は、斜めに接するようになっているため、これをうまく調整することで、吹き出しのように見せているというわけだ。
【4】50ピクセルずつの枠線を違う色で表示したところ。斜めに接している
class名を変えれば、【5】や【6】のように吹き出しの位置を変えることもできる。CSSのみを使用しているため、色を変えるなども容易でさまざまな場面で使えるだろう。
【5】「arrowRight」というクラスを使ったところ
【6】「arrowUp」というクラスを使ったところ
[INDEX]
>>> Tips1 ケータイのアクセスを振り分けしたい
>>> Tips2 ログインフォームをおしゃれに登場させたい
>>> Tips3 本格的なiPhoneサイトを簡単につくりたい
>>> Tips4 フォームを簡単に整列させたい
>>> Tips5 引用をかわいく演出したい
>>> Tips6 テキストエリアを小さくしておきたい
>>> Tips7 Internet Explorer 6用のCSSを簡単につくりたい
