前回の記事

こちらの記事にコメントで指摘、編集依頼を受け
実践してみてこっちの方がいい！って思ったので修正版を今回は書きます
https://qiita.com/nuxt_suco/items/63797a54a2b09e07efaa#comment-f81740c831acd1c11bf9

いただいた2つのコメント

個人的にはnuxt.config.jsの中に書く。
1.assets/style/reset.scssを作り、中にreset.cssを入れる
2.nuxt.config.jsの中でcssを取り込む

globalなものであれば、ここに入れておくといいかなと

先に、nuxt.config.jsの内容が読まれたあとに、.vueファイルの内容を読むみたい

---

layouts/default.vue内で読み込んだCSSはページコンポーネント内でlayoutプロパティが省略されていれば読み込まれます。
しかし、404ページなど他のページとはレイアウトの構成が変わるようなページで、新しく「layouts/error.vue」のようなテンプレートを作った場合には引き継がれません。
なのでやっぱり全体に効かせたい場合にはnuxt.config.js内に記述するのがいいですね！

なるほど？ってことは、nuxt.config.jsに記述されてる方が優先度高いんだ！
とりあえずやってみよ

reset.cssをassets配下に置く

aseetsディレクトリーのなかにstyleディレクトリーを作り
assets/style/reset.css

nuxt.config.jsの中でreset.cssを取り込む

  css: [
    '@/assets/style/reset.css'
  ],

取り込んだreset.cssをdefault.vueで呼ぶ

<style>
@import "./assets/style/reset.css";
</style>

これで無事適応されました！
他にもdefaultで適応させたいものがあれば複数のcssファイルを
1つのcssファイルにまとめたものを呼べば大丈夫です！

今回参考にしたリンク先

[nuxt.config.jsでのcssの取り込み方について]
https://github.com/nuxt/create-nuxt-app/blob/master/template/nuxt/nuxt.config.js#L54

https://ja.nuxtjs.org/api/configuration-css/

@importっていつ使うの？？

ページを作っていて
@importは外部のCSSファイルを取り込むときに使用。

スタイルシートの内容がとても多くなって、いくつかに分割したいときに使う。

使い方

CSSの最初に記述。

@import url("cssファイル名");

違う階層のディレクトリにCSSファイルがある場合は、階層を指定する。
例えばCSSディレクトリにCSSファイルがある場合は、

@import url("css/cssファイル名");

超簡単！ jQueryでスライダーを自作

Webページにスライダーを導入すればコンテンツが多くなった時や、
スマホ対応のページを作るときに、見た目をすっきりとさせることができます。
最近ではおしゃれなデザインのスライダーを簡単に導入できる
プラグインがたくさんありますが、今回は以下の手順で自作してみました。

読む対象

HTMLとCSSはできるがjQueryがうまく使えないという方。
Webページをシンプルに見せたいという方。
プラグインでスライダーを導入したことはあるが仕組みが分からないという方。

8つの手順で実装

手順①
スライドしたい要素に適切なclass名(例：slide)をつける。

手順②
表示するスライドに適切なclass名(例：active)をつける。
最初は1枚目のスライドを表示してほしいので一番最初につけました。
例
<div class="slide active">
　　<h2>スライド1枚目</h2>
　　<img src="画像のパス">
</div>
<div class="slide">
　　<h2>スライド2枚目</h2>
　　<img src="画像のパス">
</div>
<div class="slide">
　　<h2>スライド3枚目</h2>
　　<img src="画像のパス">
</div>
<div class="slide">
　　<h2>スライド4枚目</h2>
　　<img src="画像のパス">
</div>

手順③
cssファイルでslideクラスにdisplay: none;を適用する。

手順④
手順③の文以降にactiveクラスにdisplay: block;を適用する。

example.css

.slide {
    display: none;
}

.active {/*.slide{...}よりも下に記述*/
    display: block;
}

手順⑤
slideクラスの前後にnextボタンとprevボタンを作るための下準備として
Font Awesomeを利用できるようにheadタグ中に以下の1文を宣言します。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

手順⑥
slideクラスの前後に以下のようにクラスを作る。

<div class="button prev">
　　<i class="fas fa-chevron-circle-left"></i>
</div>
/*ここに手順②のコードが入る*/
<div class="button next">
　　<i class="fas fa-chevron-circle-right"></i>
</div>

このiタグの中身はFont Awesomeからとってきたアイコンです。
今回はarrowで検索をしてprev、next用の矢印アイコンを持ってきました。
利用したいアイコンを選択すれば自動でコードが出てくるので、
挿入したい位置にコピペでOKです。
大きさを選べたり、cssで色や位置を変更できるので非常に便利です。

手順⑦
js形式のファイルに以下のコードを記述する。

sample.js

$(document).ready(function(){
    function toggleChangeBtn() {
        var slideIndex = $('.slide').index($('.active'));/*activeクラスがついている要素(現在表示中のスライド)のindexを取得*/
        $('.button').show();/*両ボタンを表示*/
        if(slideIndex == 0){/*一番最初の要素が表示されているとき*/
            $('.prev').hide();/*prevボタンを隠す。*/
        }else if(slideIndex == $('.slide').length - 1){/*一番最後の要素が表示されているとき*/
            $('.next').hide();/*nextボタンを隠す。*/
        }
    }

    toggleChangeBtn();

    $('.next').click(function() {/*nextボタンを押したとき*/
        var $displaySlide = $('.active');/*現在表示中のスライドを取得*/
        $displaySlide.removeClass('active');/*そのスライドからactiveクラスを除いて表示されないようにする。*/
        $displaySlide.next().addClass('active');/*次のスライドにactiveクラスをつけ、表示させる。*/
        toggleChangeBtn();/*nextボタンを隠すか判断*/
    });
    $('.prev').click(function() {/*prevボタンを押したとき*/
       var $displaySlide = $('.active');/*現在表示中のスライドを取得*/
       $displaySlide.removeClass('active');/*そのスライドからactiveクラスを除いて表示されないようにする。*/
       $displaySlide.prev().addClass('active');/*前のスライドにactiveクラスをつけ、表示させる。*/
       toggleChangeBtn();/*prevボタンを隠すか判断*/
    });
});

手順⑧
HTMLファイルのheadタグ内でjQueryとsample.jsを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="sample.js"></script>

最後に

今回は超基本のスライダーを作成しました。
この内容が理解できていればスライドを一枚ずつではなく
二枚ずつ表示することもできたり、
スライダーの下に今、何枚目が表示されているのかのナビゲーション
をつけれたりできるようになります。

参考

Font Awesomeの使い方

css のmarginコマンドの学習
　<!DOCTYPE html>

<meta charset="UTF-8">

<link rel=”stylesheet” href=”style.css”>

<title>書いてみよう！</title>

<p class="first">一番目の要素</p>

<p class="second">二番目の要素</p>

css

.first {
background-color: skyblue;

}

.second {

background-color: orange;

padding: 10px;

margin: 10px;

}

※{margin: 20px 10px 5px 0px;}

上から時計回りで連続指定も可能