Nuxt独自

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

前置き

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

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

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


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

レスポンシブデザイン

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

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


メディアクエリ

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

これが出る前は
アクセスしている媒体の判断はできても
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で作成しておくパターン

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

デスクトップファースト

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

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


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

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

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

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


nuxt.config.js

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

どこに何を書くの❓

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

分けるポイントは

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

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

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



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

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

「モバイルファースト」 とは、スマホに最適化され、スマホを利用するユーザーが最も快適な状態になること

【モバイルファーストのWebサイト】考え方やデザインのポイントとは?

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


まとめ

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

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

-Nuxt独自
-,

© 2021 aLiz Nuxt