アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2009年12月第1週号 1位は,RGBAカラーの使い方,気になるネタは,思いどおりの日本語入力 - Google 日本語入力

週刊Webテク通信

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

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

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス