• Home
  • Web制作
  • 【初心者必見】CSSメディアクエリでスマホ対応も自由自在！使い方を徹底解説

【初心者必見】CSSメディアクエリでスマホ対応も自由自在！使い方を徹底解説

schedule update
Tags: CSS

はじめに

Webサイトを閲覧する際に、パソコン、タブレット、スマートフォンなど、様々なデバイスが使われていますね。これらのデバイスは画面サイズや解像度が異なるため、同じWebサイトであっても、デバイスによって見え方が変わってしまいます。

例えば、パソコンで快適に見えていたWebサイトが、スマートフォンでは文字が小さすぎて読みにくかったり、レイアウトが崩れて見づらくなってしまうことがあります。

そこで登場するのが CSSメディアクエリ です。メディアクエリを使用すると、デバイスの画面サイズや向きに応じてスタイルシートを切り替えることができます。これにより、様々なデバイスで快適に閲覧できるWebサイトを作ることができるのです。

あわせて読みたい
【CSS入門】Webページを彩るスタイルシートの基本から応用まで徹底解説！

メディアクエリとは？

メディアクエリとは、CSSの機能の一つで、特定の条件下でのみスタイルを適用させることができます。

例えば、「画面の横幅が768px以下の場合にのみ適用されるスタイル」や「画面の向きが横向きの場合にのみ適用されるスタイル」などを定義することができます。

これにより、デバイスの画面サイズや向きに応じて、最適なスタイルを適用することが可能になります。

メディアクエリの基本的な構文

メディアクエリは、@mediaルールを使用して記述します。基本的な構文は以下の通りです。

@media (条件式) {
  /* 条件式に合致する場合に適用されるスタイル */
}

条件式の部分には、画面サイズや向きなどの条件を指定します。

メディアクエリでよく使う条件

メディアクエリでよく使う条件は以下の通りです。

  • min-width: 指定した幅 以上 の場合にスタイルを適用
  • max-width: 指定した幅 以下 の場合にスタイルを適用
  • orientation: 画面の向きが縦向き(portrait)か横向き(landscape)かを指定

これらの条件を組み合わせることで、より複雑な条件を指定することも可能です。

メディアクエリの実践例

スマートフォン向けのスタイルを適用する

Webサイトをスマートフォンで快適に見せたい場合、画面幅が特定の値以下の場合にのみ適用されるスタイルを定義します。

例えば、画面幅が768px以下の場合にのみ、コンテンツの幅を90%にするには、以下のように記述します。

@media (max-width: 768px) {
  .content {
    width: 90%;
  }
}

タブレット向けのスタイルを適用する

同様に、タブレット向けのスタイルを適用したい場合は、画面幅が768px以上、1024px以下の場合にのみ適用されるスタイルを定義します。

@media (min-width: 768px) and (max-width: 1024px) {
  .content {
    width: 80%;
  }
}

画面の向きに応じたスタイルを適用する

画面の向きに応じてスタイルを変更したい場合は、orientationを使用します。

例えば、画面の向きが横向きの場合にのみ、サイドバーを非表示にするには、以下のように記述します。

@media (orientation: landscape) {
  .sidebar {
    display: none;
  }
}

まとめ

この記事では、メディアクエリの基礎知識から具体的な使用方法まで解説しました。メディアクエリを活用することで、様々なデバイスで快適に閲覧できるWebサイトを作ることができます。

ぜひ、この記事を参考に、メディアクエリをマスターしてください！

関連記事