メディアクエリの種類・書き方を徹底解説「CSS」

CSS
何も考えず「@media (max-width:1025px)」などwidthを条件に使っているけどほかにも種類があるの?レスポンシブ対応の幅を広げるためにメディアクエリの種類、書き方をすべて教えてほしい。

 

 

そんな疑問を解決します。

 

本記事では、これからメディアクエリを学ぶ方の為に、

メディアクエリの書き方、種類、使い方について網羅的に、分かり易く解説しています。

 

メディアクエリの書き方を理解すればコーディングの幅が広がり、スキルアップ出来るのでぜひ覚えてみてください。

 

・メディアクエリについて
メディアクエリの種類・書き方
・論理演算子の種類
・メディアクエリの反映方法
・具体例

 

 

スポンサーリンク

メディアクエリの種類・書き方を徹底解説「CSS」

 

令和3年の総務省のデータでは、日本人の個人のインターネット利用率(個人)は83.4%

そのうち「スマートフォン」(68.3%)が「パソコン」(50.4%)とスマートフォンでの閲覧が高いというデータがあります。

その為、WEBサイトはモバイルファーストなデザインが優先されるようになりましたね。

 

ほとんどの参考書やプログラミングスクールでもメディアクエリの事を解説しているとは思いますが、

あくまで最低限の知識のみだと思います。

 

私自身、正しく理解できていないまま「なんとなくの理解」や「動くからいいか」で終わっていましたが、

「よりスキルを高めたい」「自分の思うようにコーディングしたい」と思い立ち本記事をまとめています。

 

同様にこれからメディアクエリを学ぶ方、基本は大丈夫だけど復習したい方にはピッタリの内容になっています。

 

 

メディアクエリについて

 

メディアクエリは「CSS3」から登場した要素で、レスポンシブなサイトコーディングには欠かせません。

 

どのような効果があるか簡単に説明すると、「指定した条件でCSSを適用する」ことが出来ます。

たとえば「デバイスの画面幅が○○の時(条件)」+「フォントサイズを15pxにする(CSSを適用する)」感じ。

 

記述方法は以下の通り、「メディアタイプ」や「メディア特性」が条件にあたり、{}内に適用したいCSSを書きます。

 

medhia メディアタイプ and (メディア特性){指定したいCSSの記述}
@medhia メディアタイプ and (メディア特性){指定したいCSSの記述}

 

メディアタイプはメディア特性は後半で詳しく解説します。

 

メディアクエリの種類・書き方

 

メディアタイプとメディア特性の種類、書き方について学んでみましょう。

メディアタイプは4種類、メディア特性はたくさんの種類がありますが実践的にはほんの一部しか使われていません。

 

知識として知っておいて、覚えるのは少しでOKです。

 

メディアタイプの種類

 

メディアタイプの種類は3つ。

・all
・print
・screen

 

メディアタイプ指定できるデバイス
allすべてのデバイス
print印刷用、プリンタ
screenPC、スマホ、タブレットの画面

※用途が無く非推奨となったメディアタイプ「tty/tv/projection/handoheld/braille/embossed/aural/speech」

 

 

 all

「all」はすべてのデバイスに適用します。という意味です、昨今では以下の「print」と「screen」の両方という意味ですね。

また「all」の場合は記述を省略して書いてもOKです。

@media all and (メディア特性) {指定したいCSSの記述}
@media (メディア特性) {指定したいCSSの記述}

 

 

 print

「print」はプリンターで印刷時に適用させたい条件を指定することが出来ます。

あまり活躍する機会はなさそうですが、たとえばWEBサイト上のままでは大き過ぎる時など印刷用のデザインを指定するなどが可能です。

@media print and (メディア特性) {指定したいCSSの記述}

 

 

 screen

「screen」はPCやスマホ、タブレットなどのデバイス(主に画面)に条件を指定することが出来ます。

