Sassは「さーす」と読むそうです。これもHamlと同じように、Ruby on Railsに親和性の高い、StyleSheet用のFrameWorkです。これもただ今勉強中。。。
今回のcss2sassは、前回のHtml2Hamlと同じように、CSSからSassへ変換、その逆のSassからCSSに変換できるウェブツールです。これも何かと便利そうなのでメモしておきます。
一部の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も問題なく表示する事が出来ました。
＞＞ＤＥＭＯ：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から画面の解像度が高くなり、２倍のサイズで画像を作って、タグやスタイルで1/2のサイズを指定すればキレイになる方法がありますね。例えば、100x100の画像を表示するのに、元サイズは200x200で作って、imgタグでは、height=“100” width=“100”とかにする方法です。
では、CSSのbackground-imageの画像も、２倍のサイズの画像を1/2にすることができるのか。CSS3から増えたbackground-sizeというプロパティを使えば背景画像のリサイズが可能になりました。repeatする小さい画像でも２倍サイズで作り、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; }
[DEMO] CSSのみで袋文字を実現する - CSS3で遊んでみる3 | CSS-EBLOG
http://css-eblog.com/eblog_sample/1001/text-stroke/
CSS3のtext-shadowとfilter:dropshadowで、わりと強引かもしれませんがテキストの縁を表現できるジェネレータを紹介します。
細かく設定はできませんが、縁の太さを入力してから「適用」ボタンを押すと、CSSのプロパティが生成されます。赤色から変更する場合は、「red」と書かれている場所を「#000000」などに変更すれば色を変えることができます。
IE6でもなんとか表現できてはいますが、影の位置が若干ずれていたりしてしまってますね。
SafariやGoogleChromeはWebKitが使われてますので、テキストの縁用にCSSが用意されています。
[css] /*ふちの太さ*/ -webkit-text-stroke-width:3px; -webkit-text-stroke-color:#FF0000; -webkit-text-fill-color:#FFFFFF; [/css] この設定はスマートフォン用のページだと有効的に使えますが、PC用のページでは、他のブラウザが対応していないため使えないですね。このジェネレータで見る限りでは、問題なくキレイに表現されているように見えます。
Firefoxではうまく動きませんでしたが、実際に表示してみたところ問題なく表示されました。
画像をなるべく使わない。ページ速度もSEOの評価対象といわれていますので、表現の幅をきかせるのであれば、こういったテキストを使うといいとおもいます。
※検証に使ったブラウザは全て最新のバージョンです。
CSS3は古いブラウザで表示が崩れたりするので、すべてCSS3でコーディングされたWebサイトはなかなかありませんが、iPhoneのSafariやAndroidのChromeではWebKitが採用されているので、スマートフォン用のWebサイトにはCSS3の表現が使われています。今まで画像を使って表現するしかなかったグラデーションやテキストのドロップシャドウなど、画像を使わないことによってページ全体の容量を軽減することができますので、スマートフォン用のWebサイトではどんどんCSS3を活用していったほうがいいですね。
グラデーションやドロップシャドウをCSS3で書くのはちょっとだけ文字数が多く、ちょっと微調整にめんどくさいところがあります。今回は微調整しながら表示確認ができ、CSS3のソースを生成してくれるジェネレータの紹介です。
CSS3プロパティジェネレーター | CSS-EBLOG
http://css-eblog.com/eblog_sample/0912/css3-generator/
設定が終わったらページ右上の「ソースを生成」ボタンを押すとライトボックス風にソースが出てきます。-webkit -moz -ms と書かれているところはそれぞれのブラウザのレンダリングエンジンに対しての命令なので、スマートフォン用など限定して使う場合はとっちゃっていいとおもいます。
-webkit はSafari、GoogleChomeに使われているWebKitを指してます。 -moz はMozilla系のGeckoエンジン、Firefoxなどを指してます。 -ms はCSS3が使えるIE9のTridentエンジンを指してます。
css 1
body { -webkit-text-size-adjust: none; } 縦向き横向きにしたらクルクルかわるiPhoneのSafariブラウザ。上記のWebkitスタイルをbodyに適応すれば、iPhoneの向きが変わったときにフォントサイズの大きさが変わるのを防ぐことができます。
