gihyo.jpサイトのロゴ

週刊Webテク通信

2011年5月第2週号1位は、特定のレンダリングエンジンでしか使えない実験的なCSSプロパティいろいろ、気になるネタは、グーグル、Chrome Web Storeの日本語サイト開設

2011-05-19

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

1. The Future Of CSS: Experimental CSS Properties - Smashing Magazinehttp://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/

特定のレンダリングエンジンでしか使えない、実験的なCSSプロパティを紹介した記事です。

WebKit（Safari、Chrome、iPhone、iPad、Android⁠）⁠、Gecko（Firefox）それぞれのレンダリングエンジン特有の実験的なプロパティが解説されています。また、CSS2.1／CSS3のあまり知られていないプロパティの紹介もあります。

Webkit固有のプロパティでできることの例
  • マスク用画像を用意して、画像にマスクをかける
  • フチ文字を作る
  • 反射させたような効果を作る
Gecko固有のプロパティでできることの例
  • リサイズ時の画像のレンダリング方式を変える
  • ボーダーに複数の色を設定する

HTML5+CSSベースでスマートフォンアプリを作る場合にも、これらのプロパティは役立ちそうです。

図1　実験的なCSSプロパティいろいろ
図1　実験的なCSSプロパティいろいろ

2. jQuery Link Manager Pluginhttp://www.jainaewen.com/files/javascript/jquery/link-manager/

リンクを別ウィンドウで開くなどの設定を管理できるjQueryプラグインです。

拡張子で判断してPDFだけ別ウィンドウで開いたり、他のドメインへのリンクだけ別ウィンドウで開くといったことが、JavaScriptの設定だけで可能になります。

サイト制作をしていると、自社サイト以外のページは別ウィンドウで開きたいという要求が相変わらず多いことかと思います。このjQueryプラグインを使うとそれが簡単に実現できますね。あとから簡単に設定を変えることができるのも魅力的です。

図2　リンクの開き方をコントロールするjQueryプラグイン
図2　リンクの開き方をコントロールするjQueryプラグイン

3. ASCII.jp：jQuery Mobileとは――スマホ時代の到来とWeb制作｜西畑一馬のjQuery Mobileデザイン入門http://ascii.jp/elem/000/000/602/602620/

jQuery Mobile入門の連載記事の第1回です。jQuery Mobileは、Dreamweaver CS5.5のモバイル向け機能にも採用された注目のフレームワークですね。

初回ということで、まずはスマートフォン向けフレームワークとiOSヒューマンインターフェイスについて解説しています。いよいよjQuery Mobileの紹介が始まったところで、次回に続いていました。次回以降が楽しみです。

図3　jQuery Mobileの入門記事
図3　jQuery Mobileの入門記事

4. 空いた時間でお小遣い稼ぎ！フリーランスWeb屋さんにおすすめのサブプロジェクト | Webクリエイターボックスhttp://www.webcreatorbox.com/webinfo/freelancer-sub-projects/

Webデザイナーが受注仕事以外でお金になりそうなことをまとめた記事です。

素材販売、アプリ販売、電子書籍販売など、元手がかからずうまくいけば自動的にお金が入ってきそうなサービスやノウハウ記事を案内しています。

図4　Web業界の人のお小遣い稼ぎに役立つ情報
図4　Web業界の人のお小遣い稼ぎに役立つ情報

5. Fireworksで使える斜線テクスチャ960 | indigonotehttp://indigonote.com/2011/04/28/fireworks-slash-texture/

Fireworks向けの、いろんな横幅の斜線テクスチャファイルを配布しています。商用利用もOKということです。

個別テクスチャパターンファイルと、テクスチャ一覧を兼ねたFieworks PNGを同梱しています。

図5　Fireworksで使える斜線テクスチャ
図5　Fireworksで使える斜線テクスチャ

そのほか、先週の記事の中から、気になるWebサービスに関する記事を3つ紹介します。

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

Layer Styleshttp://www.layerstyles.org/

CSS3の角丸やシャドウ、グラデーションなどを設定できるWebサービスです。

この手のジェネレーターはすでにたくさんありますが、Photoshopのレイヤースタイルを真似たインターフェイスになっているところがポイントです。

グラフィックソフトを使っている感覚で設定ができて分かりやすいですね。ちょっと反応が遅いこともあるようですが、Webアプリでここまでできることに感心します。

左下の「CSS Code」のボタンを押すと、CSSのコードが表示されます。クロスブラウザ対応の記述になっているようです。

図6　グラフィックツールのようなCSS3のジェネレーター
図6　グラフィックツールのようなCSS3のジェネレーター

おすすめ記事

記事・ニュース一覧