見出し画像

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

aLiz

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア

🎈 WPでも公開中です
https://wp.me/pc9NHC-1hb


前置き

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;
     }

これが出る前は
アクセスしている媒体の判断はできても
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

⬇️なんか上手くいかないという方は
　こちらを参考にしてください👀

前の記事で
細かく分けたい場合は
min-widthとmax-widthの併用をする
と書きましたが…

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

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

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

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

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

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

assets/scss/_variables.scss

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

$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>

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

assets/scss/_variables.scss

$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>

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

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

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

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

assets/scss/_variables.scss

/* ブレイクポイントの設定 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>

##nuxt.config.js

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

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',
   ],
 },
}


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

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

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

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


まとめ

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

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

🎈 WPでも公開中です
https://wp.me/pc9NHC-1hb

この記事が気に入ったらサポートをしてみませんか？