週刊Webテク通信

2010年4月第4週号1位は、CSS3によるグラデーションボタン、気になるネタは、iPadが将来コンソールゲーム機となることを予感させるコンセプト動画

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

1. CSS3 Gradient Buttonshttp://www.webdesignerwall.com/tutorials/css3-gradient-buttons/

CSS3によるグラデーションボタンのフレームワークを紹介しています。

CSS3のテクニック紹介としても参考になるのですが、このソースをそのまま使ってボタン作りに利用することもできます。

角丸の半径2種類、大きさ3種類、色9種類をそれぞれ組み合わせて設定可能です。もちろんCSSファイルをいじってカスタマイズしてもいいでしょう。

設定の仕方は、a要素などのclassに⁠button blue⁠や"button orange small"のように指定するだけと簡単です。

このボタンの特徴は以下のように紹介されていました。

  • 画像やJavaScriptを使っていない
  • グラデーションはSafari、Chrome、Firefox 3.6、そしてIEにも対応している
  • 文字サイズの変更に合わせて、ボタンの大きさや角丸の半径などが可変する
  • hover、activeの際にボタンが変化する
  • a要素だけでなく、どんなHTMLの要素にも適用できる
  • CSS3に対応していないブラウザでも、ただの四角いボタンとして動作する

CSS3によるボタンのデザインに興味のある方は12 Excellent CSS3 Button and Menu Techniques | Tutorialsというリンク集も役に立つと思います。

図1 CSS3によるグラデーションボタン
図1 CSS3によるグラデーションボタン

2. Different Stylesheets for Differently Sized Browser Windows | CSS-Trickshttp://css-tricks.com/resolution-specific-stylesheets/

ブラウザのウィンドウサイズに合わせて、複数のCSSファイルを切り替えるテクニックを紹介しています。

CSSを読み込ませる際のmedia属性に「min-width」「max-width」を使って、ウィンドウサイズの違いで別のCSSを指定することができるんですね。

「device-width」を使うと、ブラウザのウィンドウサイズではなく、そのマシンの画面サイズによって読み込ませるCSSを変更できるとのことです。

この設定はInternet Explorerには対応していないため、jQueryを使ってJavaScriptで同様のことを実現する方法も紹介されています。

図2 ブラウザのサイズに合わせてCSSファイルを切り替えるテクニック
図2 ブラウザのサイズに合わせてCSSファイルを切り替えるテクニック

3. 30 Pure CSS Alternatives to Javascript - Speckyboy Design Magazinehttp://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/

JavaScriptを使わずにCSSだけでこれだけできるぞというテクニックを集めたリンク集です。やはりCSS3を使ったものが多いですね。

Improve Your CSS Skills With Pure CSS UI Components | W3AvenueというCSSだけで実現するUIコンポーネントのリンク集も併せてご覧ください。

図3 JavaScriptっぽい動きをCSSだけで実現したテクニック集
図3 JavaScriptっぽい動きをCSSだけで実現したテクニック集

4. 40 Amazing Resources for Design Freebies | Design Shackhttp://designshack.co.uk/articles/inspiration/40-amazing-resources-for-design-freebies

フォント、テクスチャー、テンプレートなど、デザインに役立つフリー素材を配布しているサイトを大量に紹介しています。

31 Free Clean Icon Sets For Minimal Web Design | Graphic and Web Design Blogという、シンプルなアイコンセットを多数紹介しているリンク集もありました。

図4 デザインのための便利な素材いろいろ
図4 デザインのための便利な素材いろいろ

5. 49 Fantastic Iphone Inspired for your Inspiration | TutToasterhttp://www.tuttoaster.com/49-fantastic-iphone-inspired-for-your-inspiration/

iPhoneアプリ紹介サイトのデザインショーケースです。

iPhoneアプリのサイトには洗練されたサイトが多い気がしますね。やはりiPhoneアプリ自体、デザインが重要ということも影響しているのでしょう。

図5 デザインの優れたiPhone関連のサイト集
図5 デザインの優れたiPhone関連のサイト集

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

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

Twitgether - Social Twitter Client - Gmail Gadget, Facebook App...http://twittergadget.appspot.com/

Twitgetherは、GmailやiGoogle、Facebook、MySpaceなどの上で使えるTwitterクライアントです。

たとえばGmailにTwitgetherのガジェットを追加すると、Gmailの画面上にTwitgetherのウィンドウを開くことができます。

そのウィンドウ上で、タイムラインを読んだり、ツイートやリツイートなどを行ったりと、ほとんどの作業ができてしまいます。

GmailへTwitgetherを追加する方法はサイトにも説明されていますが、普段使っているGmailを簡単にフル機能のtwitterクライアントにしてしまう方法という記事に日本語で紹介されていました。

まずはこのクライアントの使い勝手を試してみたいという場合には、Twitgetherのサイト上ですぐに利用することもできますよ。

図6 Gmailなどで使えるTwitterクライアントTwitgether
図6 Gmailなどで使えるTwitterクライアントTwitgether

おすすめ記事

記事・ニュース一覧