Android、Java、Web系、Linux、マラソン等の備忘録

2010/08/05

CSSだけで吹き出しを作ってみた

2 件のコメント
twitterのアイコンがつぶやいてるかのように、アイコンと吹き出しを使って表現したいと思います。
吹き出しの実現方法について様々なブラウザで表示を考えた場合のメリット、デメリットについて僕なりにまとめてみました。






















吹き出しの実現方法
メリット
デメリット
吹き出し画像を利用し、その上に文字を表示させる ・あらゆるブラウザでほぼ同一の表示ができる(表示の確認やHTMLやCSSの修正が楽)
・フリー素材などを使えば、凝ったデザインのものや吹き出しの変更が容易

・固定サイズの吹き出しに対して、どう文字数を調整するか?もしくは、画像を調整するか?(フレキシブルさがない
・吹き出し画像の大きさによってはDLサイズが問題になる場合も
・画像を自ら作成・修正する場合は大変な場合も


JavaScriptで描画する ・JS対応ブラウザであればほぼ同一の表示が可能
・吹き出し内の文字数を気にしなくて良い
・ライブラリ化されているものを使うと実装が楽
・デザインをカスタマイズする場合に、JSが関与している場合もあり、修正が面倒な場合も
こんなところにJSを組み込みたくない
・JSに対応していないブラウザならアウト
CSSのみで描画する 吹き出し内の文字数を気にしなくて良い
JSタイプに比べてカスタマイズが楽
軽量
・してやったり感がある
・多くのブラウザでデザインやレイアウトは大体同じだが、ブラウザの解釈によって表示が異なる。特にIE8やCSS3未対応とか(JS未対応に比べれば、ある程度は表示される?)
・ブラウザでの確認が大変。



どうしてIE8みたいなのが使われるのか、理解に苦しみますが、シェアNo1というゆるぎない事実がある以上、ある程度はこのブラウザにも考慮が必要ですね。
IEのブラウザシェア増加に転向、IE6も増加 | エンタープライズ | マイコミジャーナル

とは言え、IE9ことを見越し、「軽量」「吹き出し内の文字数を気にしなくて良い」「JSタイプに比べてカスタマイズが楽」などの理由から、今回はCSSだけで実現してみたいと思います。

まずは、divタグで吹き出しとなるメッセージを囲み、2ピクセルのsolidボーダーで淵を付けてやります。font-sizeとタグ内余白、横幅を適当な値で設定してやります。四角形のままだと味気ないので、角を落としてやります。スタイルシートは以下のようになります。
[css]#balloon {
border:solid 2px #89CB11;
background-color:#FFFFCC;
/* 吹き出しの丸渕 */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

font-size:12px;
padding:5px;
width:325px;
}[/css]
~radiusを3つ設けてるのは、いろいろなブラウザへ対応するためですが、IEのバージョン8現在CSSのみでの対応できないようで、IEでどうしても角を落としたい場合は、JavaScriptに頼るようです。しかし、僕の周りの代表的なWebアプリケーションである、twitterやwordpressなど、角を落としている部分が散見されますが、いずれもIEで表示すると角付きになるので、この部分をわざわざIEユーザのために対応してはいないようです。なので、そのままIEは無視して話を進めていきます。

右上図にあるように、角を落としたdivタグのボックスの下に、実写アイコンを置いてやるだけで何かメッセージを発しているように見えますね。まぁ・・叫んでるようなアイコンを使ってるので、よりそう見えるのかもしれませんが・・。

これだけだと、吹き出しと呼ぶには、もう少し演出が必要です。できることなら、divボックスからアイコンへ向けて、右図のような同色の逆三角形が付いていると、吹き出しっぽく見えますね。これを実現するため、この部分だけ、三角画像を使う例もありますが、ここでは全てCSSで実装してしまうということで、少しトリッキーなことをします。

直接三角形は描画せずに、CSSのborderで三角形を表現します。borderというくらいなので、直線を3つ繋げて三角形ではなく、1つのdivタグから3角形をねん出します。

どのようにするかと言いますと、以下のようにdivタグのborderのtop、right、bottom、leftを別々の色で太さを20pxというよに、分かりやすくしてみました。すると、
あああああ


このボックスの色分けされた部分、台形が隠れてますよね?台形って幅を縮めると三角形になりますよね?その特性を利用します。初めて思いついた人、凄いなと思います。

より吹き出し用の三角形に見えるよう、スタイルシートを整えたのが、以下です。
[css]#balloonAngle {
border-top: solid 20px #89CB11;
border-bottom: 0;
border-left: solid 0px transparent;
border-right: solid 20px transparent;
position: relative;
width:0px;
left:50px;
}[/css]
これで、上右図のような逆三角形になりますが、色は黄緑の単色です。吹き出しなので、メッセージ背景のベージュ色で白抜きしてやるとより吹き出しっぽくなります。それは、どうするか?

新しいdivタグを挿入し、同じ感じのCSSでサイズを少し落としてベージュで塗りつぶし、上から重ね合わせてやればOKです。具体的には、
[css]#balloonAngleInner {
border-top: solid 18px #FFFFCC;
border-bottom: 0;
border-left: solid 0px transparent;
border-right: solid 18px transparent;
width:0px;
position: relative;
left:52px;
top:-22px;
}[/css]
両三角形はpositionをrelativeにしており普通は交わることが無いですが、px値を負数にすることで無理やりねじ込んでます。

で、一連のCSSとHTMLを組み合わせるとこのようになります。
[css]<style>
/* 吹き出し用 */
#balloon {
border:solid 2px #89CB11;
background-color:#FFFFCC;
/* 吹き出しの丸渕 */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

font-size:12px;
padding:5px;
width:325px;
}
#balloonAngle {
border-top: solid 20px #89CB11;
border-bottom: 0;
border-left: solid 0px transparent;
border-right: solid 20px transparent;
position: relative;
width:0px;
left:50px;
z-index:2;
}
#balloonAngleInner {
border-top: solid 18px #FFFFCC;
border-bottom: 0;
border-left: solid 0px transparent;
border-right: solid 18px transparent;
width:0px;
position: relative;
left:52px;
top:-22px;
z-index:3;
}
/* アイコン用 */
#twprofileimg {
z-index:1;
position: relative;
top:-35px;
float:left;
}
</style>

<div id="balloon">
花御所柿とは、甘柿の中では日本一の糖度を誇り、鳥取県でも八頭地方と限られた地域でしか栽培されていない幻の柿です。
</div>
<div id="balloonAngle"></div>
<div id="balloonAngleInner"></div>

<div id="twprofileimg">
<img src="./hanagosho.jpg">
</div>[/css]

これを、Firefoxなどで表示させると、



これを、IE8で表示させると、



まぁ、IEでも吹き出しとして見えるんじゃないでしょうか・・・

2 件のコメント :

  1. すばらしい情報をありがとうございます。

    角が取れただけでも、大げさかもですが感激してしまいました。

    三角の部分までも CSS だけで作られるとは思いもしなかったので、まだ三角の部分を私はできていませんが参考にさせていただきます。

    返信削除
  2. >maya minatsukiさん

    コメントくださってたのに、お返事遅くなりましたm(_ _)m
    喜んでいただき、ありがたいです。掲載したかいがありました(^^;

    返信削除