【メディアクエリー/Media Queries】デバイスによって読み込むcssを変えたい/メディアクエリーの書き方

同じ一つのhtmlで作ったサイトをPCとスマホでデザインやレイアウトを変えたい場合があると思います。

たとえばPCでサイトを見たときこのデザインにしたい。

またスマホで見たときはPCと違ったデザインに見せたい。

このようにデバイスごとにデザインを変えたいときには読み込むスタイルシート（css）を変えることで可能になります。

そんなときに使うのがメディアクエリー（Media Queries）です。

メディアクエリーを使うことでデバイスの幅によって読み込むスタイルシート（css）を切り替えることができます。

レスポンシブサイトを作るうえで欠かせないのがこのメディアクエリーです。

それではメディアクエリーの書き方を紹介していきたいと思います。

メディアクエリーの書き方を紹介

まずは基本的なメディアクエリーの書き方を覚えましょう。

基本的な3つの書き方があります。

<link rel="stylesheet" href="sp.css" media="screen and (max-width: 375px)">

こちらは横幅が375px以下の場合に「sp.css」を読み込む記述になります。

html内に<link>タグとして設定します。

@import url('sp.css') screen and (max-width: 375px);

次はcssファイル内で横幅が375px以下のときに「sp.css」ファイルを読み込むときの記述になります。

@media screen and (max-width: 375px) {
  p{color: red;}
}

上記はデバイス幅が375pxのときにpタグのテキストのカラーを赤にする記述になります。

メディアの幅を指定する際にmax-widthとかmin-widthを使いますがこの違いついておぼえておきましょう。

max-widthはデバイス幅が指定した幅以下のときにスタイルシートを適用させたい場合に使います。

@media screen and (max-width: 375px) {
  /* デバイス幅375px以下の場合に適用したいcss */
}

上記はデバイス幅が375px以下の場合に指定する記述方法です。

min-widthはデバイス幅が指定した幅以上のときにスタイルシートを適用させたい場合に使います。

@media screen and (min-width: 375px) {
  /* デバイス幅375px以上の場合に適用したいcss */
}