2010年05月



最近、Google Font APIというものがリリースされたようで、さっそく使ってみました。


通常はサイト作成者が特殊なフォントを使おうと思っても、表示する側(個々のPC)にそのフォントがインストールされていないと表示させることができません。これを克服したのがGoogle Font APIでして、PCにインストールされていない様々なフォントをブラウザ上で表現することができるようになりました。サイト作成者の意図したフォントを自由に表現できるようになったわけですね。

まだまだフォントの数は少ないようで、2010年5月22日現在で18種類のフォントが用意されてるようです。残念ながら2バイト文字には対応してない模様です。いくつか気になったフォントを試してみました。

Tangerine



The Google Font API is great!


Reenie Beanie



The Google Font API is great!


Yanone Kaffeesatz



The Google Font API is great!


Lobster



The Google Font API is great!

実装方法はいたって簡単です。フォントをlinkタグで読み込んで、スタイルシートでそのフォントを指定するだけです。

[html]


[/html]Fire Fox以外のブラウザ(Chrome、Safari、IE)はGoogle Fontが読み込まれるまではブランクが表示されます。Fire Foxではデフォルトのフォントが表示され、Google Fontが読み込まれたらそちらを表示するようです。また、linkタグが一番最初に読み込まれるようにheadタグの一番初めに記述しましょう。scriptタグを先に書くと、javascriptが全て読み込まれてからフォントが読み込まれるため、表示に時間がかかる恐れがあるためです。

今後はぜひ日本語(2バイト文字)にも対応していってほしいですね。

このエントリーをはてなブックマークに追加



iPad発売まであと10日チョイとなりました。みなさんは予約されたでしょうか?自分はWi-Fiの64GB版を嫁にだまってコッソリ予約しようと思ってます。Wi-Fi回りもニュースが多くてNTT東日本からフレッツ光契約者向けに小型ルーターが出るとか、日本通信からSIMロックフリーのダイヤルアップルーターが出るとか目が離せない状況ですね。


そんな中、iPad用の壁紙を紹介しているサイトを発見したので紹介します。1stwebdesigner.com:50 Best Wallpapers For Your New iPadでは50枚の厳選したiPad用壁紙を紹介しています。もとのサイトはipadwallpaper.orgなんですが、ここではもっとたくさんの壁紙を(σ・∀・)σゲッツ!!することができます。iPadを買ったらダウンロードしまくりましょう。



このエントリーをはてなブックマークに追加

jQueryを使って作られたアコーディオンメニューは星のようにあるので今更かよ!っていう感じですが、ここは敢えて自作することでjQuery使いへの一歩を踏み出そうという魂胆です。自分で作れば色々勉強になると思いますよ。基本的にJavaScript(jQuery)、スタイルシート、HTML(IDやクラス)の3点セットでアコーディオンメニューは完成します。

jQueryでアコーディオンを作ってみるを参考にさせていただきました。


まずはJavaScriptの部分。書いてませんが、jQuery1.4.2をインポートしています。仕組みとしてはメニュータイトル(h3要素)がクリックされるとリスト(ul要素)の表示、非表示を切り替えるという仕組みになります。表示、非表示はどうやって判断してるかというと、jQueryフィルタである:hidden:visibleを使って表示されている、もしくは表示されていない要素を取得しis()で判断しています。
[javascript]

[/javascript]スタイルシートはこのような感じ。h3やulでmarginを0に設定してますが、これをしないと各要素が少しだけ離れて配置されてしまうので見た目がかなり崩れてしまいます。
[css]