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

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

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

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

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

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

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

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

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

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

htmlファイル内に書くメディアクエリーの書き方

横幅375以下のデバイスにcssファイルを読み込む

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

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

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

cssファイル内に書くメディアクエリーの書き方

cssファイル内でcssファイルをインポートさせる

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

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

css内でデバイス幅によってスタイルシートを分けるための記述

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

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

幅の指定の種類

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

max-width/〇〇以下

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

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

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

min-width/〇〇以上

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

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

コメント

タイトルとURLをコピーしました