HTML入門：どんな画面でもキレイに見せる！簡単レスポンシブデザイン

ウェブページを作る時、パソコンだけじゃなくて、スマホやタブレットで見てもキレイに見えるようにしたいですよね？それを簡単に実現できるのが、「レスポンシブデザイン」です。特に「メディアクエリ」という魔法の言葉を使うと、画面の大きさに合わせてデザインを変えることができます。

メディアクエリって？

メディアクエリは、画面のサイズによってスタイル（ウェブページの見た目）を変えるためのルールです。これを使うと、小さい画面では大きな文字、大きい画面ではさらに大きな文字といった具合に調整できます。

どうやって使うの？

スマホ用にデザインを調整

/* スマホ用のスタイル */
@media (max-width: 600px) {
  body {
    background-color: lightblue; /* 背景色を変える */
  }
  h1 {
    font-size: 16px; /* 文字の大きさを小さく */
  }
}

このルールでは、「画面の幅が600ピクセル以下なら、背景をライトブルーにして、見出しの文字を小さくする」と言っています。

パソコン用にデザインを調整

/* パソコン用のスタイル */
@media (min-width: 601px) {
  body {
    background-color: pink; /* 背景色を変える */
  }
  h1 {
    font-size: 32px; /* 文字の大きさを大きく */
  }
}

こちらは、「画面の幅が601ピクセル以上なら、背景をピンクにして、見出しの文字を大きくする」としています。

まとめ

メディアクエリを使えば、どんなデバイスで見てもウェブページがキレイに見えるように調整できます。画面が小さい時と大きい時で、デザインを変えてみましょう。これで、あなたもレスポンシブデザインの基本をマスターしました！