レスポンシブとは

• レスポンシブの必要性
• レスポンシブの実装方法

レスポンシブとは「レスポンシブWEBデザイン」の略語で、異なるデバイス（PC、タブレット、スマートフォンなど）でWebサイトが適切に表示されるようにするデザイン手法のことです。

画面サイズに応じてレイアウトが変わるように設計されているため、同じコンテンツがどのデバイスでも読みやすく、操作しやすくなります。
これにより、ユーザーはどのデバイスでも快適にサイトを閲覧することができます。

レスポンシブの必要性

1. デバイスの多様化
   現代では、PCだけでなくスマートフォンやタブレットでWebサイトを見る人が増えており、どのデバイスでもWebサイトが見やすく、使いやすくしておく必要があるためです。
2. スマホ利用の増加
   スマートフォンの普及率が高まり、今では多くの人がパソコンよりもスマートフォンでインターネットを利用しています。そのため、スマートフォンでの使いやすさが重要となっているためです。
   令和4年版 情報通信白書｜総論
3. GoogleのSEO対策
   Googleはモバイルファーストインデックスを導入し、スマートフォン向けのサイトを重視しています。レスポンシブデザインを採用することで、1つのサイトで多くのユーザーに対応し、検索結果での表示が向上するためです。

非レスポンシブとレスポンシブの比較

非対応の場合はPC表示のままになっており、スマートフォンでは文字や画像が小さすぎて見にくくなってしまっています。
一方で、レスポンシブ対応済の場合は文字も画像も見やすく調整されています。

レスポンシブの実装方法

1. htmlファイルのhead内に「meta viewport」を追加
   「meta viewport」とは、htmlのmeta要素とname属性の属性値のことです。htmlのhead内に下記の記述を行います。
   このように、meta要素にname属性（viewport）を記述し、さらにcontent属性（width=device-width, initial-scale=1.0）を記述するのが、Googleが推奨しているviewportの設定方法となります。
2. CSSファイルにメディアクエリを用いてブレイクポイントを設定
   ブレイクポイントとは、デバイスの画面幅に応じてCSSを切り替えるポイントのことです。
   これにより、CSSの記述のみで異なるデバイスで最適なレイアウトに自動的に切り替えることができます。
   ブレイクポイントを指定する際には、「メディアクエリ」を使用します。
   
   例）画面幅が768px以下であればこのCSSを適用する場合

   @media screen and (max-width: 768px){
   　※ここにスマートフォン表示に適用させるCSSを記述
   }

   
   ※メディアクエリについては次のステップで詳細を説明します。

以上が、「レスポンシブとは」についての説明でした。

次のステップで、「メディアクエリ」について説明していきます。