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

1. CSS Border Tricks | Pressed, Beveled, Shadows, Intented Borders | CSS Border Tutorial | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanakahttp://www.sohtanaka.com/web-design/css-border-tricks-tutorial/

CSSのボーダーを使って簡単にベベルや型押しの効果を与えるテクニックの紹介です。

border-bottomだけ，あるいはborder-bottomとborder-rightの色を変えるといったテクニックは以前から使われていますが，CSS3の角丸と組み合わせるとより凝った効果に見えますね。

outlineプロパティを利用してベベル効果を与えるテクニックも，1ピクセルのラインが入るだけでぐっと質感が上がります。

リストを使った垂直方向のメニューで，li要素の上下に色違いのボーダーを入れて立体的に見せるテクニックも効果的です。

2. Awesome Recent Website Redesigns | Webdesigner Depothttp://www.webdesignerdepot.com/2010/06/awesome-recent-website-redesigns/

最近デザインリニューアルされたサイトの，変更前後のデザインを比較して紹介しています。よりシンプルでクリーンな方向に向かっているサイトが多いようです。

中でも「Veerle’s Blog」のリニューアルは，最近のトレンドに当てはまっているんじゃないでしょうか。よりソフトな印象になり，質感が高まっています。1ピクセルのラインが上手く使われていますね。

文字と背景色のコントラストの差が少なくなったため，記事を読むページでは，背景が白で文字が黒のハイコントラストバージョンに切り替えることもできます。

3. 20 Fresh & Easy To Follow Photoshop Web Interface Tutorials | nenuno creativehttp://nenuno.co.uk/creative/tutorial/20-fresh-easy-to-follow-photoshop-web-interface-tutorials/

WebページのレイアウトをPhotoshopで行うチュートリアルのリンク集です。

Photoshop上でページ全体のデザインをきっちり作り上げるチュートリアルで，その先のHTML+CSS化については触れられていません。

4. 意外と知られていない機能が多い！？Firebugの使い方 | THE HAM MEDIAhttp://h2ham.seesaa.net/article/154387441.html

Firefoxのアドオン「Firebug」を使いこなすためのヒントが紹介されています。

意外と知られていない機能を取り上げた解説なのですが，Firebugでどんなことができるかの入門にもなる記事だと思います。

5. Get Inspired: 35+ Warm VS Cool Color Website Designshttp://www.1stwebdesigner.com/inspiration/warm-cool-color-website-designs/

暖色系 VS 寒色系のWebデザインのショーケースです。それぞれ20個弱くらいのサイトが紹介されています。

青系のサイトは見慣れた感じがするのに対し，黄色系のサイトは見慣れないこともあって新鮮な印象がありますね。

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

• Scribd，Flashを捨てユーザー滞留時間が３倍増
  文書共有サイトのScribdがFlashからHTML5へ移行したそうです。
• 「IE6の利用はやめて⁠」⁠，内閣官房が各省庁に移行を推奨 - ニュース：ITpro
  内閣官房情報セキュリティセンター（NISC）が各府省庁に対してIE6からIE8への移行を推奨したことを発表しました。
• A New Photo Experience: Your Photos, Happier « Flickr Blog
  Flickrの写真表示画面がリニューアルされたことの報告です。

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

Onbile - Free mobile website templateshttp://www.onbile.com/

モバイル向けのWebサイトを簡単に作れるWebサービスです。

海外のサービスなので，もちろん日本のケータイ向けではなく，iPhone， Androidなどのスマートフォンをターゲットとしています。

テンプレートは，大きく分けて二つ用意されています。

ひとつは連絡先などを載せたプロフィールページを作るもの，もうひとつはRSSを読み込ませてブログなどを読めるようにするものです。

サイト上のエディタで入力した日本語は文字化けしてしまうため，プロフィールページを作るのは厳しそうです。別サイトやTwitterなどのURLを入れておくだけなら，日本語が使えなくても大丈夫かもしれません。

RSSを読み込ませたものに関しては，日本語でも大丈夫でした。

ロゴ画像をアップロードしたり，背景色を変えることなどはできるのですが，細かいカスタマイズはできません。基本的には用意されたままのデザインで使うものです。

生成されるJavaScriptのコードを自分のサイトのトップページに入れておくと，iPhoneやAndroidからのアクセスは自動的にOnbileで作ったページに転送されます。

作ったページは「http://www.onbile.com/（ユーザー名⁠）⁠」でパソコンからでもアクセスできます。わたしがテストで作ってみたページのURLは「http://www.onbile.com/ashinoyoshi」です。ウィンドウ幅を狭めて確認してみてください。