画像を使わずにボタンを表示:iPhone専用サイト編

iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 - くらげだらけ(くだくらげのBLOG)で、Web Symbols typefaceというテクニックが紹介されていた。
WebFontという技術を使って、文字の代わりにボタン画像なんかを埋め込んだフォントを使えば、画像ファイルを持たなくてもよく使うアイコンを表示できるよ!というアイデア。
みんながこのフォントを使うようになって、jQueryみたいに高速なサーバからこのフォントが落とせるようになれば面白い技術だと思う。

でも、iOSに限定していいんだったら、[titanium]画像を使わずにボタンを表示の手法を使ってWebFontなしにボタン画像を表示することも出来る気がしたので、やってみた。

machine_dependent_charactors.PNG
machine dependent charactors on iOS5 - mogya

理屈は前回と同じ。Apple SymbolsやLucida Grandeといったフォントは、上記のようなデザインの文字を元々持っている。これらは、同じフォントを持っていないと表示できないからWEBの世界では使わないことになっているけれど、iPhone専用サイトと割り切るのであれば、CSSでフォント指定して上げれば表示することが出来る。
どんな記号が使えるかは、下記を参考に。

長所としては、WebFontを使うより当然高速軽量に表示が出来る。短所としては、iOSの持っているフォントに依存してしまうので、昔のIE専用WEBページと同様、他の機種で見た時の表示が保証されない。
実際問題としては、サンプルをひらいてみると分かるようにWindowsでもけっこう表示できちゃうんだけど、WEBの精神から行くとあんまり望ましくないことなのは事実。「iPhone」といったらiPadもAndroidも含めた全てのスマートフォンで動くものを想像されるお客さまも日本にはいらっしゃるので、利用する時は慎重に利用することをお勧めします。

カテゴリ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: 画像を使わずにボタンを表示:iPhone専用サイト編

このブログ記事に対するトラックバックURL: http://mogya.com/mt/mt-tb.cgi/1312

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、 もぎゃが 2011年10月25日 14:54に書いたブログ記事です。

ひとつ前のブログ記事は「 [PHPMatsuri]Titanium大賞をいただきました 」です。

次のブログ記事は「 GoogleMapsAPI有料化に関して調べてみた 」です。

最近のコンテンツは インデックスページ で見られます。過去に書かれたものは アーカイブのページ で見られます。

Powered by
Movable Type