レスポンシブウェブデザインとは

この章のゴールは「レスポンシブウェブデザインとは何か？」を理解することです。

パソコンとスマートフォンで全く同じデザインを使うのは厳しい

「６日目: CSS その４」の中でも説明したように、現在では Web ページを閲覧するにも「パソコン」「タブレット」「スマートフォン」で見てもスタイルが崩れないというのを考慮する必要があります。

しかし、「パソコンで見たときのスタイル」と全く同じスタイルを「スマートフォンで見たときのスタイル」にあてようとすると基本的にうまくいきません。

理由はシンプルで次のような感じです。

つまり、画面の表示領域がスマートフォンの方が圧倒的に小さいため、パソコン画面と同じものを表示したいと思っても、うまく入り切らないということです。

そのため、「パソコン」「タブレット」「スマートフォン」の端末ごとに異なるページデザインを考えて、どの端末でも使いやすい Web サイトのデザインを考える必要があります。

この「端末ごとに Web ページを使いやすくすることを考慮したデザイン」の手法の１つとして「レスポンシブウェブデザイン（Responsive Web Design）」というものがあります。

「Flexbox とは」でも話したとおり、ここまで学習を進められているということは、「自分で調べる力」が少しずつ身についているはずです。

「レスポンシブウェブデザインとは」で検索すれば、「レスポンシブウェブデザイン」について解説された記事がたくさん見つかります。

ざっくりレベルで良いので、「レスポンシブウェブデザインとはこういうこと」と人に説明できるレベルを目指して知識をインプットしていきましょう^^

調べ方のコツとしては、「記事検索」の他にも「画像検索」や「YouTube 検索（動画検索）」もあります。

「画像検索」のメリットは、「図でざっくりとイメージが掴みやすい」いう点です。

文章を読むだけで頭に入ってこない場合は「画像検索」も活用してみましょう。

「YouTube 検索（動画検索）」のメリットは、「身振り手振りの説明」「言葉による説明でえ細かいニュアンスが伝わる」「実演形式で解説してくれる」など様々あります。

文章だけでイメージが掴みづらい場合は「画像」「動画」を有効活用してみましょう。

レスポンシブウェブデザインの概要をざっくりとでも把握できたら、あとは実装をしてさらにイメージを固めていきましょう！

「HTML CSS レスポンシブ実装方法」とキーワードで検索をすれば、レスポンシブウェブデザインに対応する実装方法について解説された記事がたくさん見つけられるかと思います。

最後にレスポンシブな Web ページの実装を行うときのポイントとなる「キーワード」を以下に挙げてこの章を終わりたいと思います。

７日目に紹介する「Bootstrap」を使うと、レスポンシブ対応した Web ページを比較的簡単に作れます。

というのも、レスポンシブ対応するのに必要な設定を「Bootstrap」で行っているので、Bootstrap のルールに則って実装を進めれば、自然とレスポンシブ対応した Web ページを作れるのです。