CSS メディアクエリのmax-widthとmin-widthの使い方

CSS メディアクエリのmax-widthとmin-widthの使い方

CSSでデザインしたページのファイルを溜め込み、CSSでデザインし直したり勉強してを繰り返す。というよく分からないことを趣味にして楽しんでる私でもメディアクエリを使用したレスポンシブデザインが必要です。

CSSでメディアクエリを使うときにはmax-widthとmin-widthのブレイクポイントをよく使用しますが、メディアクエリのmax-widthもmin-widthもなんとなくな使い方をしていました。

メディアクエリの使い方をおさらいしてからメディアクエリでのmax-widthとmin-widthの使い方を誰かに説明しているかのように記事にしました。

 

CSSでメディアクエリの使い方

 

はじめにメディアクエリの基本的な使い方をおさらい程度に説明しておきます。

CSSのメディアクエリは@mediaを記述して「メディアタイプ」と「メディア特性」を指定することにより、出力デバイスに応じてスタイルを適用したり、横幅に応じてCSSを切り替えることができます。

 

@media メディアタイプ and (メディア特性) { 設定 }

 

メディアクエリの「メディアタイプ」はWebページの出力先になるデバイスの種類を@mediaの後に半角スペースを開けて記述します。

 

@media screen {
    .max_width{
        background-color: #1ecbe1;
    }
}

 

例えば@mediaの記述に続けてメディアタイプをscreenで記述します。

@media screenを記述したら波括弧の中にメディアクエリで適用したいCSSをセレクタとプロパティ、値を使用して書きます。

すると@media screen内に記述したCSSはメディアのタイプがスクリーンの場合にメディアクエリで適用されます。

ここで記述したscreenはデバイスの種類のうち「PC」「iPhone」「Android」などがscreenとして扱われます。そのためWebサイト制作のときのメディアクエリに使用することが多いのもscreenです。

 

Advertisement

 

メディアクエリでブレイクポイントを決める

 

@media screenを記述しただけのメディアクエリの使い方だとPCもスマホもscreenとして扱われるため、Webサイトのページに反映するスタイルはどの画面でも同じCSSが適用されることになり閲覧環境によってはレイアウトが崩れることがあります。

そこでメディアクエリのブレイクポイントを決めるための「メディア特性」の登場です。

 

@media screen and (ここがメディア特性){}

 

メディアクエリでブレイクポイントを決めるメディア特性は、@media screenに続けてand演算子とカッコを半角スペースを開けて記述します

カッコ内に「どんな条件でスタイルを適用するか」を指定することでブレイクポイントを決めることができます。

「ブレイクポイント」とはメディアクエリでスタイルを切り替える分岐点と考えると理解しやすいかもしれません。

 

@media screen and (max-width:○○○px){}

 

メディアクエリのメディア特性にはCSSのmax-widthmin-widthを使うことができます。使用頻度が多いのもmax-widthとmin-widthです。

メディアクエリのメディア特性は複数の指定もできますのでmax-widthとmin-widthを同時に使用してブレイクポイントを決めることも可能です。

 

@media screen and (min-width:767px) and (max-width:1024px){}

 

複数のメディア特性を記述するときにはCSSで@media screenに続けてand (min-width:767px) and (max-width:1024px)のようにand演算子で特性を繋げて記述をします。

これにより「最小幅○○○pxから最大幅○○○pxまではAのスタイルを使用する」などのブレイクポイントの決め方ができるのです。

 

メディアクエリでmax-widthの使い方

 

先述しましたがCSSのメディアクエリにおけるmax-widthの使い方はメディア特性として使用します。

 

セレクタ{
    最大幅までのCSS
}
    @media screen (max-width:990px){
        セレクタ{
            最大幅より狭いCSS
        }
}

 

通常で書いたCSSの下に@media screen and (max-width:990px)と最大の横幅を値に指定します。このときmax-widthの値に記述した数値990pxの幅がCSSを切り替える分岐点としてメディアクエリになります。

メディアクエリでmax-widthを条件に使用する場合には、最大幅までのCSSを書いてから、その下にmax-widthのメディアクエリで最大幅より狭いCSSを記述するという順番で「大きいサイズから小さいサイズ」へ上から下へ記述します。

いわゆるPCファーストでレスポンシブにするメディアクエリの使い方ですね。

 

CSSのmax-widthでレスポンシブにする

 

