週刊Webテク通信

2011年1月第1週号1位は、CSS3メディアクエリによる可変レイアウトのサンプル集、気になるネタは、日本通信とイー・モバイルからSIMロックフリーAndroid「IDEOS」登場

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

1. zomigi.com ≫ Examples of flexible layouts with CSS3 media querieshttp://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/

CSS3のメディアクエリを使い、画面サイズによってレイアウトが可変するサイトのサンプル集です。

最初に紹介されているサンプルは架空のサイトで、ブラウザの横幅により3カラムから1カラムまで変化します。また、水平メニューが垂直になったり、画像サイズが変わるといった仕掛けがよくできていて参考になります。

実際に稼働しているサイトも多く紹介されていて、すでに実践として使えるテクニックなのだと実感させられました。

日本の場合はこれに加えてフィーチャーフォン(ガラケー)のことも考えなくてはいけませんが、アメリカではPC&スマートフォン/タブレット両対応はこの形が増えていきそうです。

図1 CSS3メディアクエリによる可変レイアウトのサンプル集
図1 CSS3メディアクエリによる可変レイアウトのサンプル集

2. CSS drop-shadows without images ? Nicolas Gallagherhttp://nicolasgallagher.com/css-drop-shadows-without-images/

画像を使わずCSSだけで実現した、ちょっと変わったドロップシャドウのテクニックです。

CSS3のtransform(変形)をうまく使い、紙のカールや立体的な感じをうまく表現しています。

図2 CSSだけで実現したドロップシャドウのパターンいろいろ
図2 CSSだけで実現したドロップシャドウのパターンいろいろ

3. 20 Places to Download Free Website Templates and Free Flash Templates | DesignBeephttp://designbeep.com/2010/12/16/20-places-to-download-free-website-templates-and-free-flash-templates/

フリーのWebサイトのテンプレートやFlashのテンプレートをダウンロードできるサイトを紹介しています。

デザインサンプル集としても参考になるでしょう。

図3 フリーのWebサイト/Flashのテンプレートのダウンロードサイトいろいろ
図3 フリーのWebサイト/Flashのテンプレートのダウンロードサイトいろいろ

4. 2010年にWeb担当者が読んでおくべき良記事40本 | Web担当者Forumhttp://web-tan.forum.impressrd.jp/e/2010/12/24/9451

「Web担当者Forum」サイトの中から、2010年の人気記事をまとめて紹介しています。

解説記事、ニュース記事、ユーザー投稿といった種類別に、合計40の記事が人気順に掲載されています。

図4 Web担当者Forumの2010年人気記事
図4 Web担当者Forumの2010年人気記事

5. 450+ Free Acrylic And Paint Photoshop Brushes - Web Design Blog ? DesignM.aghttp://designm.ag/inspiration/450-free-acrylic-and-paint-photoshop-brushes/

アクリル画のような筆のタッチを実現するPhotoshopのブラシ集です。アクリル画とはアクリル絵の具を使った絵画のことです。

Webデザインにアナログの要素を加えたいときに役立ちそうです。

図5 筆のタッチを実現するPhotoshopのブラシ集
図5 筆のタッチを実現するPhotoshopのブラシ集

そのほか、気になるWebサービスとインフォグラフィックを紹介します。

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

PostPosthttp://www.postpost.com/

PostPostは、Facebookの自分のニュースフィードを新聞風レイアウトで見られるサービスです。Facebookのニュースフィードとは、Twitterでのタイムラインのようなものです。

TwitterやFacebook、Flickrなどで自分がフォローしているコンテンツを、雑誌風のレイアウトで閲覧できるiPadアプリ「Flipboard」が昨年話題になりましたが、その流れを汲んだものでしょう

フィードリーダーのFeedly(ブラウザの機能拡張⁠⁠、Reeder(iPad/iPhone、Mac版も公開予定)も、情報を雑誌風レイアウトに整形して提供するという、同じ方向性のものですね。

こういった、パーソナライズされたソーシャルマガジンサービスというのが、今年はより流行りそうな予感がします。

図6 Facebookのニュースフィードを新聞風レイアウトにするサービス
図6 Facebookのニュースフィードを新聞風レイアウトにするサービス

おすすめ記事

記事・ニュース一覧