【HTML&CSS】レスポンシブサイトって？簡単に解説します。

最近のホームページは、パソコン・スマホ・タブレットなど、画面サイズに合わせてレイアウトが変わります。

これを「レスポンシブデザイン」と呼びます。

レスポンシブ（responsive）は直訳すると、「反応が良い」「敏感に反応する」という意味になります。

ですので「レスポンシブサイト」は、「画面サイズに応じて柔軟にレイアウトが変化するサイト」ということですね。

昔は、「PC用サイト」「スマホ用サイト」と分けて作られることが多かった（場合によっては「iモードサイト」もｗ）ですが、現在は１つのサイトで、画面幅に合わせてHTMLのレイアウトが切り替わる方法が主流です。

ちょっと時系列でどのような変遷があったのか、ご紹介いたします。

■黎明期：２～３つの専用サイトを作る。

先ほども述べたように、

「PC用サイト」

「iモード用サイト」

「スマホ用サイト」

を作っていた時代があります。

これ、更新がすごく大変で・・・(^^;)

1つのテキストを修正するだけで、3か所（3倍）の修正が必要でした。

・・・端末って、たくさんの種類作られると、制作の人間はたまったもんじゃないです(笑)

それぞれの専用サイトが作られ、ちょっと技術のあるところだと、

PHPで判別させてリダイレクトかけるとかやってました。

（そうでないところは、そのまま放置(笑)　Googleも「モバイル」と「PC」で検索結果を分けておりました）

■JavaScript で表示を切り替える手法（このあたりからレスポンシブっぽい）

JavaScript は、Window幅を取得できるので、

window.onresize = function(){
    if (window.innerWidth <= 640) {
        document.body.className = "smt";
    } else {
        document.body.className = "";
    }
}

とかで、bodyタグにクラス名を追加して、スマホ認定させたりしておりました。

CSSの方も

.example {～～～～～}
.smt .example {～～～～～}

と2パターン用意してあげれば、PCとスマホの表示に対応できるというわけです。

■JavaScriptすら使用しなくてもよくなった、「メディアクエリ」の登場！

いろんな端末の登場で、あらゆる画面幅が使われだしたので、それに対応するように

CSSにおいて革命となる「メディアクエリ」なるものが登場いたしました！

どんなものかといいますと、

.example {～～～～～}
＠media (max-width:768px){
    .example {～～～～～}
}

ここでの ＠media (max-width:768px){} は、

「768px 以下だったら、このCSSを適用します」というめちゃくちゃ便利な命令なんですね。

つまり、「画面幅によってCSSを切り替える」仕組みです。

これによって、前出のJavaScriptと同じことを、CSSのみで出来るようになりました！

JavaScript無使用ですし、リサイズイベントも必要ないので軽くて、本当に革命でした！！

■レスポンシブデザインのメリット

これに関しては、もう２～３つサイト作っていた時と比べると、えらい違いですよね。

・更新が1回で済む
・URLが1つに統一されるため、SEO面でも扱いやすくなります。
・管理が楽
・端末が増えても対応しやすい

このレスポンシブデザインによって、PC～タブレット～スマホ と、いろいろ端末が変わってもそれに合わせて表示されるようになるので、

これから他の端末が増えたとしても対応していけるようになりました。

■ちょっと過去の思い出話

で、レスポンシブが流行り始めたころ…昔の職場での話ですが、

「全部のサイトをレスポンシブ化しろ」

というお達しが出まして(笑)

当時、その社内でのPCのみの表示のサイトがおよそ100以上ありまして、めちゃくちゃ苦労した記憶があります(^^;)

１サイトを１～２日でレスポンシブ化しても、およそ１年はかかるので、まあまあしんどい思いをいたしました。

■最近の話

ときどき縁があって他企業のサイトに触れることもあるんですが、

昔からリニューアルされていないサイトは、レスポンシブ化していないサイトもちらほら見受けられます。

そういったサイトは、スマホでの需要を逃している可能性がありますので、とてももったいない状況にあるといえます。

現在は、多くのサイトでアクセスの大半が「モバイル」からになっています。

「PC」からのアクセスから逆転して、もう７～８年ほどになると思います。

ちょっと古いサイトを活かしつつ、新たにモバイルからの需要も取り込めるようにしてみるのもよろしいのではないでしょうか？

「古いホームページだけど、リニューアルするほどではない」
「サイトをスマホで見やすくしたい」

そんなご相談もお気軽にどうぞ。

ホームページのレスポンシブ化、ご依頼お待ちしております☆