例えば画像の上にテキストを表示させた要素があるとします。以下の画像のように。

 

 

画像の上に表示したテキストのフォントサイズをPCの画面に合わせた1.4remにするとPCではいい感じなのですが、スマホ画面で見ると幅ギリギリまで広がってしまったり、改行してしまったりします。

このようなときCSSのmax-widthでレスポンシブにする使い方としては、PCの画面に合わせたCSSのfont-size:1.4remを普通に記述して、その下にスマホ画面に合ったフォントサイズをメディアクエリで記述してレスポンシブにします。

 

.hero span{
    font-size: 1.4rem;
}
    @media screen and (max-width:440px){
        .hero span{
            font-size: 0.9rem;
        }
}

 

最初にCSSでfont-size:1.4rem;を書くことで記述したフォントサイズが適用されます。

 

Advertisement

 

 

画面幅を狭くしていきメディアクエリのmax-width440pxに到達したときにメディアクエリ内に書いたCSS(font-siza:0.9rem)のスタイルに切り替わるので、画像の上に表示するテキストをレスポンシブ化できていることがわかります。

 

 

検証ツールを使用しながらスタイルの切り替えをブレイクポイント付近で確認するとメディアクエリのmax-widthの条件に一致しないスタイルは打ち消されるのが分かるのでレスポンシブ化できているのがわかりやすです。

 

メディアクエリでmin-widthの使い方

 

メディアクエリでのmin-widthの使い方はメディア特性として記述をすることで最小幅より大きい画面になったときのスタイルに切り替えるブレイクポイントにできます。

 

セレクタ{
    最小幅までのCSS
}
    @media screen (max-width:440px){
        セレクタ{
            最小幅より広いCSS
        }
}

 

通常で書いたCSSの下に@media screen and (min-width:440px)と最小の横幅を指定します。このときmin-widthの値に記述した数値440pxの幅がCSSを切り替える分岐点としてメディアクエリになります。

メディアクエリでmin-widthを条件に使用する場合には、最小幅までのCSSを書いてから、その下にmin-widthのメディアクエリで最小幅より広いCSSを記述するという順番で「小さいサイズから大きいサイズ」へ上から下へ記述します。

いわゆるモバイルファーストでレスポンシブにするメディアクエリの使い方ですね。

 

CSSのmin-widthでモバイルファーストにする

 

CSSのmin-widthでモバイルファーストのレスポンシブデザインをする場合には、画面の小さいモバイル端末を基準にスタイルを整えます。

先述したmax-widthでレスポンシブにした画像の上のテキストフォントサイズをモバイルファーストのレスポンシブにします。

 

.hero span{
    font-size: 0.9rem;
}
    @media screen and (min-width:440px){
        .hero span{
            font-size: 1.4rem;
        }
}

 

モバイルファーストでCSSを書くときは、スマホの画面に合わせたCSSのfont-size:0.9remをはじめに記述します。

その下にスマホ画面に合わせたフォントサイズからPC画面サイズにスタイルを切り替える@media screen and (min-width:440px)のメディアクエリを記述。min-widthの値の数値がモバイルファーストでのブレイクポイントになります。

メディアクエリ内はメディアクエリのmin-width:440pxの幅より広い画面のときのフォントサイズをCSSで書きます。

 

先にCSSでfont-size:0.9rem;を書いているので、指定したフォントサイズがスマホ用のサイズとして適用されます。

 

 

画面幅を広げていきメディアクエリのmin-width440pxに到達したときにはメディアクエリ内に書いたPC画面用のCSS(font-siza:1.4rem)のスタイルに切り替わるので、画像の上に表示するテキストをモバイルファーストでレスポンシブ化できていることがわかります。

 

メディアクエリをlinkタグに使う場合

 

メディアクエリをlinkタグで使う場合には、linkタグにmedia属性を記述して使用します。

 

<link rel="stylesheet" media="all and (max-width:990px)" href="max-style.css">

 

head要素にlinkタグを記述してmedia属性の値にメディアクエリのメディアタイプとメディア特性を記述します。

例えばmedia=”all and (max-width:990px)”と記述した場合には、メディアタイプがallで全てのデバイスがメディアクエリのCSSを適用する対象になります。

そしてメディア特性の(max-width:990px)の記述により「横幅が最大990pxより狭くなった画面のとき」にメディアクエリの条件と一致しCSSファイルに記述のスタイルに切り替わります。

CSSカテゴリの最新記事