【Nuxt.js】コピペで簡単！レスポンシブ対応

前置き

Nuxtでメディアクエリを簡単に使用し、
レスポンシブ対応する方法を
お伝えします💫
コピペでも使えますよ💖

理解を深めたい方は、
コピペ部分以外の解説も
ご覧ください✨👀
分かるところは飛ばしてくださいね💡

参考:
レスポンシブの基本、メディアクエリの書き方
 【モバイルファーストのWebサイト】考え方やデザインのポイントとは？
Sassのmap操作をおさらいする+便利な関数をいくつか
 Sassでメディアクエリを効率的に管理するマップとmixin
Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説

レスポンシブとメディアクエリ

レスポンシブデザイン

見ているデバイスの幅に合わせて
適切に表示できるように
設計したデザイン🎨

1つのhtmlだけで
色んなデバイスに対応させます。

メディアクエリ

メディアクエリはcssの要素のことです。
@mediaの部分です。
通常は背景が白、
最大幅が480pxまでの時(モバイル)は黒
という例です。

<style lang="scss" scoped>
.page {
    background-color: white;

      @media screen and (max-width: 480px) {
        background-color: black;
      }

.page {

background-color: white;

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

background-color: black;

}

これが出る前は
アクセスしている媒体の判断はできても
cssで表示の切り替えができなかったのが、
メディアクエリのおかげで
表示の操作ができるようになったそうです🙌

コピペ用コード

mixin&scssで作成します。
毎回これを書くのは面倒ですよね❓
@media screen and (max-width: 480px)

scssの$変数と
mixinを掛け合わせて
シンプルに書けるようにしています。

scss❓mixin❓
という方でも大丈夫です😀
コピペで使えます。
が❗️
Sassのインストールだけ必要です❣️

Sassのインストール

まずはこの3つをターミナルに
コピペしてください🪐
$はターミナルコマンドを
示しているだけなので
コピーはnpmからです🐁

terminal

$ npm install node-sass@4.14.1
$ npm install sass-loader@10.1.1
$ npm install --save-dev @nuxtjs/style-resources

⬇️なんか上手くいかないという方は
　こちらを参考にしてください👀
【Nuxt.js】Sassのバージョンに注意！
【Nuxt.js】Sassの導入方法

前の記事で
細かく分けたい場合は
min-widthとmax-widthの併用をする
と書きましたが…
【Nuxt.js】mixin実践編：Sass & mixinで簡単メディアクエリ

可読性の低下に繋がるため、
なるべくやらないようにした方が良さそうです💡
よりシンプルに分かりやすくまとめたものがこちらです👇

コピペ用コード(簡易版)

モバイルファーストか
デスクトップファーストを
選んでください🌟

このブログでは主に
後者で記述しています✍️

最後にnuxt.config.jsで
scssファイルを読み込みましょう❗️

モバイルファースト

デフォルトのcssがモバイルで
それより大きい画面をmixinで作成しておくパターン

/* モバイル向けのスタイル */
 
$tab: 768px;
$lap: 1024px;
$pc: 1200px;

@mixin tab {
  // 768px以上の時に適応
  @media screen and (min-width: ($tab)) {
    @content;
  }
}

@mixin lap {
  // 1024px以上の時に適応
  @media screen and (min-width: ($lap)) {
    @content;
  }
}

@mixin pc {
  // 1200px以上の時に適応
  @media screen and (min-width: ($pc)) {
    @content;
  }
}

/* モバイル向けのスタイル */

$tab: 768px;

$lap: 1024px;

$pc: 1200px;

@mixin tab {

// 768px以上の時に適応

@media screen and (min-width: ($tab)) {

@content;

}

@mixin lap {

// 1024px以上の時に適応

@media screen and (min-width: ($lap)) {

@content;

}

@mixin pc {

// 1200px以上の時に適応

@media screen and (min-width: ($pc)) {

@content;

}

使用したい箇所で@include
モバイルで表示していたところを
pcで非表示にする

<style lang="scss" scoped>
  .page {
    @include pc {
      display: none;
    }
  }
</style>

.page {

@include pc {

display: none;

}

</style>

デスクトップファースト

デフォルトのcssがデスクトップで
それより小さい画面をmixinで作成しておくパターン

$sp: 480px;
$tab: 768px;
$lap: 1024px;

@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}
@mixin tab {
  @media screen and (max-width: ($tab)) {
    @content;
  }
}

@mixin lap {
  @media screen and (max-width: ($lap)) {
    @content;
  }
}

$sp: 480px;

$tab: 768px;

$lap: 1024px;

@mixin sp {

@media screen and (max-width: ($sp)) {

@content;

}

@mixin tab {

@media screen and (max-width: ($tab)) {

@content;

}

@mixin lap {

@media screen and (max-width: ($lap)) {

@content;

}

使用したい箇所で@include
PCで表示していたところを
モバイルで非表示にする

<style lang="scss" scoped>
  .page {
    @include sp {
      display: none;
    }
  }
</style>

.page {

@include sp {

display: none;

}

</style>

コピペ用コード(強化版)

もう少し使い勝手のよいものです🌟
モバイルファーストなどの考え方が
分かりにくくなるので
後出ししています😀笑

この場合はmin-widthと
max-widthの併用をするからこそ
実現できるものです💡

map-getはSassで使用できる物🔨
keyとvalueのペアを定義します。

/* ブレイクポイントの設定 min~max */
$mq-breakpoints-min: (
  'xxs': '0px',
  'xs': '441px',
  'sm': '581px',
  'md': '781px',
  'lg': '961px',
) !default;

$mq-breakpoints-max: (
  'xxs': '440px',
  'xs': '580px',
  'sm': '780px',
  'md': '960px',
  'lg': '1040px',
) !default;

/* mq-target:指定してメディアクエリのみに適用 */
@mixin mq-target($breakpoint: md) {
  @media screen and (min-width: #{map-get($mq-breakpoints-min, $breakpoint)}) and (max-width: #{map-get($mq-breakpoints-max, $breakpoint)}) {
    @content;
  }
}

/* mq:指定より小さい画面に適用 */
@mixin mq($breakpoint: md) {
  @media screen and (max-width: #{map-get($mq-breakpoints-max, $breakpoint)}) {
    @content;
  }
}

/* ブレイクポイントの設定 min~max */

$mq-breakpoints-min: (

'xxs': '0px',

'xs': '441px',

'sm': '581px',

'md': '781px',

'lg': '961px',

) !default;

$mq-breakpoints-max: (

'xxs': '440px',

'xs': '580px',

'sm': '780px',

'md': '960px',

'lg': '1040px',

) !default;

/* mq-target:指定してメディアクエリのみに適用 */

@mixin mq-target($breakpoint: md) {

@media screen and (min-width: #{map-get($mq-breakpoints-min, $breakpoint)}) and (max-width: #{map-get($mq-breakpoints-max, $breakpoint)}) {

@content;

}

/* mq:指定より小さい画面に適用 */

@mixin mq($breakpoint: md) {

@media screen and (max-width: #{map-get($mq-breakpoints-max, $breakpoint)}) {

@content;

}

<style lang="scss" scoped>
  .page {
    @include mq(xs) {
      display: none;
    }
  }
</style>

.page {

@include mq(xs) {

display: none;

}

</style>

nuxt.config.js

Nuxtではcss/scssを
nuxt.config.jsで読み込みます。

export default {
  styleResources: {
    scss: [
      '@/assets/scss/_variables.scss',
    ],
  },
}

export default {

styleResources: {

scss: [

'@/assets/scss/_variables.scss',

}

どこに何を書くの❓

たまにcssなのか
styleResourcesなのか
どちらに入れれば良いか
分からなくなります笑

分けるポイントは

$変数を使用しているかどうか

css
$変数を使っていないファイル
scssでも$変数がなければここ

styleResources
$変数を使っているファイルはこっち
拡張子の種類別に分けて
書く必要があるので注意しましょう💡
scssの他にsass, stylusがあります。

export default {
  css: [
    '@/assets/scss/reset.scss',
  ],
  styleResources: {
    scss: [
      '@/assets/scss/_variables.scss',
    ],
  },
}

export default {

css: [

'@/assets/scss/reset.scss',

styleResources: {

scss: [

'@/assets/scss/_variables.scss',

}

モバイルファースト, デスクトップファースト

コピペ用コードで出てきたこの言葉、
ファースト=作る順番が先、
ではなく…

「モバイルファースト」とは、スマホに最適化され、スマホを利用するユーザーが最も快適な状態になること
【モバイルファーストのWebサイト】考え方やデザインのポイントとは？

ということです。
スタイリングが
デフォルトでモバイルになると
作業順序もモバイルが先になるので
作る順番として
認識されているのかもですね…👀

まとめ

コピペでお手軽に
実装してみてくださいね❣️

自分の備忘録も兼ねて、
細かい解説も入れたので
理解が深まりました🌱👀
min-widthとmax-widthの併用は
結構いろんな場所で見かけますが
もっとシンプルにならないかと
より良いコードを求めて✈️
今回の形にまとまりました❤️