CSS入門：レスポンシブデザインってどうやるの？

ウェブサイトを作る時、スマホやパソコンなど、いろんなデバイスでキレイに見えるようにしたいですよね。その鍵を握るのが「レスポンシブデザイン」です。では、どうやってそれを実現するか、基本的な3つのポイントを見てみましょう。

写真や画像を賢く使おう

画像が大きすぎると、スマホで見る時に画面からはみ出てしまうことがあります。これを防ぐには、画像がコンテナ（画像を入れる枠）に合わせてサイズが変わるようにしましょう。こんな感じで：

CSS

img {
  max-width: 100%;
  height: auto;
}

これで、画像が枠からはみ出ることなく、いつもピッタリフィットします。

ウェブページの構造もまた、スマホやパソコンに合わせて変わるべきです。これには「流動的なグリッド」を使います。グリッド（マス目）のサイズをパーセンテージで設定すると、画面の大きさに関係なく、いつもいい感じに整います。

CSS

.container {
  width: 80%;
}

このコードは、コンテナの幅を画面の80%にするという意味です。

画面が小さい時には、文字も小さくなりすぎて読みづらいことがあります。逆に、大きい画面で文字が小さすぎると、空間がスカスカに見えてしまうことも。そこで、画面のサイズに合わせて文字サイズを調整しましょう。

CSS

body {
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

この例では、画面が600ピクセル以下の時には、文字サイズを少し小さくしています。

レスポンシブデザインを実現するには、画像を賢く使い、ページのレイアウトを柔軟にし、文字サイズも適切に調整することが大切です。これらを心がければ、どんなデバイスで見てもキレイなウェブサイトになりますよ。