CSS入門：メディアクエリでウェブページをどんな画面でもキレイに見せよう！

今の時代、ウェブサイトを見るデバイスはいろいろ。スマホ、タブレット、パソコン…。それぞれ画面の大きさが違うから、同じウェブページも見え方が変わってきます。でも大丈夫！メディアクエリがあれば、どんなデバイスでもウェブページをキレイに見せることができます。

メディアクエリってなに？

メディアクエリは、画面の大きさに合わせてウェブページのスタイルを変えられる特別なルールです。これを使うと、画面が小さい時は文字を小さくしたり、大きい画面では大きな文字で表示させたりすることができます。

メディアクエリの使い方

スマホで見やすくする

/* スマホ用のスタイル */
@media (max-width: 600px) {
  body {
    background-color: lightblue; /* 背景色をライトブルーに */
  }
  h1 {
    font-size: 16px; /* 見出しの文字サイズを小さく */
  }
}

このCSSは、「画面の幅が600ピクセル以下の時、背景色をライトブルーにし、見出しの文字サイズを小さくする」という指示をしています。

パソコンで豪華に見せる

/* パソコン用のスタイル */
@media (min-width: 601px) {
  body {
    background-color: pink; /* 背景色をピンクに */
  }
  h1 {
    font-size: 32px; /* 見出しの文字サイズを大きく */
  }
}

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

まとめ

メディアクエリを上手に使うことで、どんな画面サイズのデバイスで見ても、ウェブページが最適なスタイルで表示されるように調整できます。画面が小さい時と大きい時でデザインを変えてみると、ユーザーにとって読みやすく、使いやすいウェブサイトになります。