[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

レスポンシブwebデザイン (responsive web design)

pointこの用語のポイント

pointホームページの作り方だよ

point1つのページでいろんな大きさの画面に対応するよ

pointHTMLファイルは1つでCSSファイルを切り替えることで対応するよ

スポンサーリンク

簡単に書くよ

レスポンシブwebデザイン (responsive web design)とは

1つのページでいろんな大きさの画面に(何となく)対応できるホームページの作り方のこと
です。

image piyo

詳しく書くよ

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

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

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

これで、パソコンでもスマホでも見やすいホームページの出来上がりです。

レスポンシブWebデザイン

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

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

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

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

2015年10月現在のホームページの作り方は

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


のが主流です。

ということはですよ。

CSSを変えれば見た目が変わるんじゃね(--?

と推測することができます。

なるほど、確かにそうですね。
CSSで「文字の大きさはどうしますよ~」「ここの色はこうしますよ~」と指定します。
CSSを変えれば画面の見た目は変わります。

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

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

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

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

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

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

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

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

このように「ページ(HTMLファイル)は1つだけど、CSSを調整することでいろんな大きさの画面に対応させるWebデザインのやり方」が「レスポンシブWebデザイン」です。

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

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

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

なお「パソコン用のCSS」「スマホ用のCSS」と書きましたが、実際には画面の大きさで切り替えを行うことが多いです。
例えば「横幅が960px以上の画面だったらこの見た目にしますよ~」「横幅が320px~960pxだったらこの見た目にしますよ~」のような切替ですね。

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

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

image piyo2

一言でまとめるよ

まぁ「レスポンシブWebデザイン」って単語が出てきたら「1つのホームページをいろんな大きさの画面で綺麗に見せるやり方なんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク