Section1 レスポンシブWebデザイン

第 2 章｜ページのオーサリング
第
章
1
Section 1　レスポンシブ Web デザイン
このセクションでは、レスポンシブ Web デザインをテーマにご説明します。昨今のユーザーはス
マートフォン、タブレット、PC といった多様なデバイスで Web ページの閲覧を行います。それ
第
章
2
ぞれのデバイスによってスクリーンのサイズも異なります。例えば PC の大きなスクリーンで表
示すると見やすいものでも、スマートフォンの小さなスクリーンで表示すると、とても見づらく
なります。そのため、従来はスマートフォン用にはスマートフォン用の別サイトを用意するとい
う手法がとられてきました。ただし、その場合同じサイトを複数パターン用意することになりま
すので、制作上の効率が良くありません。そこで、昨今ではユーザー側の環境に応じてフレキシ
第
章
3
ブルに、1 つの HTML ソースからなる Web ページのデザインを組み替えるという考え方、およ
び手法がとられるようになりました。それがレスポンシブ Web デザインというコンセプトです。
Lesson 1 可変グリッドレイアウトの新規作成
《レッスンポイント》 Dreamweaver では、レスポンシブな Web デザインを実現するための機
能が導入されています。その 1 つが、バージョン CS6 より導入された、
「可
変グリッドレイアウト」です。
【1】レスポンシブ Web デザインに対応していない例
❶ サンプルファイルより、「sample 01」フォルダーの「index.html」を Web ブラウザーで開
き、ウィンドウサイズを最大化します。
36
Section 1 レスポンシブ Web デザイン
WEB 制作実践講座｜ページオーサリング編
縮小してみます。
第
❷ タブレットやスマートフォンを想定して、Web ブラウザーのウインドウの横幅を少しずつ
章
1
第
章
2
第
章
3
ページサイズの 940 px よりウインドウ幅が狭くなるとウインドウ下部に横スクロールが表
示され、ページのコンテンツの一部が表示されなくなります。結果的に、スクロールバーを
動かさなければ表示されていない部分を見ることができません。
【2】レスポンシブ Web デザインに対応している例
❶ サンプルファイルより、「sample 02」フォルダーの「index.html」を Web ブラウザーで開
き、ウィンドウサイズを最大化します。一見、同じページが開いたように見えます。
レスポンシブ Web デザイン Section 1
37

Download Report