• DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • CLOUD COMPUTING STAGE
gihyo.jp » WEB+DESIGN STAGE » 週刊Webテク通信 » 2010年3月第2週号　1位は，CSSだけで実現するフキダシ作成テクニック，気になるネタは，Evernoteの日本語化や今後の展望について聞いてきた

週刊Webテク通信

2010年3月第2週号　1位は，CSSだけで実現するフキダシ作成テクニック，気になるネタは，Evernoteの日本語化や今後の展望について聞いてきた

2010年3月11日

, , , , , ,

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

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2010年3月1日～2010年3月7日の間に見つけた記事のベスト5です。

1. Progressive enhancement: pure CSS speech bubbles - Nicolas Gallagher - Blog & Ephemerahttp://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

画像もJavaScriptも使わずに，CSSだけで実現するフキダシの作例集です。

今までもCSSオンリーでのフキダシ作成テクニックはありましたが，CSS3のborder-radius（角丸），transform（変形），gradient（グラデーション）といったプロパティを使うことにより，ぐっと表現力がアップしていますね。

フキダシの三角形の尻尾の部分は，「画像を一切使わずにCSSだけで吹き出しツールチップを実装する | CSS-EBLOG」でも解説されている，ボーダーを使ったテクニックを使っています。

クルッと曲がったフキダシの尻尾は，角丸の図形をうまく組み合わせて作っているようです。

Progressive enhancementの考え方で，古いブラウザでも問題なく内容は閲覧でき，新しい技術に対応したブラウザならより表現力豊かに見られるようにコーディングされています。

図1　CSSだけで実現するフキダシ作成テクニック

図1　CSSだけで実現するフキダシ作成テクニック

2. Photoshop Vip » 保存版！Photoshop用無料レイヤースタイル750個+まとめhttp://photoshopvip.net/archives/13196

ボタンやテキスト加工などに役立つ，無料のPhotoshop用レイヤースタイルの紹介記事です。

「Ultimate Roundup of 750+ Free Photoshop Layer Style」という記事をベースに，レイヤースタイルのインストール方法や，元記事に掲載されていないレイヤースタイルも追加してまとめられています。

図2　Photoshop用の無料レイヤースタイルのまとめ記事

図2　Photoshop用の無料レイヤースタイルのまとめ記事

3. Best jQuery plugins for Twitter integration | AjaxLinehttp://www.ajaxline.com/best-jquery-plugins-for-working-with-twitter

ツイッターのタイムラインなどを，自分のサイトに組み込むためのjQueryプラグインを紹介しています。

  • トラックバック一覧のように使える，そのページにリンクしているツイートを表示するもの
  • 特定の「@ユーザー名」が入ったツイートを表示するもの
  • 自分のタイムラインを表示するもの
  • 自分の最新のツイートだけを表示するもの
  • 検索結果を表示するもの
  • フォローしている人のリストを表示するもの

など，いろいろなプラグインがありますね。

図3　ツイッターをサイトに組み込むためのjQueryプラグインいろいろ

図3　ツイッターをサイトに組み込むためのjQueryプラグインいろいろ

4. いまどき？ いまさら？ clear fix のコード | ヨモツネットhttp://www.yomotsu.net/wp/?p=561

定番のCSSハックである「clearfix」のコードに関する話題です。

昔から使われているコードは，NetscapeやMacのInternet Explorerへの対策も入っているので，それらを削るともっとシンプルになるとのことです。

何も考えずに昔のコードを使っていた私はハズカシイと思ったのですが，この記事について「はてなブックマーク」やツイッターで「目からウロコ」とコメントしていた人もいたのでホッとしました。

図4　clearfixのコードについての話

図4　clearfixのコードについての話

5. Footer Design Collection of Beautiful Websites » DJDESIGNERLAB - Find All Your Design Inspirations From This Laboratoryhttp://djdesignerlab.com/2010/02/26/footer-design-collection-of-beautiful-websites/

現在のWebデザインにおいてフッタ部分は重要とされています。そのフッタのデザインがすばらしいサイトを紹介したギャラリー記事です。

図5　フッタデザインのショーケース

図5　フッタデザインのショーケース

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

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

Flavors.mehttp://flavors.me/

Flavors.meは，自分のツイッターやブログ，FlickrやTumblrなどをまとめたプロフィールページのようなものを作れるサービスです。

ユーザー登録すると自分のページが持てるので，ツイッターやFlickrなどのIDやブログのRSSを登録し，レイアウトや配色などを設定します。

でき上がったページには，ツイッターやFlickrなどへのリンクがメニューとして並びます。これらのメニューは別ページに移動するリンクではなく，各記事内容も同じページ上に表示されます。

簡単にカッコいいマイページが作れるので，ポートフォリオページとして利用できそうです。

リンクやタイトルの文字に日本語を使うと文字化けしますが，表示される記事内容については，日本語も大丈夫でした。

こんな感じのページが簡単に作れますよ。

図6　簡単にプロフィールページが作れる無料のサービス

図6　簡単にプロフィールページが作れる無料のサービス

今週の気になるWebネタ

Evernoteの日本語化や今後の展望について聞いてきた : ライフハッカー［日本版］, 仕事も生活も上手くこなすライフハック情報満載のブログ・メディアhttp://www.lifehacker.jp/2010/03/100303evernote.html

日本でも人気のEvernoteですが，Webクライアントも専用アプリケーションも日本語化されたようです。

今までも特に不便はなかったのですが，日本語化されている方が人にオススメしやすいですよね。

わたしはヘビーユーザーではないのですが，Scansnapでスキャンした紙の資料（ムスメの幼稚園のお知らせなど）のPDF置き場として重宝しています。iPhoneから幼稚園のスケジュールが見られて便利ですね。

パソコンとiPhone間でデータをやり取りする手段としても，よく使っています。

Evernoteはなんで象のマークなんだろうという疑問には，「 「Evernote」はなぜ象のアイコンなのか？」という記事が答えてくれています。なるほど，象は記憶力の良い動物なんだ。

, , , , , ,

著者プロフィール

芦之由（あしのよし）

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

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

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

コメント

  • Photoshop VIPを紹介して頂いてありがとうございます。

    はじめまして、Photoshop VIPの運営をしていますseanと言います。
    今回は記事紹介をして頂きありがとうございます。

    これからも世界中のデザイン、フォトショップに関するニュースをお届けしますのでどうぞよろしくお願いします。


    ありがとうございます。

    Commented : #1  sean （2010/03/13, 06:48）

コメントの記入