週刊Webテク通信

2011年10月第3週号 1位は,いますぐ使えるCSS3テクニック集,気になるネタは,アップル,Siriの日本語版を2012年に提供開始する予定

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

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

1. いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!- @IThttp://www.atmarkit.co.jp/fwcr/design/tool/ichigeki16/01.html

面白法人カヤックのサイトで使われている,CSS3を使ったテクニックを解説した記事です。

  • マウスオーバーでスライドアウト,スライドイン
  • マウスオーバーでクルッとするボタン
  • 画像なしでタスキをつくる
  • マンガのトーン風の背景
  • CSSアニメーションでつくるダイナミックマウスオーバー
  • マルチデバイス対応をPCでも再現する

といったテクニックを紹介しています。

実際にサイトで使われている具体例が確認できますし,それぞれセンスのいい使われ方をしているので,自分も使ってみたいと思わされます。

特に,画像にマウスオーバーするとマンガ風のエフェクトがかかる効果が必見です。ちょっとしたアニメーションでも,使い方によっては非常に効果的なことが思い知らされました。

図1 CSS3を使ったテクニック集

図1 CSS3を使ったテクニック集

2. cssで縦方向中央に配置する方法(5つのケース+1) | バシャログ。http://c-brains.jp/blog/wsg/11/10/13-200523.php

CSSを使って縦方向中央に文字列や画像を配置する方法を,6つのケースに分けて紹介しています。

テーブルレイアウトでは簡単だった縦方向センター揃えですが,CSSではちょっと面倒です。特定の領域の真ん中に画像を配置する場合や,画像と文字とをセンター揃えする方法など,便利なテクニックがまとめてあって参考になります。

図2 CSSで縦方向中央に配置するテクニックいろいろ

図2 CSSで縦方向中央に配置するテクニックいろいろ

3. 美しくて機能するウェブデザインを作成するPhotoshopの7つのテクニック | コリスhttp://coliss.com/articles/build-websites/operation/design/7-photoshop-tips-for-designing-clean-and-modern-websites-by-webdesignerdepot.html

「7 Photoshop tips for designing clean and modern websites」という記事のポイントを日本語に翻訳しています。

  1. Space(ホワイトスペース)
  2. Depth(奥行き)
  3. Detail(ディテール)
  4. Definition(明確)
  5. Interest(興味)
  6. Perspective(遠近法)
  7. Readability(リーダビリティ)

の7つの項目で,最近流行のクリーンなデザインのサイトを作るためのPhotoshopテクニックが紹介されています。

図3 クリーンなWebデザインを作成するためのPhotoshopテクニック

図3 クリーンなWebデザインを作成するためのPhotoshopテクニック

4. 35 Impressive Minimal Web Design | AcrisDesignhttp://acrisdesign.com/2011/10/35-impressive-minimal-web-design/

ミニマルなWebデザインのギャラリーです。シンプルながら印象的なデザインのサイトが揃っています。

図4 ミニマルなWebデザインのギャラリー

図4 ミニマルなWebデザインのギャラリー

5. Animate.css - a bunch of plug-and-play CSS animationshttp://daneden.me/animate/

CSSアニメーションで様々な動きを実現するコード集です。アニメーションごとにクラス名を付けたCSSファイルなので,動かしたい要素にHTML上でクラスを付けるだけで実装できます。

サンプルでは,jQueryを使ってクラスの追加をコントロールすることで,ボタンを押すとアニメーションが実行されるようになっています。

アニメーションにはJavaScriptは不要で,CSSだけで動きを付けています。CSSファイル内の数値などをカスタマイズすることで,アニメーションの継続時間や回転角度などを変更することもできるはずです。

必要なアニメーションだけを選んだCSSファイルを書き出せるジェネレーターも用意されています。

図5 簡単に利用できるCSSアニメーション集

図5 簡単に利用できるCSSアニメーション集

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

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

Topsy - ソーシャルウェブをリアルタイムに検索http://plus.topsy.com/

TopsyはTwitterなどのソーシャルメディアをリアルタイムに検索できるサービスです。最近Google+上の記事にも対応しました。現在,通常の検索とGoogle+用の検索とは分かれているようです。

また,メニューから「エキスパート」を選びキーワードを入れて検索すると,そのキーワードに関する発言の多い人を探すことができます。共通の趣味の人を探してサークルに入れたい場合に便利ですね。

このエキスパート検索機能については,これはすごい!Google+の中でのエキスパートを調べる方法 “フォローすべき人が見つかるかも?” | Chrome Lifeという記事で詳しく解説されています。

図6 TopsyのGoogle+用検索

図6 TopsyのGoogle+用検索

今週の気になるWebネタ

アップル,Siriの日本語版を2012年に提供開始する予定 : ギズモード・ジャパンhttp://www.gizmodo.jp/2011/10/siri2012.html

iPhone 4Sの目玉機能である音声アシスタント「Siri」が,2012年にも日本語に対応する予定だそうです。日本語環境のiPhone 4Sでも英語でSiriを利用することができるらしいのですが,ネイティブな英語の発音ができない人でも日本語でSiriさんと会話できる日も近そうです。

「ジョークを言って」と呼びかけると「できません。いつもオチを忘れてしまうんです」と答えるなど,なかなか面白い返答をするらしく,ネットでもいろいろなSiriとの会話集が報告されています。

それを受け,日本語版にも小粋でセンスのいい問答を期待する声が高まっています。あまりヒネリ過ぎたことを言うと嫌みな感じになりかねませんが,ロボットらしく生真面目過ぎるのが面白いという感じがいいんじゃないかとわたしは思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入