CSSだけで作れる吹き出しボックス

画像を一切使わずにCSSだけで吹き出しボックスを実現できるという技を発見したのでメモ。

これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌

これは便利そうなので今度試してみよう。

画像を使って吹き出しとかそういう中の文字と連動したデザインを実現しようとすると、どうしても見ている環境によっては文字と画像の位置がずれたり、はみ出したりする。それを防ぐにはCSSで文字の大きさをピクセル単位で強制的に指定するというという手もあるのかもしれないが、私のポリシーとして、「文字の大きさは見る側で自由に変えられる」様なページを心がけているのでそれはできない。文字の大きさはCSSのfont-size何パーセントとか、fontタグのプラスマイナスの様な相対指定以外はめったに使わないことにしている。

ちなみに、上記は日本語でかかれたブログ記事を紹介したが、そのネタ元となっているのがFun With CSS Shapes - Nettuts というページ。英語のページだが、いろいろとCSSを使ったテクニックが紹介されているようなので、こんどじっくり覗いてみよう。