[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

このページの本文へ

ゼロから始めるレスポンシブWebデザイン入門 ― 第1回

レスポンシブWebデザインとは (3/5)

2012年06月04日　11時00分更新

文●菊池 崇／Web Directions East

本文印刷

広がるレスポンシブWebデザインの事例

　レスポンシブWebデザインはすでに海外を中心に大手企業サイトでも利用されています。以下は米スターバックスのWebサイトです。実際にブラウザーでアクセスしてウィンドウの幅を狭めてみてください。画面幅に応じてナビゲーションの位置やカラムの数など、レイアウトが変わっていくのが分かります。

zu04-1.png

図4 米スターバックスのWebサイト

　国内でも2011年以降、レスポンシブWebデザインを使ってWebサイトを構築する事例が増えてきています。以下は、グリーの「GREE Platform」というWebサイトです。

zu05.png

GREE Platform

　レスポンシブWebデザインは、ほかにも多くのWebサイトで採用されています。レスポンシブWebデザインのWebサイトを集めた「Media Queries」では、さまざまなサイトが日々追加されています。PCからアクセスして、ブラウザーの横幅を広くしたり、狭くしたりして、レスポンシブWebデザインを体感してみてください。

zu06.png

図6 Media Queries

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
フルードグリッドとレスポンシブWebデザインの完成

WebPro

フルードグリッドとレスポンシブWebデザインの完成

レスポンシブWebデザインの基礎をチュートリアルで学ぶ入門連載。フルードグリッドを導入してサンプルサイトを完成させよう。

メディアクエリーの設定とグリッドデザインの導入

WebPro

メディアクエリーの設定とグリッドデザインの導入

レスポンシブWebデザインの基礎をチュートリアルで学ぶ連載。メディアクエリーを使ってCSSを切り替え、グリッドデザインの考え方を導入する。

CSSでスマートフォンでも見やすくスタイリング

WebPro

CSSでスマートフォンでも見やすくスタイリング

レスポンシブWebデザインによるサイト制作の基本を学ぶ連載。今回はヘッダー、メインコンテンツ、フッターなどの各領域のCSSを設定して見栄えを整えてこう。

フルードイメージの導入とタイポグラフィの設定

WebPro

フルードイメージの導入とタイポグラフィの設定

レスポンシブWebデザインに必要な技術的な要素「フルード・イメージ」を導入し、読みやすさに考慮して文字サイズを決定しよう。

HTMLの用意とリセットCSSの作成

WebPro

HTMLの用意とリセットCSSの作成

レスポンシブWebデザインによるサイト制作入門。ページの基本となるHTMLを用意し、CSSの初期設定を記述しよう。

レスポンシブWebデザインのワークフローと画面設計

WebPro

レスポンシブWebデザインのワークフローと画面設計

レスポンシブWebデザインによるWebサイト制作の流れを理解し、サイト制作に必要な画面設計と下準備を始めよう。

この記事の編集者は以下の記事をオススメしています

DESIGN スマホ対応の新潮流「レスポンシブWebデザイン」とは？

WebPro

スマホ対応の新潮流「レスポンシブWebデザイン」とは？

スマートフォンの普及を背景に「レスポンシブWebデザイン」（Responsive Web Design）が海外で注目を集めている。どのようなアプローチなのだろうか。

  • 0
  • 0
DESIGN 流行期を過ぎたレスポンシブ・Webデザインのこれから

WebPro

流行期を過ぎたレスポンシブ・Webデザインのこれから

レスポンシブ・Webデザインが誤解を生む背景には、レスポンシブ・Webデザインの定義を勘違いしていたり、深く理解せずに言葉遊びとして捉えていたりする傾向があるように思う。

  • 0
  • 0
PROGRAMMING スマホ、レスポンシブの表示チェックが捗る時短テク

WebPro

スマホ、レスポンシブの表示チェックが捗る時短テク

Chromeデベロッパーツールを使いこなす新連載がスタート。まずはスマホサイトの表示チェックとJavaScriptのデバック方法を紹介します。

  • 0
  • 0
WebCamp運営のインフラトップ、 有料職業紹介事業の資格を習得

スタートアップ

WebCamp運営のインフラトップ、 有料職業紹介事業の資格を習得

インフラトップは12月16日、短期オフラインプログラミンスクールとしては初となる、有料職業紹介事業の資格を習得したと発表。

  • 0
  • 0
すぐに役立つ！プロの解説記事
一覧へ
ASCII.jp Web Professional