レスポンシブ対応ではwidthやheightのサイズが変わるのでメディアクエリといえば「screen」に適用させるのがほとんど。

@media screen and (メディア特性) {指定したいCSSの記述}

 

 

3つのメディアタイプを紹介しましたが、

基本は「all」で印刷時だけ特別な条件を付けたいときは個別で「print」を指定するのが良いでしょう。

 

 

メディア特性の種類

 

メディア特性は、画面の高さや幅など環境や特徴を指定する条件です。

レスポンシブ対応では基本「width」や「max-width」「min-width」で横幅を指定することがほとんどです。

・width
・max-width
・min-width
・height
・max-height
・min-height
など

 

メディア特性説明
widthブラウザの表示領域の横幅
heightブラウザの表示領域の高さ
device-widthデバイスの横幅 ※Media Queries Level 4 で非推奨
device-heightデバイスの高さ ※Media Queries Level 4 で非推奨
colorデバイスの色のビット数
color-gamutデバイスが対応しているおよその色の範囲
color-indexデバイスの色参照表の項目数
forced-colorsユーザーがカラーパレットを制限しているかどうかを検出
inverted-colorsユーザーまたはその下の OS が色を反転しているか
prefers-color-schemeユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出
hoverユーザーが要素上でのホバーを使用することができるか
any-hoverユーザーが要素上でのホバーを使用することができるものがあるか
pointerポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか
any-pointerポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか。
grid出力機器はグリッドとビットマップ画面のどちらを使用するか。
aspect-ratioビューポートの幅対高さのアスペクト比
device-aspect-ratio出力機器のレンダリング面の高さ Media Queries Level 4 で非推奨
display-modeウェブアプリのマニフェストの display メンバーで指定されているアプリケーションの表示モード。
monochromeデバイスのモノクロフレームバッファーにおけるピクセルあたりのビット数
orientationビューポートの向き
overflow-blockビューポートをブロック軸方向にあふれたコンテンツを出力機器がどのように扱うか
overflow-inlineビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか
prefers-contrastユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出
prefers-reduced-motionユーザーがページであまり動きを望まないかどうか
resolution出力機器のピクセル密度
scripting出力機器のスキャン処理方式
updateどれだけの頻度でデバイスがコンテンツの表示を変更できるか

 

 

種類はたくさんありますが、前述した通り基本は「width」を指定することがほとんど。

記述は以下の通り。

@media メディアタイプ (width:1200px) {指定したいCSSの記述}
@media (max-width:1200px) {
    p{
    color:red;
    }
}

 

 

ブレイクポイントについて

 

ブレイクポイントとはレスポンシブ対応で変化を与えるポイントのこと。

「max-width」で横幅を起点にサイズが変更されたタイミングを条件にすることが多いです。

 

ちなみに「max-○○○○」は最大○○○○、「min-○○○○」は最小○○○○の意味。

たとえばmax-widthなら最大横幅となり、それ以上横幅が大きくならないように指定できますが、

メディア特性では以下の意味合いがあります。

・(max-width:1200px) → 1200px以下の時の条件
・(min-width:1200px)  → 1200px以上の時の条件

 

上記を理解して希望通りのブレイクポイントを設定してましょう。

 

 

論理演算子の種類

論理演算子(ろんりえんざんし)は複数の条件を指定したい場合に使います。

メディアクエリで使える論理演算子は3種類です。

 

・and
・,(カンマ)
・not

 

論理演算子説明
andメディア特性を組み合わせる
, (カンマ)2個以上のメディア特性の内、いずれかが一致する場合
not条件に一致しない場合

 

 and

メディアタイプとメディア特性の間に記述し、組み合わせる意味として使われます。

複数のメディア特性を組み合わせることも出来て「○○かつ○○の時」という条件が指定できます。

@media screen and (メディア特性) {指定したいCSSの記述}
@media (メディア特性) and (メディア特性) {指定したいCSSの記述}

 

 , (カンマ)

