週刊Webテク通信

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

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

ネットで見かけた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のニュースフィードを新聞風レイアウトにするサービス

今週の気になるWebネタ

日本通信から契約不要で2万円台のSIMロックフリーAndroid『IDEOS』登場!! データ専用SIMで通話も可http://weekly.ascii.jp/elem/000/000/030/30045/index.html
【山田祥平のRe:config.sys】 手のひらの中で電波が見えてメールが読める,そしてつぶやけるルーターhttp://pc.watch.impress.co.jp/docs/column/config/20101224_416663.html

イー・モバイルから,モバイルルーター「Pocket WiFi」の後継モデルとしてAndroid端末の「Pocket WiFi S(S31HW)⁠が発表されたと思ったら,日本通信からはSIMロックフリーのAndroid端末「IDEOS」が発売されました。

Pocket WiFi Sも,IDEOSをベースとしたもので,香港のファーウェイ(Huawei)社のIDEOSに注目が集まっています。

日本通信のIDEOSはキャリアとの契約なしに購入でき,2万円台と安価です。無線LAN環境だけで使用するなら月額費用などかからないので,Webサイトやアプリのチェック用端末として購入するという手もありますね。

イー・モバイルから発売されるIDEOSもSIMロックフリーとのことで,AndroidスマートフォンにはSIMロックフリーの時代が来るのかもしれません。

なお,IDEOSはイディオスと読むようです。日本通信では「おこづかいで持てるスマートフォン」というキャッチコピーを付けていますが,Amazonでも売っているので「Amazonでも買えるスマートフォン」と謳うのもいいんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入