月別アーカイブ: 2021年9月

MySQL(その3学習環境構築)

コメントを残す

その２から続きます

1:学習環境構築

homebrewをターミナルからインストールする。以下をターミナルでコマンド

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew –versionでバージョンが確認できる(インストールできているかわかる)
MySQLをインストール

brew install mysql

2:日本語化設定と暗号化プラグインの設定

設定ファイルを開く

vim /usr/local/etc/my.cnf
設定ファイルに以下を記述

character-set-server=utf8 default_authentication_plugin=mysql_native_password
MySQL起動

mysql.server start
セキュリティーの初期設定をする

mysql_secure_installation
パスワードを設定する
パスワードを使ってルートユーザーでログイン

mysql -u root -p
再起動して設定を反映する

mysql.server restart
MySQLを使わないときは停止する

mysql.server stop
MySQLを使う時(ログインしたときなど)

mysql.server start
MySQL Workbenchをインストール
こちらのサイト様を参考にインストール
MySQL Workbenchを起動し「Database」タブの「Connect to Database」
から設定を確認し、OKボタンを押す

続きを読む →

MySQL(その２データ型について）

コメントを残す

1から続きます

1:データ型とは？

データベースでは、テーブルを作成するときに、それぞれの列に指定した形式のデータしか、
入力できないように設定する。

この時指定するデータの形式のことをデータ型という

2:データ型の種類(数値型)

・int型：整数(-2147483648~-2147483647)

・int unsigned:符号無しとすることができる。つまり正の整数だけを扱うことで、扱える値の範囲が増える

・tinyint型：とても小さな整数(-128~127)

・tinyint(1):真偽値true/falseを扱うことができる

内部的にはtrueは数字の1、falseは数字の0で管理されている。

MySQLでは0とnullがfalseで、空文字を含むそれ以外の値はすべてtrueとなる。

null:データが存在しないことを表す値

・float型：小さい浮動小数点数 (-3.402823466E+38〜-1.175494351E-38,0,および、1.175494351E-38〜-3.402823466E+38)Eは10nなので1.175494351E-38は1.175494351×1038

・double型：浮動小数点数(-1.7976931348623157E+308~2.2250738585072014E-308,0および、2.2250738585072014E-308~1.7976931348623157E+308)

実務上整数型はint、整数の中でも、真偽値を扱いたいときや、127以下の数字を扱うときはtinyint、小数を扱うときは、doubleを使うことが多いらしい。

floatは、あまり使われないようです。

続きを読む →

MySQLのまとめ(その１MySQLの概要)

コメントを残す

1:MySQLとは？

オープンソースのリレーショナルデータベースマネジメントシステム（RDBMS)で
データベースを管理するためのもの。

MySQL Community Editionを無料で利用できる

2:データベースとは？

検索や蓄積が容易にできるよう整理された情報の集まり

すべてのシステムがデータを散り扱っている。

データを取り扱う手段として、ほぼすべてのシステムが何かしらのデータベースを使用している。

データベースを管理するシステムのことをデータベースマネジメントシステム(DBMS)と呼ぶ

続きを読む →

Javascript ex2(サイト作成詳細Ver)

コメントを残す

サイトの作成手順などまとめ

いつでも、すぐに作れるように

1:まず初めにindex.htmlを作成する（太字の部分があるのを確認）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
 
</body>
</html>

2：レスポンシブデザインにしたいので、Stylesというフォルダーを作成し、style.scssを作成して以下のような設定をする。(モバイルファースト)

 // スマホ画面の設定
@import "breakpoints/base";

// スマホ横向きのときの設定
@media (min-width: 480px) {
@import "breakpoints/480up";
}

// タブレットのときの設定
@media (min-width: 600px) {
@import "breakpoints/600up";
}

@media (min-width: 960px) {
@import "breakpoints/960up";
}

@media (min-width: 1280px) {
@import "breakpoints/1280up";
}

// Retinaディスプレイで適用
@media (min-resolution: 192dpi)
,(-webkit-min-device-pixel-ratio: 2) {
@import "breakpoints/2x";
}

// 印刷時のみ適用される設定
@media print {
@import "breakpoints/print";
}

3:フォルダーbreakpointsを作成してその中に各画面サイズ用の設定のためのscssを作成する(中身は後で作成します)。

4：ヒーロースライダーの機能の実装+Googlefontの利用とbootstrap-reboot.cssの準備)

