takaiwa.net

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でも吹き出しとして見えるんじゃないでしょうか・・・

2010/08/04

リスト系タグの余白を消す

0 件のコメント


表示の確認は、「動作確認を行ったりするブラウザのバージョン」を参照。

特にリストにする必要が無い個所でも、リスト系タグを使うことがあります。使われている具体例は、twitterのサイドバーにあるプロフィールの項目にも、リストと感じさせる必要が無いも関わらず、リストタグ使われていたりします。使われる理由の一つに、<li>~</li>を1つの項目として、liタグに付随するCSSで行間隔を開けたりできると思います。

要は右図のようなことをやりたいわけですが、広いスペースにリスト系タグを埋め込んでるだけだと、このリストタグがもたらす余白などは特に気にはならないかもしれませんが、画像に回り込ませるような使い方をしたり、CSSへはリストタグに対してlist-style:none;だけ記述しておいて、以下のようなHTMLを記述した場合、余白が目立ちます。

[html]<div id="content">
<div id="mariimg">
<img src="./hanagoshokaki.jpg">
</div>

<ul>
<li>
<strong>名称:</strong>花御所柿
</li>
<li>
<strong>説明:</strong>
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
</li>
</ul>
</div>[/html]


これを分かりやすく枠線などを付けて表示させると、赤丸で囲ったような、必要の無い余白ができてしまいます。これを改善するには、スタイルシートで余白を明示的に0に設定してやる必要があります。












[css]
#content {
width:300px;
border: solid 1px black;
}
* ul{
list-style:none;
margin-top:0px;
margin-left:0px;
padding-left:0px;
margin-bottom:0px;
}

* li{
list-style:none;
padding-bottom:5px;
}

#mariimg {
padding-right:5px;
float:left;
}
[/css]

動作確認を行ったりするブラウザのバージョン

1 件のコメント
必ずしも全てのブラウザで全ての動作や表示を確認できているわけではありませんが以下のものを主に使います。

【参考】最近のブラウザシェアのランキング
IEのブラウザシェア増加に転向、IE6も増加 | エンタープライズ | マイコミジャーナル

■Windows XP SP3

  • Firefox 3.6.8

  • 現時点でシェアは第二位ですが、一番無難なブラウザだと思ってるので、ここに合わせて他のブラウザを対応したりしています。
  • Opera 10.60

  • メインで使ってるので・・
  • Google Chrom 5.0.375.125

  • Safari 5.0.1

  • IE 8.0.6

  • 何がよくて多くの人が使ってるのか理解に苦しむブラウザ。上記ブラウザの中で独り違う表示をするし、現時点でtwitterやwordpressの管理画面などでこの差異を埋めるべくIE向けの表示対応とかやってないので、それに便乗しますが、意図していな表示になるのは不本意。IE8は激しく推奨しません。現状、表示がおかしくても対応の優先度は最下位にしてます。IE9で解決されると思うので・・


■Xperia

  • プリインストールブラウザ 4

  • Opera Mini 2