【CSS】画面幅で要素を出し分ける方法。メディアクエリとdisplayの活用

画面幅によって要素を出し分ける方法はcssだけで簡単に実現できる。

displayプロパティとメディアクエリを使う。表示したくない時はdispaly:noneとし、表示したい画面幅の時にdispaly:blockとすればOK。

例１：画面幅375px以下で改行する

376px以上の時は1行で表示して、375px以下になった時に、<br>タグで改行する処理。

<br class="newline">を２つ挿入し、デフォルトはdisplay: none;とする。メディアクエリを使って375px以下の時はdisplay: block;にする。

.css

.newline{
  display: none;
}

@media screen and (max-width:375px) {
  .newline{
    display: block;
  }
}

.html

<p>
  画面幅によって出し分ける方法。
  <br class="newline">
  <br class="newline">
  375px以下で改行する
</p>

sassで記述する

sassのmixinを使うと、簡単に呼び出せるようになりメンテ性が上がる。

.scss

//mixinの定義
@mixin mq-down ( $breakpoint: 375px ){
  @media screen and (max-width: $breakpoint){
    @content
  }
}

//cssの設定
.newline{
    display: none;
    @include mq-down{
      display: block;
    }
}

▼mixinの定義

・@mixin ミクシン名 ( 初期値 ){処理}

・@include ミクシン名

mixinの呼び出し。引数を指定しない場合は初期値が入る。

例えば、@include mq-down(600px)とすれば、ブレイクポイントが600pxになる。

・@content

mixinの中で@contentを使うと、呼び出した時に{ }の中に記述した内容が@contentの中に入る。

上記例では、display: blockがメディアクエリの{ }の中に記述される。

## 例２: 画面幅に合わせてdivタグを出し分ける 3つのdivタグを用意して、600px, 375px毎にdivを１つづつ減らしていく。

.css

.div1 {
  background: blue;
}

.div2 {
  background: red;
  display: none;
}
@media screen and (min-width: 375px) {
  .div2 {
    display: block;
  }
}

.div3 {
  background: green;
  display: none;
}
@media screen and (min-width: 600px) {
  .div3 {
    display: block;
  }
}

.html

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

### Sassで記述する sassのmixinを使うとシンプルになる。

.scss

//mixinの定義
@mixin mq-up ( $breakpoint: 375px ){
  @media screen and (min-width: $breakpoint){
    @content
  }
}

//cssの設定
.div1{
  background: blue;
}
.div2{
  background: red;
  display: none;
  @include mq-up{
    display: block;
  }
}
.div3{
  background: green;
  display: none;
  @include mq-up(600px){
    display: block;
  }
}

scss便利。