index.htmlを以下のように記述して、googlefontsとbootstrap-reboot.css(中身は後で配置)を利用する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Flower Garden</title>
<meta name="description" content="This site is a my site.">
<link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/vendors/swiper.min.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div id="global-container">
<div id="container">
<div id="content">
<div class="hero">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__title">Magnificence</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Solidarity</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Gentility</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/vendors/swiper.min.js"></script>
<script src="scripts/libs/hero-slider.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

↓の画像を参考に各ファイルを配置する

  1. フォルダーscriptsを作成してその直下にlibsのフォルダーを作成してヒーロスライダーのjsファイルを記述する。
  2. フォルダーscriptsの直下にvendorsのフォルダーを作成してswiper.min.jsを配置
  3. scriptsの直下にmain.jsを配置
  4. stylesの直下にフォルダーbreakpointsを作成して各scssファイルを作成する。
  5. stylesの直下にフォルダーmodulesを作成して各scssファイルを作成する。
  6. stylesの直下にフォルダーvendorsを作成してswiper.min.cssを配置する。
  7. stylesの直下にstyle.scssを配置する。

↑の詳細

1：hero-slider.jsの詳細

class HeroSlider {
constructor(el) {
this.el = el;
this.swiper = this._initSwiper();
}

_initSwiper() {
// returnでインスタンスに返す
return new Swiper(this.el, {
// オプション詳しくはSwiperで
// direction: 'vertical',
loop: true,
// effect: 'fade',
grabCursor: true,
effect: "coverflow",
// スライダーを中央揃えにする
centeredSlides: true,
// 1枚だけ表示する
slidesPerView: 1,
speed: 1000,
breakpoints: {
// 1024px以上は2枚表示する
1024: {
slidesPerView: 2,
},
},
});
}
// 空のオブジェクトを作る
start(options = {}) {
options = Object.assign(
{
delay: 4000,
// マウスで変更したあとでも4秒後、またオートでトランジション開始する
disableOnInteraction: false,
},
options
);

this.swiper.params.autoplay = options;
this.swiper.autoplay.start();
}
stop() {
this.swiper.autoplay.stop();
}
}

3の詳細：main.js

document.addEventListener('DOMContentLoaded', function () {
// newでインスタンス化
const hero = new HeroSlider('.swiper-container');
hero.start();
});

5の詳細：_mixin.scss

@mixin animation(
$name,
$duration: 1s,
$timing-function: ease,
$delay: 0s,
$iteration-count: 1,
$direction: normal,
$fill-mode: forwards
) {
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
delay: $delay;
iteration-count: $iteration-count;
direction: $direction;
fill-mode: $fill-mode;
}
}
_hero-slider.scss



.swiper-container {
overflow: visible !important;
}

.swiper-slide {
height: 500px;
// 拡大してはみ出た部分を表示しない
overflow: hidden;

& > img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
// 拡大する
transform: scale(1.3);
transition: transform 1.9s ease;
}

&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 61, 125, 0.1);
}

&-active {
& > img {
transform: none;
}

& .hero__title {
// 透明度を解除
opacity: 1;
transform: translate(-50%, -50%);
}
}
}

.hero {
&__title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 20px));
color: $cWhite;
font-size: 25px;
// 文字が最前面にくるようにする
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease 1s, transform 0.3s ease 1s;
}

&__footer {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 2;
height: 68px;
width: 32px;
// アニメーションで上下に動いているように見えなくする
overflow: hidden;
}

&__downarrow {
position: absolute;
left: 0;
bottom: 0;
width: 6px;
// アニメーションを付けるために必要
@include animation(
$name: kf-arrow-anime,
$iteration-count: infinite,
$duration: 2s,
$timing-function: linear
);
}

&__scrolltext {
position: absolute;
// 90度回転
transform: rotate(90deg);
color: rgba(255, 255, 255, 0.7);
left: -8px;
top: 15px;
font-size: 1.2em;
}
}

@keyframes kf-arrow-anime {
0%,
50%,
100% {
transform: translateY(-10%);
}
30% {
transform: none;
}
}

5：ノーマライズする。

vendors直下にbootstrap-reboot.cssを配置する。(ここからget)

6:共通クラスを作って複数回同じことを書かないようにする

_base.scssに以下のように記述

