SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事(AD)

サンプルで学ぶDreamweaver CS6!「レスポンシブWebデザイン」に挑戦してみよう

マルチデバイス対応のサイト制作者必見!Dreamweaver CS6概説

  • X ポスト
  • このエントリーをはてなブックマークに追加

「レスポンシブWebデザイン」とは?

 まずは、こちらのサンプルを、別ウィンドウで開いて確認してみてください。ブラウザウィンドウの横幅を変更すると、3段階でレイアウトが変化します。

 このように1つのHTMLファイルを使いつつ、デバイスに大きさ/向きに応じて異なるレイアウトを適用させるのが「レスポンシブWebデザイン」です。

 例えば、W3Cのサイトも、2段階でレイアウトが変化します。

 レスポンシブWebデザインのギャラリーサイト「Media Queries」でたくさんの実例を見つけることができます。

スマートフォン、タブレットへの対応とレスポンシブWebデザイン

 スマートフォンやタブレットは、縦置き/横置きのように向きを変更することができます。これによって表示される横幅が変わります。

 それだけなく、同じAndroidでも、機種によって表示できる解像度(縦横のピクセル数)がマチマチなため、このレスポンシブWebデザインのノウハウは、レイアウトを変化させるだけでなく、画面にフィットさせるという意味で重要です。

どのように実現するのか?(1)

 サンプルサイトでは、幅480、幅768ピクセルを区切りとして、それぞれ異なるCSSルールを読み込ませています。ちなみに、この区切りのことは「ブレーク・ポイント」と呼ばれます。

 「rwd.css」を見ると、次のようなコメントと、それに続き、「@media only screen and (min-width: 481px)」のような記述が見つかります。

/* モバイルレイアウト : 480 px およびそれ以下. */

/* スマートフォン向けのCSSルール */

/* タブレットレイアウト : 481 px ~ 768 px。モバイルレイアウトからスタイルを継承。 */ 

@media only screen and (min-width: 481px) {
 /* タブレット向けのCSSルール */
  }
	
/* デスクトップレイアウト : 769 px ~ 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
/* デスクトップ向けのCSSルール */
}

 「@media only screen and (min-width: 481px)」は「横幅が481ピクセル以上のとき」、「@media only screen and (min-width: 769px)」は「横幅が769ピクセル以上のとき」といういう意味で、@mediaからはじまる記述をメディアクエリーと呼びます。

 ご存じのとおり、CSSファイルは、上から下に読んでいきますので、コメントに記述されているように、タブレットレイアウトはモバイルレイアウトからスタイルを継承しますし、デスクトップレイアウトは、モバイルレイアウトとタブレットレイアウトからスタイルを継承します。

どのように実現するのか?(2)

 レスポンシブWebデザインを実現する上でもうひとつ重要なのが、画像の伸び縮みです。通常は、次のようにimg要素にwidth/height属性を使って画像サイズを記述します。

<img src="images/sofa-01.png" alt="Chill Out Sofa" width="200" height="112">

 一方、レスポンシブWebデザインでは、画面に応じて可変させるため、CSSに次のように記述します。

img {
 max-width: 100%;
}

 さらに、max-widthを解釈できないIE6のために次のCSSルールも併記します。

.ie6 img {
 width: 100%;
}

 このような画像の扱いを「フレキシブル・イメージ(Flexible Image)」と呼びます。なお、img要素にwidth/height属性よりも、CSSのwidth指定が優先されます。

次のページ
Dreamweaverを使った「レスポンシブWebデザイン」作成の流れ(準備編)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

鷹野 雅弘(タカノ マサヒロ)

 株式会社スイッチ Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。 2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,000名を超える方が参加している。 テクニカルライターとして20冊以上の著書を持ち、総販売数は14万部を超える。主な著書に『よくわかるDreamweaverの教科書』(共著、マイナビ)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(マイナビ)など。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

松田 直樹(マツダ ナオキ)

 株式会社まぼろし 当初身を置いていたゲーム業界にて、デザイナーにPhotoshopを教えてもらい、デザインの持つ力に驚愕した後、Web業界に転身。 2008年に株式会社TSUDUMIを設立、現在に至る。テーマパークの開設運営で培った企画力を生かし、デザイン、マークアップ、プログラムといった幅広い業務を担当...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6574 2013/01/15 17:33

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング