コード・実装

【SCSS】メディアクエリを簡単に書く

SCSSで簡単にメディアクエリを使用する方法を共有します。

SCSSでメディアクエリを簡単に書く方法

scssで先に下記の設定を書いておきます。

// breakpointの設定
$mq-breakpoints: (
    xl: 1440px,
    lg: 1280px,
    md: 1024px,
    tb: 768px,
    sm: 576px,
    xs: 414px) !default;

// Media Queryの設定
@mixin mq($breakpoint: md, $rule: min, $subtraction: false) {
    $breakpoint: map_get($mq-breakpoints, $breakpoint);

    @if $rule==max and $subtraction {
        $breakpoint: $breakpoint - 0.0625;
    }

    @media screen and (#{$rule}-width: $breakpoint) {
        @content;
    }
}

 

使用するときは、下記のように書きます。

下記が「画面サイズが1024pxからcolor:redにする」という形になります。

@include mq(md) {
     color: red;
}

 

これで、CSSで書く下記と同じ意味になります。

@media screen and (min-width: 768px){ 
     color:red;
}

 

各サイズでの書き方

画面サイズが1440pxからの場合

@include mq(xl) {
     // ...
}

 

画面サイズが1280pxからの場合

@include mq(lg) {
     // ...
}

 

画面サイズが1024pxからの場合

@include mq(md) {
     // ...
}

もしくはmdはデフォルトの値に設定しているので、

@include mq() {
     // ...
}

 

画面サイズが768pxからの場合

@include mq(tb) {
     // ...
}

 

画面サイズが576pxからの場合

@include mq(sm) {
     // ...
}

 

画面サイズが414pxからの場合

@include mq(xs) {
     // ...
}

 

一部、デスクトップファーストにしたい場合

@include mq(md, max) {
     // ...
}

 

各サイズを変更したい場合

下記を変更してください。

$mq-breakpoints: (
    xl: 1440px,
    lg: 1280px,
    md: 1024px,
    tb: 768px,
    sm: 576px,
    xs: 414px) !default;

 

事前の設定をデスクトップファーストにしたい場合

@media screen and (max-width: 768px)のような形にしたい時、下記のように変更してください。

// $rule: min をmax に変更
@mixin mq($breakpoint: md, $rule: max, $subtraction: false) {
    $breakpoint: map_get($mq-breakpoints, $breakpoint);

    @if $rule==max and $subtraction {
        $breakpoint: $breakpoint - 0.0625;
    }

    @media screen and (#{$rule}-width: $breakpoint) {
        @content;
    }
}

 

以上です!

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】