CSS

2021.03.01

【CSS】意外と知らないメディアクエリの種類

レスポンシブをするときに皆さんはどのように記述をしていますか?
cssファイルに
@media screen and (max-width: 1024px) {~}
と書く人が多いと思いますが、メディアクエリの書き方や属性に種類があることはご存知でしょうか。

今回は今まであまり深く考えたことがなかったメディアクエリについて深堀りしていきたいと思います。

基本的なメディアクエリの書き方

cssに記述する

冒頭でも例に出しましたがおそらくこの方法が一番多く使われると思います。
css内にブレイクポイントを全て記述します。

p{
 font-size:40px;
}

@media screen and (max-width: 1024px) {
 p{
  font-size:30px;
 }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
 p{
  font-size:25px;
 }
}

@media screen and (max-width: 768px) {
 p{
  font-size:20px;
 }
}

@media screen and (max-width: 420px) {
 p{
  font-size:10px;
 }
}


このように指定したいブレイクポイントごとに記述し、{ }のなかに内容を書いていきます。

@media screen and (max-width: 1024px) and (min-width: 769px) { }のように2つ指定することもできます。
この場合は画面幅が最小769px~最大1024pxで効きます。

ちなみに、max-width=最大値なのでこの場合は1024px以下に適用され、min-width=最小値なので769px以上と考えます。

cssに別のcssを@importで読み込む

通常の記述用のcssとレスポンシブ用のcssを用意し、@importタグで読み込みます。

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

弊社ではブレイクポイントごとにcssファイルを分けているわけではないのでこの方法は使いません。

linkで読み込む

こちらはあまり見かけませんが、htmlのheadタグ内にlink形式でcssを読み込む際に一緒にブレイクポイントも指定します。

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

上記の記述でsp.cssという名前のcssファイルを420px以下で読み込むことができます。

@import形式と同じようにレスポンシブ用のcssをわけてないのでこの方法は使いません。

メディアタイプについて

@media screenの「screen」部分をメディアタイプといいます。

基本的にはscreenを使いますが他にどんな種類があるかご紹介します。

allすべてのデバイス
braille点字ディスプレイ
embossed点字プリンター
handheldモバイル
printプリンター
projectionプロジェクター
screenディスプレイ
speech音声出力デバイス
tty文字幅が固定のデバイス
tvテレビ

screenとprint以外は見かけたことが無かったので思っていた以上にたくさんの種類がありました。

ちなみに、最新のcssのバージョン(レベル)では以下のタイプは非推奨のようです。

非推奨タイプ

  • tty
  • tv
  • projection
  • handheld
  • braille
  • embossed
  • speech

…実質はscreenとprintが使えれば大丈夫そうですね。
むしろ@media (max-width:●●)だけで十分かもしれません。

メディア特性について

続いては、@media screen and (max-width: 1024px)の「max-width」部分の種類をご紹介します。

widthデバイスの横幅
heightデバイスの高さ
orientationデバイスの向き
縦長はportrait、横長はlandscape
aspect-ratioデバイスの縦横比
@media screen and (orientation:landscape){ }
@media screen and(aspect-ratio:4/3){ }

このように使うみたいです。
他にも色々ありますがメインで使うのはwidthとheightになると思います。

まとめ

改めてメディアクエリについて調べてみると沢山の指定方法がありました。
ですが結局のところ必要な記述は限られていて、むしろもっと短く書いても問題ないということがわかりました。

この記事をシェアする

関連記事

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.28

    色違いは必要ない!アイコンはcssで色を変えよう!

    CSS

    コーディング

  • 2023.11.14

    コーダー同士の情報のやり取りで効率がアップした話

    CSS

    コーディング

おすすめ記事

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

×