どうも。
WEBおじさんです。
今回は技術的なお話ではなく、ドがつく初心者さんの為の理屈のお話ですので、分かってるよっていう方々は無視して広告クリックしていろんなもの買ったり契約したりしてくださいｗｗｗ
ということで、今回は「レスポンシブ」というものについてのお話です。
レスポンシブとは、簡単に言うとPC、タブレット、スマホなどのどのデバイスで見てもそれに対応したレイアウトで表示され、昔のようにデバイスが変わるとレイアウトが崩れるということがないコーディングのことを言います。
これは、昔のようにPCとガラケーという2つのデバイスだけではなく、スマホ、及びタブレットの普及率や多様化によってサイトのレイアウトが大きく崩れたり横スクロールが表示されることで、非常に見づらいサイトになることを防ぐための手法です。
最近は少なくとも8割くらいのサイトはレスポンシブなんじゃないですかねー。
それぐらい、現在は「レスポンシブ」サイトが普及していますし、その技術も普及しています。なので、現在のHTMLのテンプレートみたいなものの多くはレスポンシブに対応したものになっていると思います。
と、まぁここまでは基本的なお話です。
次に、技術的なお話になります。
通常レスポンシブとは、HTMLは一つ、CSS内で各デバイスに対応させたスタイルを書いて作ることが原則です。
昔はPCとガラケーしかデバイスがなく、またそのデバイスというか、ブラウザですね。ブラウザの仕様がそれぞれのデバイスであまりにも異なり、また回線速度やデバイスのスペックも低かったために同じ画像が使えなかったりHTMLも同じものが使えないケースが多かったため、それぞれのデバイスに合わせたHTMLを作る必要がありました。
そしてガラケーからPC版にアクセスがあったらガラケー版へ、PCからガラケー版にアクセスがあったらPC版へリダイレクトさせるように作っていました。
現在は回線速度やデバイススペック、ブラウザ仕様がPCとそん色ないものになっているため、画像やファイル自体にはほぼ気を使うことなくサイトを作ることができるようになりました。
しかし、どうしてもスマホに関しては持ち歩くものなのでデバイス幅に気を使う必要があり、その幅に合わせてレイアウトし直すようにCSSを追加するようになりました。
これがレスポンシブサイトです。
．．．あれ。なんか、同じこと言ってますか？ｗ
しかし、ここに屁理屈が発生します。
先ほど、私は「HTMLは一つでCSS内で各デバイスに対応させたスタイルを書いて作る」と書きました。
これをちょっと勘違いした作り方をした下請けさんが登場したのです。
確かにHTMLは一つなんですけど、大きく要素を2つに分け、片方はPC用、片方はスマホ用、ということでデバイス幅によって片方をdisplay:noneにする、という技を使っているのですｗ
まぁ、これってレスポンシブを作り始めた人はやりがちなんですかね？
実は私もやってましたｗ 完全に手抜きですねｗ
これはハッキリ言って反則技ですｗ
なぜかというと、これ、考え方に根本的な誤りがあります。
確かにレスポンシブといえばそうかもしれないんですけど、厳密にはHTMLは2つと言っていいでしょう。
PC用とスマホ用のHTMLがそれぞれ1つ、合わせて2つですよね？
レスポンシブってこういうことじゃないんです。
そもそもdisplay:noneの部分は無駄なHTMLってことですよね？
これは容量の無駄になるのです。
モノづくりの根本的な部分としては、無駄なものは省いて最小限の容量でできる限り容量を軽くして作るのです。
なので、「一つのHTML」というのは「同じHTML表示で」とでもいうんですかね。できるだけdisplay:noneを使わずにデバイス幅に合わせたレイアウトスタイルを構成させるのです。
これがレスポンシブサイトなのです。
覚えておいてくださいね。
レスポンシブサイトはdisplay:noneで操作するものではありません。デバイス幅に合わせてHTMLを操作するのです。
ということで、今回は理屈と考え方のお話しでした。
どこかのテキストに書いてありそうな内容でしたねｗ
display:noneで操作して作っている方がいましたら、この機会に考え方を改めて下さいね。
以上、WEBおじさんでした！