カンマで区切ることで指定した条件の内、いずれかが一致した場合の条件を指定することが出来ます。

いわゆる「or」や「または」の意味で使うことが出来ます。

@media screen and (メディア特性) , (メディア特性) {指定したいCSSの記述}
@media (メディア特性) , (メディア特性) {指定したいCSSの記述}

 

 not

notは反転の意味で使われます。その条件に一致しないデバイスを対象にすることで否定形になります。

@media not screen and(メディア特性) {指定したいCSSの記述}
@media not (メディア特性) {指定したいCSSの記述}

 

 

メディアクエリの反映方法

 

メディアクエリを反映させる方法は2つ。

 

・同じCSS内に書き込む
・別CSSファイルを読み込む

 

同じCSS内に書き込む

 

基本のcssファイル内に書き込む場合は、「@medhia メディアタイプ and (メディア特性){指定したいCSSの記述}」の記述が必要です。

書き込む場所に制限はありません、自身が管理しやすい場所で大丈夫です。

 

SCSSで書く場合は同じネスト内に書けば管理しやすいですね。

.クラス名{
     font-size:30px;
     @media screen and (max-width: 1200px) {
     font-size:15px;
     }
}

 

 

別CSSファイルを読み込む

 

cssの読み込みはhtmlファイルのheadに<link>で書き込むのが基本ですよね。

メディアクエリのcssも同様にheadに書き込みますが、以下のように「media=“メディアタイプ (メディア特性)」追記が必要です。

 

<head>
   <link rel="stylesheet" href="style.css" media="screen and (max-width:1200px)">
</head>

 

ファイル数は増えますが、コード量が増えると管理が大変になるのでファイルを分けておくと便利です。

ファイル数に制限が無いのでブレイクポイント毎や条件毎に指定することもできます。

<head>
   <link rel="stylesheet" href="style.css" media="screen and (max-width:1200px)">
   <link rel="stylesheet" href="style.css" media="screen and (max-width:780px)">
</head>

 

具体例

 

メディアクエリでブレイクポイントを設定する時、どれくらいの値で設定するべきか?

どのような条件で指定するべきかわからなくなってしまいますよね。

 

結論、正解は無いので自分の好み「これくらいかなー」という感覚で値を決めていいのですが、

各デバイスのサイズを載せておくので、ブレイクポイントの参考値にしてください。

 

iphone機種名サイズ
iPhone 13ProMax428×926
iPhone 13/13Pro390×884
iPhone 13mini375×812
12/12 Pro390×844
XR/11/XS Max/11 Pro Max414×896
Plus 6/6s/7/8414×736
6/6s/7/8/ X/XS/11 Pro375×667

 

Android機種名サイズ
Xperia 12418×976
Galaxy S20 Ultra412×915
OnePlus 8T412×914
Pixel 5/4a360×800
Galaxy S20414×896
AQUOS R3360×780

 

タブレット機種名サイズ
iPad Pro12.9(1~5)1,024×1,366
iPad Pro11(1/2/3)834×1,194
iPad Air(4)834×1,180
iPad Air(3)/Pro10.5834×1,112
iPad Air10.9820×1,180
iPad(7/8/9)810×1,080
iPad mini(6)744×1,133

 

ちなみにサイズは以下が一般的なので参考にしてみてください。

・大型PC:1280px以上
・ノートPC:960px~1280px
・タブレット:600px~960px
・スマホ(横):480px~600px
・スマホ(縦):~480px

 

まとめ

 

メディアクエリの種類・書き方を徹底解説「CSS」について解説しました。

 

指定出来るメディアタイプやメディア特性にたくさん種類がありましたが、

うまく使いこなすことで思い通りの操作が出来るようになります。

 

ぜひ見返しながら参考にしてみてください、最後までお読みいただきありがとうございました。

スポンサーリンク
NO IMAGE

晴耕雨読

『晴れた日には畑を耕し雨の日には本を読む』そんな生活を目指すブログです