週刊Webテク通信

2011年9月第4週号1位は、仕事に役立つjQueryプラグインの実装方法、気になるネタは、Facebook、タイムラインを発表

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年9月19日~9月25日の間に見つけた記事のベスト5です。

1. クライアントワークでよくお世話になっているjQueryプラグインいろいろhttp://webdesignrecipes.com/jquery-plugins-in-cliant-works/

この記事の作者が仕事でよく使うというjQueryプラグインの実装方法を具体的に解説しています。

スライダー、カルーセルなど、ビジュアルに関するプラグインが中心です。

これだけ丁寧にjQueryプラグインの実装方法や注意点をまとめてある日本語記事は、あまり見たことがありません。プラグインごとにバラバラの記事にしてもいいくらいだと思いました。

今まで全くjQueryやjQueryプラグインを使ったことがないという初心者にも分かるように、親切にまとめられています。

図1 仕事に役立つjQueryプラグインの実装方法
図1 仕事に役立つjQueryプラグインの実装方法

2. CSS3 tools | Lea Verouhttp://leaverou.me/css3-tools/

CSS3の機能を簡単に利用するためのツールを各種紹介しています。

cubic-bezier.comは、CSS3のトランジションやアニメーションのイージングをベジェ曲線で設定できるツールです。ベジェ曲線を直接いじってコントロールし、動きのサンプルを確認することができます。

その他、CSSグラデーションを使った背景パターンや、CSSグラデーションをクロスブラウザ対応に変換するツールなどが紹介されています。

図2 CSS3関連ツールいろいろ
図2 CSS3関連ツールいろいろ

3. How Do Browsers Render the Different CSS Border Style Values?http://www.impressivewebs.com/comparison-css-border-style/

CSSのボーダーの、ブラウザによるレンダリングの違いをレポートしています。わざわざ記事としてまとめているだけのことはあり、ブラウザによってかなり見え方が違っています。

日本語にすると、grooveは谷線、ridgeは山線だそうです。この辺のスタイルはあまり使ったことのない人も多そうですね。

図3 CSSボーダーのブラウザによるレンダリングの違い
図3 CSSボーダーのブラウザによるレンダリングの違い

4. Elegant Examples of Embossed Typography in Web designhttp://www.designerterminal.com/inspiration/web-design/embossed-typography-in-web-design.html

エンボス処理されたタイポグラフィを使ったWebデザインのギャラリーです。エンボスの効果を活かした大きな文字を使ったデザインが目につきます。

図4 エンボスのタイポグラフィを使ったWebデザインのギャラリー
図4 エンボスのタイポグラフィを使ったWebデザインのギャラリー

5. Creative 404 Error Page Designs ― 30 Interesting Examples!! ≪ Graphic Design Blog ― An Ultimate Resource for Graphic Designershttp://www.graphicdesignblog.org/creative-404-error-page-designs/

404エラーページのデザインギャラリーです。想像力と創造力に富んだエラーページが多数紹介されています。

図5 404エラーページのデザインギャラリー
図5 404エラーページのデザインギャラリー

そのほか、先週の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Lanbito: Mobile Form Builderhttp://lanbito.com/

Lanbitoは、問い合わせや投票などのフォームを作成できるWebサービスです。

モバイル端末向けのフォームに特化しているのが特徴で、iPhone、iPadがメインターゲットとなっています。iOSでよく見かけるインターフェイスデザインを使ったフォームを簡単に作ることができます。

フォームから送信されたデータは、Google ドキュメントのスプレッドシートに保存されます。Google ドキュメント上で集計できますし、ファイルを書き出してExcelで開くこともできるので、便利だと思います。

ちょっと試しにフォームを作ってみたのですが、日本語は問題なく表示できました。

完成したフォームの、iPhoneでの表示や操作感はバッチリです。パソコンのブラウザでの表示はシンプルで悪くはないのですが、微妙にレイアウトが崩れている個所もありました。

毎月100エントリーまでは無料で利用できます。ここでのエントリーとは、フォームの回答者数のことです。エントリー数に応じて何段階かで値段が設定されています。

将来的には、自分のサイトにフォームを埋め込むためのコードを生成したり、作成したフォームのHTML/JS/CSSをダウンロードして、自分のサイトに設置できるようになる予定のようです。

図6 モバイル向けフォーム作成サービスLanbito
図6 モバイル向けフォーム作成サービスLanbito
図7 Lanbitoのフォーム作成画面
図7 Lanbitoのフォーム作成画面

おすすめ記事

記事・ニュース一覧