SCSSの基本構文5 - SCSSで使うメディアクエリ

Webサイト制作

SCSS

基礎

投稿日時 : 2024/11/26 更新日時 : -

Webサイトをスマホ、タブレット、PCなどの表示に対応するレスポンシブデザインの根幹となるメディアクエリについて解説する。これは以前に書いた下の記事を理解している方が対象となる。

スマホとPC表示に対応するメディアクエリ(レスポンシブデザイン)

SCSSのメディアクエリの基礎

基本的にSCSSでもCSSのメディアクエリと同じ書き方はできる。しかし、もっと可読性の高い書き方がお勧めなので是非習得してほしい。


.container {
  width: 100%;
  background: skyblue;

  @media screen and (max-width: 1200px) {
    width: 90%;
    background: navy;
  }

  .box {
    width: 200px;
    @media screen and (max-width: 960px) {
      width: 80%;
    }
  }
}

これは.containerが初期値はwidthが100%だが、ブラウザの幅が1200px以下の時に.containerのwidthが90%になるようにしている。特筆すべき事はメディアクエリのコードを内部に書いている事だ。出力されるのは下記になる。


.container {
  width: 100%;
  background: skyblue;
}
@media screen and (max-width: 1200px) {
  .container {
    width: 90%;
    background: navy;
  }
}
.container .box {
  width: 200px;
}
@media screen and (max-width: 960px) {
  .container .box {
    width: 80%;
  }
}

内部に書いたメディアクエリが外へ展開されて出力されているのが分かるだろうか。

SCSSのメディアクエリの書き方に慣れるべき

SCSSで変数やmixinやextendを解説したが正直僕自身はそんなにそれらは使っていない。しかし、SCSSの上記のメディアクエリの書き方は身に染みて使っている。この書き方に慣れると通常のCSSのメディアクエリの書き方が煩わしくなるくらい可読性や保守性が上がる。

複数のセレクタをまとめてメディアクエリで対応したい場合も下記でOK。


.contaner1 {
  .box1, .box2, .box3 { 
    width: 200px;
    height: 200px;
  }
  .box1 { background: blue; }
  .box2 { background: red; }
  .box3 { background: green; }
  
  @media screen and (max-width: 960px) {
    .box1 {
      width: 100%;
    }
    .box2 {
      width: 80%;
    }
    .box3 {
      width: 50%;
    }
  }
}

.containerの中に.box1, .box2, .box3が定義されている。

上記SCSSで出力されるCSSは下記。


.contaner1 .box1, .contaner1 .box2, .contaner1 .box3 {
  width: 200px;
  height: 200px;
}
.contaner1 .box1 {
  background: blue;
}
.contaner1 .box2 {
  background: red;
}
.contaner1 .box3 {
  background: green;
}
@media screen and (max-width: 960px) {
  .contaner1 .box1 {
    width: 100%;
  }
  .contaner1 .box2 {
    width: 80%;
  }
  .contaner1 .box3 {
    width: 50%;
  }
}

入れ子の事をネストというがSCSSでは正に入れ子の中のセレクタに影響を及ぼしていく。是非、そのやり方に慣れてほしい。