一部のAndroid端末では、テキストに対してボールドをかけることができません。Android OSのシステムフォント自体に、日本語のボールドがなくて、CSSでの font-weight:bold の解釈ができないみたいです。 それを再現させる方法として調べてみたら、テキストのドロップシャドウを利用して再現する方法が載っていました。ところが、手元の検証端末で表示確認すると、若干ボケた感じに見えましたので、僕はテキストのアウトラインで表現する方法をとりました。 検証端末は、初代Xperia Android OS 1.6 Galaxy S Android OS 2.3 IS03 Android OS 2.1 iPhone4 iOS5.です。IS03はOSのシステムフォントにモリサワフォントが使用されている為、Android端末でもboldは効きます。iPhoneで画面を撮ったので画質が悪くて申し訳ないんです・・・。 ▼Android Xperia と Galaxy S でboldやstrongタグを表示 やっぱり太字になってませんね。 ▼IS03と iPhone でboldやstrongタグを表示 ちゃんと太字で表現されています。 ▼Android Xperia と Galaxy S でドロップシャドウやテキストアウトラインで表現 Android端末でも太字を表現する事が出来ました。ドロップシャドウだと若干滲んでるように見えるので、ボクはテキストアウトラインのほうがいいなぁーと思いました。 ▼IS03 と iPhoneでも、ドロップシャドウやテキストアウトラインで表現 IS03とiPhoneも問題なく表示する事が出来ました。 >>DEMO:http://creator.cotapon.org/demo/textoutline.html css 1 2 3 4 5 6 7 8 9 10 11 /*テキストのドロップシャドウ 黒色*/ .text_bold_shadow{ -webkit-text-shadow:1px 0 1px black; } /*テキストのアウトライン 黒色*/ .

続きを読む

iPhone4から画面の解像度が高くなり、2倍のサイズで画像を作って、タグやスタイルで1/2のサイズを指定すればキレイになる方法がありますね。例えば、100x100の画像を表示するのに、元サイズは200x200で作って、imgタグでは、height=“100” width=“100”とかにする方法です。 では、CSSのbackground-imageの画像も、2倍のサイズの画像を1/2にすることができるのか。CSS3から増えたbackground-sizeというプロパティを使えば背景画像のリサイズが可能になりました。repeatする小さい画像でも2倍サイズで作り、iPhone4、iPhone4以下でも綺麗に表示することができます。 ところがこのbackground-sizeでサイズ指定した背景画像が、XPERIAで指定することができませんでした。Android OS 1.6というのも原因なのか。Galaxy Android OS 2.2では正しくサイズ指定して表示することが出来ました。 そして端末依存かOS依存の問題かと思いましたが、プロパティの書き方に-webkit-を追加すれば、XPELIAでもサイズ指定できる事がわかりました。多くの参考サイトがbackground-sizeのままでしたが、本当は、-webkit-background-sizeと書いたほうがよさそうですね。もちろんCSS3なのでモダンブラウザしか対応してませんのであしからず。 css 1 2 3 4 5 6 7 8 9 10 11 12 /* 間違ってはないけど、効かないプロパティ */ selector{ background-size: 100px 100px; } /* 正しいプロパティ */ selector{ -webkit-background-size: 100px 100px; -moz-background-size: 100px 100px; -o-background-size: 100px 100px; -ms-background-size: 100px 100px; }

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo