CSS

2021.03.03

【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になると思います。

まとめ

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

0

関連記事

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

  • 2021.03.31

    【HTML・CSS】納品前に確認したいコーディングチェックポイント

    CSS

    HTML5

おすすめ記事

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!