// Stylesheet: ベーススタイル(スマホ用の設定)
body {
  font-family: "Kameron", "Noto Sans JP", sans-serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
.font-sm {
  font-size: 14px;
}
.font-md {
  font-size: 17px;
}
.font-lr {
  font-size: 17px;
}
.font-lg {
  font-size: 25px;
}
.mb-sm {
  margin-bottom: 16px !important;
}
.mb-lg {
  margin-bottom: 80px !important;
}
.pb-sm {
  padding-bottom: 16px !important;
}
.pb-lg {
  padding-bottom: 80px !important;
}
.content-width {
  width: 90%;
  margin: 0 auto;
  max-width: $contentMaxWidth;
}

ある程度よく使うもの(フォントのサイズやマージンやパディング)を共通化する。

7:ヒーロースライダー用の画像をimagesフォルダの中に配置する。

なんでもOK

8：テキストアニメーションの追加(流れで後で記述を追加する)

↓の画像を参考に各ファイルを配置する。(中身は後述)

  1. フォルダーlibsの直下にscroll.jsファイルを作成する。

  2. vendorsの直下にscroll-polyfill.jsを配置

  3. vendorsの直下にtext-animation.jsを配置

  4. vendorsの直下にTweenMax.min.jsを配置

  5. main.jsの記述を変更

  6. modulesの直下にtext-animation.scssを配置する。

  7. style.scssやindex.htmlに読み込むための記述をする。

貼り付けたmain.js内の以下を切り取り

scripts/main.jsにこのように貼り付け

index.htmlの中身<body>から

<body>
<div id="global-container">
<div id="container">
<div id="content">
<div class="hero">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__title">Magnificence</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Solidarity</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Gentility</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<div class= animate-title>text-animation</div>
<div class= "tween-animate-title">Tween-text-animation</div>
<script src="scripts/vendors/swiper.min.js"></script>
<script src="scripts/vendors/TweenMax.min.js"></script>
<script src="scripts/vendors/scroll-polyfill.js"></script>
<script src="scripts/libs/scroll.js"></script>
<script src="scripts/libs/text-animation.js"></script>
<script src="scripts/libs/hero-slider.js"></script>
<script src="scripts/libs/mobile-menu.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

_button.scssと_image-slide.scssをmodules直下に作成する。(記述は後ほど)

9：ローダーの追加

vendors直下にpace.jsを配置する。

htmlの<head>タグ内に読み込むよう記述(太字部分)

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Flower Garden</title>
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/loader.css">
<script src="scripts/vendors/pace.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/vendors/swiper.min.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>

styles直下にloader.scssを配置する

続きます

Javascript ex1(Javascriptの構文)

コメントを残す

Javascriptの基本構文とその出力結果をまとめてみた。

1:変数の定義var,let,const

// var, let, const
// varは上書きできる
var name = 'Tom';
console.log('hello' + name);

// letも上書きできるよ
let name2 = 'anna';
name2 = 'Pon'
console.log('hello' + name);

// データ型は Number, String, Boolean, Undefined, Null, Symbol

let variable = 'str';
variable = 12;
variable = undefined;
variable = null;
variable = false;

// 実際に確認するには？
console.log(typeof variable);
// ポイント上書き禁止はconstで定義しよう！

// あとから上書きできないのでエラーになるよ
const nam = 'Yan';
nam = 'Tim';

出力結果

続きを読む →

JavaScript14(知見まとめ)

コメントを残す

サイト作成から得られた知見をまとめてみる

index.htmlで得た知見(ざっとで)

headタグ

headタグの中でサイトのタイトル、説明、ロゴが設定できる

スタイルシートの読み込みもできて読み込む順番が重要である

pace.jsもここで読み込み

Googleフォントもここで読み込める

<body>から

global-containerはローダーの設定やモバイルメニューで必要。

<divclass="mobile-menu__cover"></div>

<divclass="nav-trigger"></div>

この2つはスクロール監視とモバイルメニューのカバーのためにある

基本的に親要素__innerをつくり@extend.flex;など使うことによってレスポンシブ対応する

<h2 class="main-title tween-animate-title">Pick up</h2>

上のようにtween-animate-titleを付けてテキストアニメーションの準備をしている

&copy;でコピーライトのマークが作れる

&nbsp;を使うことでスペースを表現できる

スクリプトを読み込むときmain.jsは最下段が良い

続きを読む →

JavaScriptのチートシート

コメントを残す

JavaScriptのチートシート

0:JavaScriptの基本構文とその出力結果について調べたいとき

Javascript ex1(Javascriptの構文)

1:var,let,constと引数、戻り値、プロパティとメソッドについて調べたいとき

JavaScript学習のまとめ0(変数､関数､メソッドとプロパティー)

2:Array,オブジェクト、for、for in、for ofについて調べたいとき

https://suzutukiblog.com/index.php/2021/03/02/javascript1/

続きを読む →

JavaScript13(Netlyfyにデプロイする)

コメントを残す

1:Netlifyにデプロイする準備

index.htmlに以下の記述にする

タイトルとサイトの説明とアイコンの設定をしているよ

MinifyでJavaScriptやCSSのスペースを除去する作業をして貼り付け

画像を圧縮してサイズを小さくする

手動でもいいが、自動化する場合は別の記事で記載します

続きを読む →

Javascript12.5(モバイルメニューの追加)

コメントを残す

モバイルメニューの追加

scripts/libsにmobile-menu.jsを作成し以下の記述にする

class MobileMenu {
// コストラクタ関数を用意する
  constructor() {
// オブジェクトリテラルで初期化
  this.DOM = {};
  this.DOM.btn = document.querySelector('.mobile-menu__btn');
  this.DOM.cover = document.querySelector('.mobile-menu__cover');
// this.DOM.containerでないとエラーになるよ
  this.DOM.container = document.querySelector('#global-container');
  this.eventType = this._getEventType();
  this.__addEvent();
}

// プライベートメソッドにする(修正や保守のしやすさのため)
_getEventType() {
// スマホとデスクトップ対応するためにクリックかタッチかで処理をわける
  return window.ontouchstart ? "touchstart" : "click";
}

_toggle() {
// global-containerにクリックするたびにmenu-openを付加、解除
  this.DOM.container.classList.toggle("menu-open");
}
__addEvent() {
// ボタンが押されたら発火
this.DOM.btn.addEventListener(this.eventType, this._toggle.bind(this));
// カバーかクリックしたときに発火
this.DOM.cover.addEventListener(this.eventType, this._toggle.bind(this));
 }
}

モバイルメニューが正常に働くことを確認する

worldの部分(アニメーションの追加)

.world {
  @extend .content-width;
  @extend .mb-lg;
// 親要素でローカルスタッキングコンテキストを作るために必要
  &__inner {
    @extend .flex;
    justify-content: space-between;
// 周りに壁を作る
    padding: 15px;
    background-color: $cBgGray;
// 下の２つはローカルスタッキングコンテキストを作る設定
    position: relative;
    z-index: 0;
}

  &__title {
// 横線の位置決め
    position: relative;
// 横線を疑似要素で出力する
@include p-base(
$display: none,
$width: 70px,
$height: 1px,
$top: 50%,
// 線の長さ
$left: -75px
) {
// 棒線が伸びるアニメーション
  background-color: $cBlack;
  transform: translateY(-50%) scaleX(0);
// 右側を中心に伸びるアニメーション
  transition: transform 0.3s ease 1.6s;
  transform-origin: right;
 }
}
  &__sub {
    @extend .mb-sm;
}

  &__img {
    height: 300px;
    @extend .mb-sm;
// アニメーションが終わったときに表示したいので
    transition: box-shadow 1ms linear 0.8s;

    & > img {
      position: relative;
// ボックスシャドウを背面につけるための設定
      z-index: -1;
// 画像には基本object-fitをつける
      object-fit: cover;
// 画像の上部分を中心にしたいので
      object-position: top;
// 外側の親要素タテヨコ100％で画像が表示される
      width: 100%;
      height: 100%;
}

  &.inview {
// 内側にボックスシャドウを付ける設定
    box-shadow: inset 0 0 30px $cBlack;
}
}

  &__texts {
  @extend .pb-sm;
// 横線のアニメーションの設定
  &.inview {
  & .world__title::before {
//右から左に線が伸びるように
     transform: translateY(-50%);
   }
  }
 }
}

サイドバーやロゴのスタイル

//ロゴ
.logo {
  font-size: 42px;
  display: flex;

  &__img {
    width: 0.7em;
}

  &__Garden {
    color: $cWineRed;
 }
}
// スマホ画面のときサイド要素を非表示にする
.side {
  display: none;
// 固定する
   position: fixed;
// 画面の上から７０％から表示する
  top: 70%;
// ここは検証で試してみるとよい
  transform: translateY(-50%);
  transition: all 0.3s ease-in;
  & .tween-animate-title {
    color: $cBlack;
    text-decoration: none !important;
    margin: 0 40px;
// ロゴと文字の中心のズレを修正
    vertical-align: middle;
    letter-spacing: 2px;
}
// サイドバー左側の設定
  &.left {
    left: -50px;
  &.inview {
    left: 50px;
}
  & .side__inner {
// 左端を軸とするための設定
    transform-origin: top left;
// 文字を-９０度回転させる
    transform: rotate(-90deg);
}
}
// サイドバー右側の設定
  &.right {
    right: -50px;
  &.inview {
    right: 50px;
}
  & .side__inner {
// 右端を軸とするための設定
    transform-origin: top right;
// 文字を９０度回転させる
    transform: rotate(90deg);
  }
 }
}
.icon {
  position: relative;
@include p-base($left: -20px, $top: 50%, $width: 1em, $height: 1em) {
transform: translateY(-50%);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
//ロゴの設定
  &.twitter {
     &::before {
      background-image: url(../images/twitter.svg);
 }
}
  &.fb {
  &::before {
    background-image: url(../images/facebook.svg);
  }
 }
}
// サイドバーのローカルスタッキングコンテキストを作るための設定 
#main-content {
 position: relative;
 z-index: 0;
}
// サイドバーより背面にしたい 
main {
 position: relative;
 z-index: -1;
 }

サイドバーは前面にしたいのでmainのz-indexを低くしている

_600up.scssに以下の記述にする

// Stylesheet: 600px以上のタブレットやモニタで適用
.flex {
// 横に2列したいときの設定
  flex-direction: row;
// これを設定しないとflex-basisが変わらない
  flex-wrap: wrap;
}

.flowers {
  &__item {
    flex-basis: 50%;
    margin-bottom: 60px;
}
}

.popular {
  &__container {
// 余白を真ん中にしたい
     justify-content: space-between;
}

  &__item {
    flex-basis: 47%;
}
}

.world {
  &__inner {
    padding: 50px;
}
  &__texts,
  &__img {
    flex-basis: 47%;
}

  &__texts {
    display: flex;
// 文字を下揃えにするときに便利な設定
    align-items: flex-end;
}
}

.footer {
  & .logo {
// 左寄りにする右寄りはflex-end
    justify-content: flex-start;
}

  &__li {
// 検証を使いながら位置調整
    margin-left: 0;
    margin-right: 30px;
 }
}

.flexにflex-wrap: wrap;をつけるのを忘れないように！(flex-basisで調整できないから)

_960up.scssに以下の記述にする

// Stylesheet: 960px以上のモニタで適用

.font-sm {
  font-size: 16px;
}
.font-md {
  font-size: 19px;
}
.font-lr {
  font-size: 23px;
}
.font-lg {
  font-size: 36px;
}
.mb-lg {
  margin-bottom: 150px !important;
}
.pb-lg {
  padding-bottom: 150px !important;
}

.popular {
  &__item {
    flex-basis: 25%;
}

  &__img {
    height: 335px;
}
}

.world {
  &__img {
    height: 400px;
}

  &__description {
    margin-bottom: 40px;
}
  &__title {
// アニメーションを表示するための設定
  &::before {
// 960px以上のときアニメーションするように設定
    display: block;
}
}
}

.footer {
  &__li {
    justify-content: flex-start;
}
}
// 960以上ではヘッダー表示
.header {
  &__nav {
    display: block;
}
}
// ハンバーガーメニューを非表示にする(モバイル用でないため)
.mobile-menu {
  &__btn {
    display: none;
}
}
// スワイパースライドに影をつける
.swiper-slide {
  box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
}

ハンバーガーメニューを非表示にすることdisplay: none;

960px以上のときアニメーションとヘッダー表示display: block;を忘れずに！

_1280up.scssに以下の記述にする

// Stylesheet: 1280px以上のモニタで適用

.world {
  &__inner {
    padding: 50px 150px;
}
}
.popular {
  &__item {
    flex-basis: 23%;
}
}
// サイドバー要素を表示する
.side {
  display: block;
}


display: block;でサイドバーを表示させるのを忘れずに！


_viriables.scssを以下の記述にする




$cWhite: white;
$cBlack: black;
$cSubTitle: #535353;
$cBgGray: #eaebe6;
$cWineRed: #904669;
$contentMaxWidth: 1070px;
$navHeight: 100px;




2:ページローダーの導入


以前作成したページローダーを流用する


pace.jsとloader.scssをコピーして貼り付け以下のように配置




index.htmlの<head>タグの中に読み込ませるよう記述する




loader.scssに読み込ませるため以下のように記述




このようになっていればOK


3:_appear.scssを追加してアニメーションを追加する


フェードインアニメーションで作った_appear.scssをmodulesに配置してstyle.scssで読み込む




使い方index.htmlの親要素にappearをつけて子要素にitemをつけるとフェードインアニメーションを付加できる。