週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 3 分

ネットで見かけた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

今週の気になるWebネタ

iPadが将来コンソールゲーム機となることを予感させるコンセプト動画 - iPhone・iPod touch ラボhttp://ipodtouchlab.com/2010/04/ipad-console.html

iPadをテレビに接続し,iPhoneをコントローラとして大画面でゲームをプレイするデモ動画というのが公開されています。iPhone向けゲームの開発会社が実験的に作ったもののようですが,興味深いですね。

iPhoneをコントローラーにしているというところが面白いと思いました。加速度センサー付きですし,アプリ次第でボタン配置なども自由に変えられるスーパーコントローラーになれそうですね。マリオカートみたいなゲームでは,自分の持っているアイテムをiPhone上で選択できると,とても直感的な操作ができるでしょう。

iPhoneを振ってボールを打つ野球やゴルフのアプリがありますが,振った後すぐさまiPhoneの画面を確認するのは若干無理があります。その点,ゲーム本体はiPadでiPhoneがコントローラーなら思いっきり振り切ることができそうです。となると,iPhoneを飛ばして壊す人が続出するかも。Wiiのコントローラーみたいに,すっぽ抜け防止のストラップが必要そうですね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入