「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

順番に見ていきましょう。
まずは予備知識として「HTMLファイル」と「CSSファイル」について簡単に説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

この説明を書いている時点では、ホームページは

・内容が書いてあるファイル
・見た目が書いてあるファイル
・絵が描いてあるファイル
・動作が書いてあるファイル

の4種類のファイルを組み合わせて1つのページを表示するのが主流です。



内容が書いてあるファイルは「HTMLファイル」と呼ばれています。
「HTML」と呼ばれる書き方ルールに沿って書くからHTMLファイルです。



HTMLファイルは内容を書いておくファイルです。
ページの核となるファイルですね。

見た目が書いてあるファイルは「CSSファイル」と呼ばれています。
こちらも「CSS」と呼ばれる書き方ルールに沿って書くからCSSファイルです。



CSSファイルは見た目に関するルールを書くファイルです。
例えば

・ホームページの横幅はどれくらいにしよう
・この目印を付けた文字の色は何色にしよう
・この目印を付けた範囲に背景を付けよう

などのルールを書いておきます。

あと、ついでなので書いておくと、絵が描いてあるファイルは「画像ファイル」です。



画像ファイルは説明しなくても分かりますよね？

動作が書いてあるファイルは「JavaScriptファイル（jsファイル）」と言います。



JavaScriptファイルは「動作」を定義するファイルです。
例えば

・ページを表示するときに、こんな動きをしてよ
・他のページに移動するときに、こんな動きをしてよ
・このボタンを押したら、こんな動きをしてよ

などの指示を書いておきます。

これら4種類のファイル

・HTMLファイル（内容）
・CSSファイル（見た目）
・画像ファイル（絵）
・JavaScriptファイル（動作）

が組み合わさることによって、ホームページの中の1ページが形作られています。



以上を踏まえて、本題に入ります。

昔はパソコンからホームページを見るのが、ほとんどでした。
そのため、ホームページを表示する画面の大きさも、ある程度は決まっていたのです。
ホームページを作る人は、それに合わせてデザインしていました。

ところがどっこい、今の時代は違います。
スマホのような小さい画面からホームページを見ることもあります。

スマホの画面からホームページを見る場合、パソコン用のデザインでは見難くて仕方がありません。
そこで頑張り屋さんな人たちが、パソコンから見たらパソコン用のホームページを、スマホから見たらスマホ用のホームページを表示するように工夫をこらしました。



これでパソコンでもスマホでも見やすいはずです。

余談ですが、今あなたが見ているこのページもそうです。
パソコンから見たらパソコン用、スマホから見たらスマホ用、携帯電話から見たら携帯電話用のページを表示するように作ってあります。
見た目は1つのホームページですが、実際には3つ（パソコン用、スマホ用、携帯電話用）のホームページが用意されているのです。

しかし、このやり方にも弱点が ありました。

それは

1つのホームページを表示するのに2つ以上のページを作らなくてはいけないこと

です。

ホームページを見てくれる人の目に触れるのは1つですが、実際にはパソコン用のホームページとスマホ用のホームページの2つがあります。
あらかじめ複数のホームページを用意しておかないといけないのです。

これを面倒だと考える人がいました。
そんな人たちは、発想を変え、1つのホームページをいろんな大きさの画面でキレイに見せるように努力したのです。

この説明を書いている時点のホームページの作り方は

・「何を見せるか」をHTMLファイルに書く
・「どう見せるか」をCSSで（CSSファイルに）書く

のが主流です。

ということは、ですよ。

CSS（使うCSSファイル）を変えれば見た目が変わるんじゃね（－－？

と推測できます。

なるほど！
確かに、そうですね。

CSSファイルの中に「文字の大きさは、どうしますよ～」「ここの色は、こうしますよ～」といった指定が書いてあります。
それなら、使うCSSファイルを変えればページの見た目を変えられます。

先人たちは、もう一歩、考えを進めました。

パソコンからホームページを見たときは、HTMLファイルとパソコン用のCSSファイルを使って表示します。
そうすると、パソコン用のデザインでホームページが表示されます。



スマホからホームページを見たときは、HTMLファイルとスマホ用のCSSファイルを使って表示します。
そうすれば、スマホ用のデザインでホームページが表示されます。



「どう見せるか」のCSSファイルは複数用意する必要がありますけどね。
「何を見せるか」のHTMLファイルは1つで済みます。



おぉ、これならパソコン用のページとスマホ用のページを別に作らなくて良いですね。
素晴らしい！

このような

ページ（HTMLファイル）は1つだけど、CSSを調整することで、いろんな大きさの画面に対応させるWebデザインのやり方

が「レスポンシブWebデザイン」です。



例えば、パソコン用のCSSファイルとスマホ用のCSSファイルを別に用意しておいて、パソコンから見たかスマホから見たかで適用するCSSファイルを切り替えます。
HTMLファイル自体は1つなので丸々別に用意するよりは作るのが楽だよね、な理屈です。



なお「パソコン用のCSSファイル」「スマホ用のCSSファイル」と書きましたが、実際には画面の大きさで切り替えることが多いはずです。
例えば「横幅が960px以上の画面だったら、この見た目にしますよ～」「横幅が320px～960pxだったら、この見た目にしますよ～」のような切替ですね。
また、CSSファイル自体を切り替えるのではなく、1つのCSSファイルの中で使うスタイルを切り替える場合も あります。

レスポンシブWebデザインのメリットはHTMLファイルが1つで済むことです。
パソコン用とスマホ用のページを別に作っていた場合は、中身を変更するときに複数のHTMLファイルに手を入れることになります。
レスポンシブWebデザインでは手を入れるHTMLファイルは1つで済みます。
作る量と変更する量が少なくて済むわけです。

一方のデメリットは構造が複雑になりやすいことでしょうか。
あれもこれもを1つに盛りこんでしまいますからね。
ややこしいことになりやすいですし、変更するときに考慮しなくちゃいけないことが、いろいろ出てきます。