こんばんは!今日はレスポンシブデザインという物の説明です。

レスポンスデザインとはどのような物なのか?

WEBサイトがあり、そのページをパソコンで見ているとします。
スマートフォンやタブレットなど、別のデバイスで見てもキレイに表示されていれば、そのページはレスポンシブデザインです。

レスポンシブデザインが登場するまでは、パソコン / スマートフォン / タブレットなど、アクセスするデバイス毎に専用のHTMLやCSS、URLを用意して表示させていました。

・パソコンのURL
https://〇〇〇〇〇/index.html

・スマートフォンのURL
https://〇〇〇〇〇/sp/index.html

・タブレットのURL
https://〇〇〇〇〇/tb/index.html

index.htmlの前に「sp」「tb」などをつけてURLを分け、ユーザー(訪問者)がどのデバイスでアクセスしたかによって、表示を変えるよう設定する。
この場合、それぞれのHTMLに対応するCSSを用意する必要があります。
少なくともHTMLを3つ、CSSを3つ、合計6つは制作しないといけません。

また別のパターンとして、パソコンの表示をそのままスマートフォン/タブレットで表示していることもあります。
その場合、画面に収まりきらない部分は見切れた状態になり横にスクロールをして見るか、小さく表示させます。
しかし、この表示方法だとコンテンツが隠れてしまったり、「文字が小さすぎて読めない!」となったりします。

こういった面からレスポンシブデザインの良い点としては、

・ユーザーが見やすいサイトになる

・どのデバイスで見ても同じHTMLを表示するので、変更するファイルが少なくて済む。

といった点です。実際今世の中にあるウェブサイトは、ほぼほぼレスポンシブデザインのサイトだと思います!

つまりレスポンシブデザインの需要が主流でこの言葉は覚える必要があるということですね!

毎日確実に知識増えてるwww

今日も知識ありがとうございます!