週刊Webテク通信

2009年12月第1週号 1位は,RGBAカラーの使い方,気になるネタは,思いどおりの日本語入力 - Google 日本語入力

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

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

1. 24 ways: Working With RGBA Colourhttp://24ways.org/2009/working-with-rgba-colour

RGBAカラーを使うためのチュートリアル記事です。AはAlpha(アルファ)のことで,透明度の情報を加えた色の指定がCSS3からできるようになりました。RGBaといった表記をすることも多いようです。

opacityというプロパティも従来からあるのですが,透明度が子要素にも継承するため使いにくいと言われていました。この記事にあるRGBAを使った例では,見出しのh1に対し「背景色は透明度あり&文字色は透明度なし」といった指定の仕方を紹介しています。これはopacityではできなかったことです。

RGBAカラーに対応していないブラウザへの対処法も説明されています。RGBAでの指定は,非対応のブラウザではRGB部分の指定も含め完全に無視されるようです。そこで,非対応ブラウザ用の指定とRGBAでの指定とを,2行に分けて指定するとよいとのことです。

透明度を使った簡単なロールオーバー効果の作り方も紹介されています。

図1 RGBAカラーの使い方の紹介

図1 RGBAカラーの使い方の紹介

2. Pushing Your Buttons With Practical CSS3 - Smashing Magazinehttp://www.smashingmagazine.com/2009/12/02/pushing-your-buttons-with-practical-css3/

ドロップシャドウやRGBAカラー,角丸といったCSS3の機能をうまく利用したボタンの作り方です。

ブラウザを選びますが,ちょっとしたアニメーションやグラデーションもCSSで操作すれば,簡単にシャレたボタンが作れますね。

ボタンは過度に装飾しないほうがいいですし,サイト内での統一性が必要なので,ボタンのデザインはCSS3でやればいいかと思いますよね。画像としてボタンを作ると,文字の直しがあった場合に面倒ですし。

図2 CSS3を使ったボタンの作り方

図2 CSS3を使ったボタンの作り方

3. Fixed elements in web design with examples ≪ CreativityDenhttp://blog.creativityden.com/fixed-elements-in-web-design-with-examples/

CSSでの固定配置(fixed)の使い方と,固定配置をうまく使ったサイトのショーケースです。

実例として挙げられている,透明度を効果的に使ってスクロールによる変化を楽しめるサイトが印象に残りました。

固定配置はIE6以前では問題があるのですが,IE6 position:fixed の諸問題を解決する jQuery.exFixed.jsという日本人の方が作っているjQueryプラグインもあるようです。

図3 固定配置の使い方と実例紹介

図3 固定配置の使い方と実例紹介

4. Minimalist Web Design: When Less is More | Webdesigner Depothttp://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/

最小限の機能や装飾に絞ったミニマルなWebデザインのススメと,ショーケースやトレンドの紹介です。

紹介されているサイトを見ると,インタラクションに関してはAjaxなどを使った十分リッチなものも多いですね。

図4 ミニマリストWebデザインについて

図4 ミニマリストWebデザインについて

5. 10 front-end techniques to improve your site usabilityhttp://www.catswhocode.com/blog/10-front-end-techniques-to-improve-your-site-usability

サイトのユーザビリティを向上させるためのフレームワークやテクニックを10個紹介しています。

日時表示を「○分前」といったTwitter風のものに変えたり,外部リンクにはアイコンを付けたりといった,小技が中心です。

図5 ユーザビリティを向上させるテクニックの紹介

図5 ユーザビリティを向上させるテクニックの紹介

そのほか先週の記事から,フォーム関連のネタを紹介します。

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

ニッポンのお茶の間「ピーチク」http://ptic.jp/

「ピーチク」は,テレビ番組・ラジオ番組に関するツイート(つぶやき)を投稿/閲覧できる,Twitterと連携したサービスです。テレビ,ラジオの局別にタイムラインが分かれています。

投稿は「ピーチク」上でTwitterのIDを使いログインして行います。投稿したツイートはもちろんTwitter側にも反映され,独自のハッシュタグと局別のタイムラインへのリンクが追加されるようです。

これを見て,テレビの実況掲示板をリアルタイムで閲覧できるBalloo.jpとBalloo! for iPhone/iPod touchINFOCITY Labs(研究開発プロジェクト|bb2c/balloo!/balloo! Mobile/balloo! for iPhone/iPod/開発者ブログ)を連想しました。

「ピーチク」はTwitterを使っていることから,まったりとして荒れた発言の少ない場になりそうなので,実況掲示板系とは差別化できそうです。

運営会社には,小山薫堂の会社「オレンジ・アンド・パートナーズ」が名を連ねています。売れっ子放送作家で,⁠おくりびと」の脚本家としても知られる小山薫堂が関わっているということで,今後の展開に注目したいですね。

図6 Twitterを利用したテレビ番組へのつぶやき共有サービス

図6 Twitterを利用したテレビ番組へのつぶやき共有サービス

今週の気になるWebネタ

Google Japan Blog: 思いどおりの日本語入力 - Google 日本語入力http://googlejapan.blogspot.com/2009/12/google_03.html

Googleから日本語入力のインプットメソッド(IME)が登場し,ネットで大きな話題になっています。

Macユーザーとしては,最近リリースされたかわせみに続きGoogle 日本語入力も登場ということで,選択肢が増えましたね。

ネットから自動収集したという新語,専門用語,芸能人の名前に強いところが特徴ですが,ネット用語が候補に出過ぎで子供には勧められないとも思ってしまいます。

こんな候補が出たというネタでしばらく盛り上がりそうですが,わたしが見つけた中で面白かったのは,⁠こうけん」と打つと,⁠貢献」の下に「コウケンテツさん」と出たことです。

芸能人の名前やネット用語をバンバン候補として表示する強力なサジェスト機能を,既存のIMEの辞書的に使えるといいなと思ったら,ATOKダイレクト for Googleサジェストというのを見つけました。ATOKの機能拡張の仕組みを使ったプラグインのようです。ATOK派にはこれも便利そうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入