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

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

RWD

pointこの用語のポイント

point「レスポンシブwebデザイン」の省略表現だよ

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

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

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

スポンサーリンク

簡単に書くよ

RWDとは

「レスポンシブwebデザイン」のこと。
つまり

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

image piyo

詳しく書くよ

レスポンシブwebデザインは「1つのホームページをいろんな大きさの画面で綺麗に見せるやり方」ね。

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

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

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

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

RWD

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

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

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

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

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


のが主流です。

ということはですよ。

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

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

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

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

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

RWD2

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

RWD3

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

RWD4

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

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

RWD5

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

RWD6

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

……おっと、このページは「レスポンシブWebデザイン」の説明ページではなく「RWD」の説明ページでした。

うっかりしていました。
ごめんなさい。

それでは本題です。

ここまでを踏まえて、いつの頃からか登場した「レスポンシブWebデザイン」の省略表現が「RWD(アールダブリューディー)」です。
Responsive Web Design(レスポンシブ・ウェブ・デザイン)」の省略表現で「RWD」ね。

私がレスポンシブWebデザインを勉強した当時は「RWD」なんて言ってる人はいなかったのですけどね。
やっぱり、長ったらしいIT用語は、省略されてアルファベット3文字にされる運命にあるようです。

image piyo2

一言でまとめるよ

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

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