スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

Webメディアをはじめ“HTML5”をキーワードとした話題になることが多く、大げさではなくHTML5という文字を見ない日はない。 HTML5は2011年5月中の予定で最終草案をW3Cで策定中だ。HTML5を最終草案を待って実装をするのもいいだろう。しかし、世界ではHTML5を使ってサービスを始めているサイトもある。以下に、それらのサービスを紹介しよう。 進むCanvasの実装 欧米ではたいへん人気のあるパーソナルバンキングサービスのBank Simple。このサイトはJavaScriptでビットマップ画像を描ける「cavas要素」を利用して、紺色の背景模様を変更している。Canvasをデザインとして利用するサービスは非常に面白いし、挑戦的な試みだ。 このJavaScriptはgithubでも共有されているので、誰でも利用して自身のWebサイトに実装できる。 Bank Simpleは、ページ

box-shadow プロパティは、CSS3の「Background and Borders Module Level3」で定義されているプロパティだ。ボックスに対して1つもしくは複数のシャドウを適用できる。今回のCSS3道場では、box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。 box-shadow の記述方法 box-shadowプロパティの値は、距離＋色で構成される。基本的な記述方法は以下のとおりだ。

text-shadowプロパティはテキストとtext-decorationに対して影を1つもしくは複数つけられるプロパティだ。もともとはCSS2で定義されたものの、ブラウザーの実装が進まなかったためCSS 2.1でいったん削除され、CSS3のtext-moduleとして復活した。 text-shadowはCSS3の中でもっとも基本的なプロパティの1つと考えられているが、アイデア次第で大きな効果を得られるプロパティでもある。今回のCSS3道場は、text-shadowを使ってリッチな「見出し」をデザインしてみよう。なお、text-shadowはほとんどのモダンブラウザーに実装されているが、残念ながらInternet Explorer 9 ベータ版ではサポートされていない。 今回のお手本

CSS3（Cascading Style Sheets,level 3）がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。CSS3を使うと従来は画像やスクリプトを使わないとできなかった表現が、スタイルシートだけでできるようになる。デザイン表現の自由度を広げ、マークアップの効率を上げるのがCSS3だ。本連載ではCSS3を使ったデザインTipsをサンプルとともに紹介する。 「申し込みボタン」や「キャンセルボタン」などのボタンは、Webのユーザーインターフェイスの中でも重要な要素の1つだ。テキストや他の要素に埋もれてユーザーが操作に迷わないように、画像を使って凝ったデザインにすることが多い。 CSS3を使えばテキストだけでも画像に引けを取らないボタンを手軽に作成できる。画像を用意する手間が減るうえに、CSSプ

iPhoneとiTrailと自転車 油断してる間に寒くなりましたなあ。自転車に乗るのに手袋（グローブ）は必須。そうでなくても、手の怪我防止（もし転んだとき、最初に手をどこかにつくので、グローブの有無はとっても大事）にもなるので、ぜひつけるべし。自転車用グローブがオススメだ。わたしも転んだとき、グローブのおかげで手のひらをアスファルトで擦り剥かずに済んだことあります。 あ、グローブしてるとiPhoneの操作ができないじゃん！　温かい季節は指先が出てるグローブをしてるから気にならなかったのにっ！ というわけで、操作するたびにいちいちグローブを外している荻窪 圭であります。 iPhoneを自転車に取り付ける～独リヒター社編～ 先日、iPod/iPhoneのニュースサイトであり、さまざまなiPod/iPhone用ガジェットを紹介してる「iPod Style」から「おにいさん、おにいさん、iPhon

「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。

「Webフォント」（Web Fonts）という技術をご存じだろうか？　Webフォントは、クライアントにインストールされていないフォントをWebページで自由に使えるようにする技術だ。従来、好みのフォントを使った文字をWebページで表示するには、あらかじめ文字を画像化しておくしかなかったが、Webフォントなら使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できる。 Webフォントのメリットは、画像を利用する場合と比較すると分かりやすい。 Webフォントの場合 画像の場合

Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？　もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう