週刊Webテク通信

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

ネットで見かけた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 簡単にプロフィールページが作れる無料のサービス

おすすめ記事

記事・ニュース一覧