• Home
  • 未分類
  • CSSのメディアクエリを使ってレスポンシブレイアウトを実現する方法

CSSのメディアクエリを使ってレスポンシブレイアウトを実現する方法

こんにちは！ぐちです。

メディアクエリ

CSSで使うメディアクエリってご存知ですか？アクセス元の画面幅などに従って適用するCSSを切り替えるぐらいの知識しかなかったのですが調べてみてなるほど〜となったのでご紹介しますね！

ちなみにとあるサイトでは

CSS スタイルに適用できるシンプルなフィルタです。 メディア クエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようになります。

とあります。どういうことかというのは後述します。笑

ビューポートのサイズ

HTMLのmeta情報でviewportというものがあります。簡単にご説明しますとコンテンツの幅をどう表示するかということです。(語弊を恐れず思い切って書いてます。笑)

スマホ最適化をしているページ等では以下のように書いていることがありますよね。

<meta name="viewport" content="width=device-width,initial-scale=1">

これはどういうことを指すかといいますと「端末の幅をコンテンツの幅として表示します。」ということになります。実は僕もよくわかっていないので詳しくはググってください。笑

メディアクエリ

そしてですね、上記のビューポートのサイズに基づいてメディアクエリを適用する方法が下記となります。

@media (query) {
  /* CSSルール */
}

<link rel="stylesheet" media="(query)" href="pc.css">

レスポンシブデザインを実現するためによく使われるメディアクエリが下記となります。

  • min-width
    • ブラウザの幅がクエリに定義された値より広い場合にルールが適用されます。
  • max-width
    • ブラウザの幅がクエリに定義された値より狭い場合にルールが適用されます。
  • min-height
    • ブラウザの高さがクエリに定義された値より高い場合にルールが適用されます。
  • max-height
    • ブラウザの高さがクエリに定義された値より低い場合にルールが適用されます。
  • orientation=portrait
    • ブラウザの高さが、幅と同じかそれ以上の場合にルールが適用されます。
  • orientation=landscape
    • ブラウザの幅の値が、高さよりも大きい場合にルールが適用されます。

どうやって使うかといいますと以下のように指定します。

<link rel="stylesheet" media="(max-width: 640px)" href="tablet.css">
<link rel="stylesheet" media="(min-width: 640px)" href="pc.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 320px) and (max-width: 480px) {
    /* CSSルール */
  }
</style>

上記のように記載した場合は

  • ビューポートの幅が0px〜640pxの場合はtablet.cssが適用されます。
  • ビューポートの幅が320px〜480pxの場合は@media内のCSSが適用されます。
  • ビューポートの幅が640px以上の場合はpc.cssが適用されます。
  • 端末が縦向きの場合はportrait.cssが適用されます。
  • 端末が横向きの場合はlandscape.cssが適用されます。

といった感じですべての条件が判定されることになります。

相対指定

レスポンシブレイアウトにする場合はdiv要素などに幅サイズを固定にしないようにしましょう。100%といったように相対指定を行うように心がけることによって適切にレスポンシブレイアウトを実現することができます。

では今回はこの辺で。