SUNABACO 
デバイスに合わせてWebページのレイアウトを変更できることは、Web開発の重要な要素です。
現代テクノロジーでは、同じサイトまたはアプリケーションを表示する方法はたくさんあります。たとえば、ウィキペディアを例にとってみましょう。ウィキペディアは、ラップトップ、デスクトップ、タブレット、などで閲覧できます。これらすべてのデバイスで同じ情報が表示されることが重要ですが、13インチのラップトップでモバイルデバイスと同じWebページをフォーマットすることはできません。
つまり、開発者は、ユーザーが使用している可能性のあるデバイスを考慮に入れる必要があります。スマホやタブレットの登場によって特に必要不可欠になったのが、レスポンシブデザインです。
CSSを使用しないプレーンHTMLはすでにレスポンシブであるということです。 基本的なHTMLドキュメントを作成するだけで、これを確認することができます。CSSを追加したり、開発者ツールを開いたりしないせず、そこから[デバイスツールバーの切り替え]をクリックすると、デバイスに応じてウェブページがどのように変化するかがわかります。
CSSがないと、テキストが両方のデバイスのディスプレイまたはビューポートに収まるんですよね。ただ、CSSがないとサイト自体はやぼったくなってしまう。
CSSスタイルを追加すると、ビューポートの表示が変更され、他の画面でフォーマットの問題が発生する可能性があります。もちろん、Webアプリを構築するときは、HTMLを使用するだけでは物足りないので、Webページの見栄えを良くするためにCSSを追加しますね。CSSを使用してHTML要素のサイズを変更すると、クロスプラットフォームのフォーマットの問題が発生する可能性が出てきます。ウェブページをレスポンシブにする方法に飛び込む前に、これらの問題を見てみましょう。
画像の幅を2000pxに設定するとします。この場合、デスクトップのビューポートの大部分を占めますが、スマホでは、幅がスマホのビューポートのサイズよりも大きいため、画像の一部が切り取られて表示されます。
みたいな！！ スマホとPCでは画面の大きさが異なりますからね。
逆に固定幅を追加すると、画面サイズが変化しても画面と比較した幅が変化しないため、レスポンシブデザインで問題が発生します。ピクセルを使用する代わりに、ブラウザのビューポートを考慮に入れた相対的な幅を使用することをお勧めします。
画像の幅を2000pxに設定する代わりに、画像の幅を100％に設定すると、次のようになります。
スマホの画面幅に合わせて、画像が表示されます！
幅を100％に設定すると、画像の幅がスマホのビューポートの幅と一致することがわかります。
レスポンシブデザインでもう一つ知っておいて欲しいのが、メディアクエリです。メディアクエリを使用すると、画面サイズに基づいてCSSをカスタマイズできます。 画像の幅を50％に設定するCSSクラスがあるが、スマホでは、同じ画像の幅を100％にしたいとします。
.image {
width: 50%;
}@media only screen and (max-width: 950px) {
.image {
width: 100%;
}
}
これを試してみると、メディアクエリが、950px未満の幅の画面である多くのモバイルデバイスで機能することがわかります。メディアクエリ内で、画像クラスの幅を100％に変更しています。
レスポンシブデザインの主なポイントは、固定幅と絶対位置を使用しないようにする必要があるということです。スタイリングが他のデバイスのビューポートに与える可能性のある影響を忘れないでください。開発者ツールを使用して変更を確認しながら、メディアクエリを使っていきましょう。
References
https://www.w3schools.com/css/css_rwd_intro.asp
https://jacob-kagon.medium.com/intro-to-responsive-design-in-css-66113854847e