ui

2013年にWEBを席巻したアイコンフォントまとめ

2013年のWEBデザイントレンドと言えば、レスポンシブ・フラット・アイコンフォントなどがキーワードとして挙げられると思います。
近年スマートフォンやタブレットでWEBサイトを見るユーザが増えたことで、マルチデバイスに対応するレスポンシブデザインはもはや必須と言えるものになりました。さらに、タッチデバイスの普及に伴いシンプルで洗練された UI を追及するApple・マイクロソフト・Google が競うようにフラットデザインを採用、リッチデザインに慣れた PC ユーザーにとっても新鮮な驚きをもって受け入れられました。

今回はフラットとも関連のあるアイコンフォント (Web フォント) を取り上げたいと思います。これまでは気の利いたアイコンを表示するには画像ファイルを使用するのが一般的でしたが、テキストベースで拡大・縮小に強く色の変更も容易なアイコンフォントが用いられることが増えてきました。中には、画像じゃないのか?と疑うような完成度のアイコンフォントも存在します。

アイコンフォントと言えば Font Awesome が広く知られていますが、いまでは多くのクリエイターによってアイコンフォントが公開されています。以下にフリーで使用可能な国内外 12 種類のアイコンフォントをご紹介します。続きを読む »2013年にWEBを席巻したアイコンフォントまとめ

jQuery 画像を事前に読み込むサンプル

Webページ上でロールオーバーやスワップなど何らかのアクションをトリガーとして画像を表示する際に、サイズの大きい画像だと読み込みに時間がかかりスムーズに画像が表示されないケースがあります。

開発者の環境では見え方に問題がなくとも、通信速度や処理負荷などクライアント側の状況によっては意図しない振る舞いになる可能性があるため、少々サイズの大きい画像を扱う場合には事前に画像を読み込んでおくと良いでしょう。

続きを読む »jQuery 画像を事前に読み込むサンプル