週刊Webテク通信

2010年6月第4週号 1位は,CSSのボーダーを使ったテクニック,気になるネタは,iPhone 4:「1日100万台」の人気+不具合報告

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

ネットで見かけた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要素の上下に色違いのボーダーを入れて立体的に見せるテクニックも効果的です。

図1 CSSのボーダーを使ったテクニック

図1 CSSのボーダーを使ったテクニック

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

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

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

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

図2 すばらしいデザインリニューアルをしたWebサイトいろいろ

図2 すばらしいデザインリニューアルをしたWebサイトいろいろ

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化については触れられていません。

図3 PhotoshopでのWebデザインチュートリアル

図3 PhotoshopでのWebデザインチュートリアル

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

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

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

図4 Firebugの意外と知られていない機能の紹介

図4 Firebugの意外と知られていない機能の紹介

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

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

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

図5 暖色系と寒色系に分けてのWebデザインショーケース

図5 暖色系と寒色系に分けてのWebデザインショーケース

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

先週の気になる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です。ウィンドウ幅を狭めて確認してみてください。

図6 フリーのモバイルサイト構築サービス Onbile

図6 フリーのモバイルサイト構築サービス Onbile

今週の気になるWebネタ

iPhone 4:「1日100万台」の人気+不具合報告 | WIRED VISIONhttp://wiredvision.jp/news/201006/2010062523.html

iPhone 4が発売され,連日ネットで話題となっています。テレビでの取り上げられ方はiPadほどではありませんが,それでも行列の様子などがニュースや情報番組で紹介されていました。

発売当初はなにかと不具合が報告されるアップル製品ですが,iPhone 4ではディスプレイに黄色のシミが表示される問題と,握り方によって受信感度が弱まる不具合とが話題になっているようです。

黄色のシミは乾ききっていない接着剤で,時間がたつと消えるという情報も出ています。

iPhone 4の左下隅を触れると受信感度が弱まるケースがあり,アップルも認めているようです。⁠持ち方を変える」⁠右手で持つ」⁠ケースをつける」などで解決するとのこと。iPhone 4には純正カバーの「バンパー」があるので,これをつける人が増えそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入