1. 【レスポンシブWebデザイン】とはデバイス画面の横幅によって表示を切り替える機能である
ではまずはじめに、「レスポンシブWebデザインとは」から解説しますね。
この話、開発者よりの内容もありますが、レスポンシブWebデザイン自体がシステムですので、どうしても専門用語を使ってお話しなければなりません。
ご閲覧いただいている一般の方々でも簡単に理解できるようには努力しますので、前置きとしてご理解いただければと思います。
まず知っておいてほしい言葉として、「HTMLファイル」という言葉と「CSSファイル」があります。
「HTMLファイル」というのは主に本文内容が書かれたファイルであり、今みなさんが読まれているこの文章はHTMLファイルに書いて設定しています。
機械はどの文章がどういう役割をしているのかわかりませんので、HTMLファイルにてこれはタイトルですよとか、これは見出しですよとか、ここはリスト形式ですよとか、文章だけでなく文章の意味合いも設定してあげます。
要はHTMLファイルは「文章」と「文章の意味合い」を設定していると覚えておいてください。
他にも画像ファイルの呼び出し設定やページのリンク設定とかもしていますが、知らなくても問題ありませんのでもっと知りたい方はググってみてください。
次に「CSSファイル」についてですが、これは文字の大きさや背景色、余白などを設定する修飾用のファイルです。
要するに、見た目を変えるのがこのCSSファイルの役目です。
「HTMLファイル」と「CSSファイル」という２つの言葉の意味がわかったところで、さっそく「レスポンシブWebデザインとは」という本題に入りますね。
みなさんは同じWebサイトを複数のデバイス（スマートフォン、タブレット、パソコンなど）で見たことはありますか？
２つのデバイスで確認できる方は、このウエノロジーブログを見比べてみてください。
スマートフォンで見たときとパソコンで見たとき、カラムレイアウトや文字の大きさはまったく同じように表示されましたでしょうか？
ちなみにカラムレイアウトがわからないという方は、下のブログで解説していますのでさくっとマスターしてきてくださいね。
Webサイトのページデザインはなんとなく作られているわけではありません。ユーザーが見やすいように、かつ情報を受け取りやすいように最適化されて構成されています。その手法として「カラムレイアウト」というものがあります。カラムレイアウトについての知っておくべき知識や選び方などの基礎的な解説をします。
スマートフォンとパソコンのように、まったくサイズ感の違うデバイスで見た時が１番わかりやすいのですが、表示されている内容は同じでも、見た目は全然違いましたよね。
例えばこのブログのように、スマートフォンで見たときは１カラムレアイウトだったがパソコンでは２カラムレイアウトだった、とかですね。
これは単純に、「パソコンでは画面が比較的大きいので２カラムレイアウトで表示するのが見やすく、スマートフォンでは画面が小さいので１カラムレイアウトが見やすい」、というサイト運営側の判断に基づくものです。
ちなみにその大きいだの小さいだのの基準は、Web業界では表示画面の横幅で判定します。
このようにサイズ感の異なるデバイスで、見やすい表示に切り替えることを「レスポンシブWebデザイン」といいます。
HTMLファイルは１つで管理しているので、どのデバイスで見ても表示される内容は同じです。
ただ見やすさを管理しているのは先ほども解説しましたがCSSファイルで、「いくつからいくつの画面の横幅の場合はこのように表示する」といった具合に、表示するデバイス画面の横幅によって見た目を切り替えるように設定します。
開発側としてもそれぞれ１つのHTMLファイルとCSSファイルで管理できるので、急な変更にもすぐに対応できるのが嬉しいポイントです。
そう、「急な変更にもすぐに対応できる」のです！
ひと昔前、まだレスポンシブWebデザインがなかった頃、まだ時代はガラケー全盛期だったときはパソコン用のWebサイトとガラケー用のモバイル専用サイトを別個に作る必要がありました。
もちろん、それぞれ管理しているファイルも別になりますので、何か変更があった場合は該当する箇所を複数のファイルにまたがって変更する必要がありました。
例えばWebサイトでクリスマス用のキャンペーンを告知するとなった場合に、パソコン用のファイルとモバイル用のファイル両方に変更を加えなければなりません。
ということは、リスクマネージメントとしては、当然「変更漏れ」を考える必要がありますよね。
少し変更を加えるだけでもかなりの手間であったことはいわずもがな。
時は流れてスマートフォンが流行り始め、デバイスの横幅も様々なものが登場するようになりました。
さすがにこのままではWebサイト制作が大変だ、何か良い手はないか、となって開発されたのが「レスポンシブWebデザイン」なのです。
レスポンシブWebデザインが開発されてからは、HTMLもCSSも１つのファイルで管理できるようになりましたので、Webサイトもデバイスごとに用意する必要がなくなりましたし、先ほどのような「変更漏れ」を考えなくて良くなりました。
１か所の変更で済みますので、昔に比べて本当にメンテナンス性が非常に高くなったのです。
なので「急な変更にもすぐに対応できるのが嬉しいポイント」と言ったわけです。
いや～、素晴らしいですねレスポンシブWebデザイン！
考えついた方は本当に天才です。
この話の内容は完全に開発者よりの内容ですが、こういったことを一般の方にも知っておいていただけるとWebサイト開発への理解が深まりますし、なにしろITリテラシーも上がるので知っておいて損はないですよ。
余談ですが、「レスポンシブWebデザインを使用しますよ」という宣言文を書くのも、じつはこの「HTMLファイル」なんです。
ウエノ