20190203のCSSに関する記事は3件です。

投稿日：2019-02-03T22:21:35+09:00

Gatsby.jsで静的なWebサイトをサクッと作る（CSS・SCSS篇）

Gatsby.jsで静的なWebサイトをサクッと作る（インストールからHTML編集篇）の続きです。

今回は、CSS（SCSS）でスタイルをあてるまでを解説します。

SCSSを使えるようにする

そのままでは、SCSSファイルが使えないので、プラグインをインストールします。
$ npm install --save node-sass gatsby-plugin-sass
上記コマンドを実行し、完了したらgatsby-config.jsファイルを作成し、SCSSが使えるように以下の記述をします。
gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-sass`]
}
これでSCSSが使えるようになります。

グローバルなスタイルを設定

まずは、リセットCSS等の全ページに適用されるスタイルを設定してみましょう。src/styles/global.scssを作成します。
global.scss
html {
  color: red;
}
続いて、gatsby-browser.jsを作成しsrc/styles/gloabl.cssをimportします。
gatsby-browser.js
import "./src/styles/global.scss"
これで、文字が赤くなっているはずです。$ npm run developでローカルサーバーを起動し、確認してみましょう。　

スコープされたスタイルを設定する

Gatsby.js（React）では、CSS Modulesを使用し、CSS（SCSS）をスコープさせることができます。現時点ではindex.jsしか存在しないので無意味ですが、コンポーネントが増えてくると、そのコンポーネントでのみ有効なスタイルをあてることができるので、すごく便利です。

では、src/pages/index.jsでのみ有効なsrc/pages/index.module.scssを作成しましょう。
index.module.scss
.txt {
  color: green;
}
続いて、src/pages/index.jsにsrc/pages/index.module.scssをimportします。
index.js
import React from "react"
import Styles from "./index.module.scss"

export default () => (
  <div>
    <p className={Styles.txt}>Hello</p>
    <p>world!</p>
  </div>
)
index.module.scssに書かれた.txtを、index.jsではStylesというオブジェクトとして扱っていています。.txtはStylesのプロパティになっているので、className属性で{Styles.txt}とすると、.txtで設定したCSSプロパティが反映されます。

属性名がclassではなくclassNameになっているのは、classがJavaScriptの予約語で使用できないためです。また、{}で囲うことによりJavaScripを実行できます。

ブラウザを確認すると、Helloのみ緑色になっているはずです。また、ChromeのDevToolsでElementを見てみると、class属性部分がユニークな文字列になっています。

今回はここまで！次回も、乞うご期待！

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-03T10:51:36+09:00

CSS animation で遊び倒す　- 涙 Gooey Effect-

CSS animation day14 となりました。

本日は、Gooey Effect を使って、涙を表現したいと思います。

Gooey effect ってなに？という方は、こちらをご参照ください。

1. 完成版

2. 参考文献

Engineer Blog
背景画像

3. 分解してみる

❶.
まず、Gooey Effect をいじって、どんな表現方法があるか研究します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="gooey">
        <div class="circle"></div>
        <div class="circle"></div>
　　　　 <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </body>
</html>

styles.css

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/gooey effect blur& contrast zone　の高さを200pxにする
.gooey {
  position: relative;
  width: 1000px;
  height: 200px;
  margin: 0 auto;
  filter: blur(10px) contrast(5);
  background: #000;
}

.circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  margin: auto;
  background: #8080ff;
  border-radius: 50%;
  opacity: 1;
}

.circle:first-child {
  left: 15%;
  top: -40%;
}

.circle:nth-child(2) {
  left: 35%;
  top: -60%;
}

.circle:nth-child(3) {
  left: 55%;
  top: -80%;
}

.circle:nth-child(4) {
  left: 75%;
  top: -100%;
}

黒いぼやけが、blur/contrast zoneです。
4つの涙を、y軸の位置をずらして、配置しております。
一番左と、左から2番目が、涙の表現として使えそうです。

❷.
アニメーションを研究する

styles.css

/gooey effect blur& contrast zone　の高さを1000pxにする
.gooey {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
  filter: blur(10px) contrast(5);
  background: #000;
}

.circle:first-child:hover {
  animation: move1 1s linear;
}

.circle:nth-child(2):hover {
  animation: move1 1s ease-in;
}

.circle:nth-child(3):hover {
  animation: move1 1s ease-out;
}

.circle:nth-child(4):hover {
  animation: move1 1s ease-in-out;
}

@keyframes move1 {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateY(100px);
  }
  50% {
    transform: translateY(200px);
  }
  80% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(400px);
  }
}

animation-timing-function を変えました。
左から、linear, ease, ease-in, ease-out です。
落下の表現は、linear が一番良さそうです。

では、keyframe でどんなアニメーションをつけたら良いでしょうか？　
いじります。

styles.css

.circle:first-child:hover {
  animation: move1 1s linear infinite;
}

.circle:nth-child(2):hover {
  animation: move2 1s linear infinite;
}

.circle:nth-child(3):hover {
  animation: move3 1s linear infinite;
}

.circle:nth-child(4):hover {
  animation: move4 1s linear infinite;
}

@keyframes move1 {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateY(100px) scale(0.6, 0.6);
  }
  50% {
    transform: translateY(200px) scale(0.6, 0.6);
  }
  80% {
    transform: translateY(300px) scale(0.6, 0.6);
  }
  100% {
    transform: translateY(400px) scale(0.6, 0.6);
  }
}

@keyframes move2 {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translate(10px, 100px) scale(0.6, 0.6);
  }
  50% {
    transform: translate(20px, 200px) scale(0.6, 0.6);
  }
  80% {
    transform: translate(10px, 300px) scale(0.6, 0.6);
  }
  100% {
    transform: translateY(400px) scale(0.6, 0.6);
  }
}

@keyframes move3 {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateY(100px) scale(0.6, 0.6) rotateX(20deg);
  }
  50% {
    transform: translateY(200px) scale(0.6, 0.6) rotateX(40deg);
  }
  80% {
    transform: translateY(300px) scale(0.6, 0.6) rotateX(60deg);
  }
  100% {
    transform: translateY(400px) rotateX(90deg);
  }
}

@keyframes move4 {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateY(100px) scale(0.6, 0.6) rotateY(20deg);
  }
  50% {
    transform: translateY(200px) scale(0.6, 0.6) rotateY(40deg);
  }
  80% {
    transform: translateY(300px) scale(0.6, 0.6) rotateY(60deg);
  }
  100% {
    transform: translateY(400px) rotateY(90deg);
  }
}

左から順に、
1: Y軸方向へ、サイズを小さくしながら、動く
2: 1: + X軸方向にちょっと動く
3: rotate X する
4: rotate Y する。

1, 4 は自然な流れで、違和感がありません、採用とします。

❸.
最後に、Gooey effect　を駆使して、アニメーションのはじめに涙たまりを表現して完成です。

styles.css

body {
  margin: 0;
  padding: 0;
  background: url("../img/face.png");
  background-size: cover;
  background-position-y: -300px;
  width: 100%;
  height: 100vh;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gooey {
  position: relative;
  width: 1000px;
  height: 200px;
  margin: 0 auto;
  filter: blur(10px) contrast(5);
  background: #fff;
}

.circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  margin: auto;
  background: #8080ff;
  border-radius: 50%;
  opacity: 1;
}

.circle:first-child {
  left: 20%;
  top: -80%;
  width: 100px;
  height: 60px;
}

.circle:nth-child(2) {
  left: 26%;
  top: -80%;
  width: 100px;
  height: 60px;
}

.circle:first-child:hover {
  animation: move1 1s linear 0.2s infinite;
}

.circle:nth-child(2):hover {
  animation: move2 1.5s linear 0.2s infinite;
}

@keyframes move1 {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translate(-20px, 50px) scale(1.2, 2) rotateY(20deg);
  }
  50% {
    transform: translate(-20px, 100px) scale(0.6, 1.1) rotateY(30deg);
  }
  80% {
    transform: translate(-20px, 150px) scale(0.6, 1.1) rotateY(50deg);
  }
  100% {
    transform: translate(-20px, 200px) scale(0.6, 1.1) rotateY(90deg);
  }
}

@keyframes move2 {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translate(20px, 30px) scale(1.2 0.5);
  }
  50% {
    transform: translateY(100px) scale(0.6, 0.6) rotateY(20deg);
  }
  80% {
    transform: translateY(150px) scale(0.6, 0.6) rotateY(50deg);
  }
  100% {
    transform: translateY(200px) scale(0.6, 0.6) rotateY(90deg);
  }
}

See the Pen crying face by hiroya iizuka (@hiroyaiizuka) on CodePen.

CodePen では、上記の通り、うまく表現できませんでした。原因としては
この記事の最初で申し上げた通り、背景が白でないと、このgooey effectはうまく使えず、背景画像との関係で、変な感じになってしまいます。

SVG を使えば、この悩みが解決するとのことで、明日は、Gooey EffectをSVGで表現します。それでは、また明日〜

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-03T04:13:35+09:00

loadしたhtmlにjsを適用させる

loadしたhtmlにjsを適用させる

前提：フォルダ階層
階層
┣ static
┃ ┣ css
┃ ┃ ┗ menu.css
┃ ┣ js
┃ ┃ ┣common.js
┃ ┃ ┗menu.js
┃ ┣ html
┃ ┃ ┗ menu.html
┗ templates
  ┗ main.html
やりたかったこと

機能

現在いるページと対応するメニューの色を変更させたい。

コード

htmlで複数ページを作る時に、メニューのところのhtmlが長いのでmenu.htmlとして外部ファイルを作った。
それをcommon.jsで読み込み、main.htmlにmenu.htmlを適用させた。
更に今いるページと対応するメニューの色を変更するために
特定のタグをactiveにする処理を書いたmenu.jsをmenu.htmlに適応させたい。
main.html
<body>
    <div id="menu"></div>

    
    <script type="text/javascript"
        src="/webjars/jquery/3.3.1/jquery.min.js" charset="utf-8">  
    </script>
    
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/menu.js"></script>
</body>
menu.html
<ul id="nav"> 
   <li><a href="/menu1">MENU1</a></li> 
   <li><a href="/menu2">MENU2</a></li> 
   <li><a href="/menu3">MENU3</a></li> 
   <li><a href="/menu4">MENU4</a></li> 
 </ul> 
common.js
$(window).on('load', function() {
      //main.htmlのmenu要素についてmenu.htmlを適用させる
    $("#menu").load('/html/menu.html');
});
menu.js
//現在のページのurlとメニューのurlが同じだったら、そこのタグをactiveにする
$(function() {
    $('#nav li a').each(function() {
        var $href = $(this).attr('href');
        if (location.href.match($href)) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });
});
menu.css
/*activeになってる要素navの[li a]タグの文字を赤にする*/
#nav li a.active {
    color: red;
}
問題1

menu.jsはちゃんと読み込まれているっぽいけど、activeにならない。
コンソール上のエラーは発生してないが、なんかうまく適用されていない気がする

実際にやってみたこと

menu.html上で直接jsを呼んでみる
menu.html

<script type="text/javascript" src="/js/menu.js"></script>

<ul id="nav"> 
   <li><a href="/menu1">MENU1</a></li> 
   <li><a href="/menu2">MENU2</a></li> 
   <li><a href="/menu3">MENU3</a></li> 
   <li><a href="/menu4">MENU4</a></li> 
 </ul> 
問題2

とりあえず、jsは読み込まれて適用された。が、
コンソールに以下のエラー
error
[[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
よくわらかないけどエラーが出るってことはダメな気がする。気持ち悪いし
あと、ググったらエンドユーザーに影響がどうのって書いてたらかダメなんだと思う

解決方法

menu.htmlをロードする時に一緒にjsもロードしてあげる！
common.js
$(window).on('load', function() {
      //main.htmlのmenu要素についてmenu.htmlを適用させる
    $("#menu").load('/html/menu.html');
    //変更したところ↓
    $.getScript("/js/menu.js", function() {
    });
    //変更したところ↑
});
これでエラーなくちゃんとactiveにすることができた

参考にしたサイト

http://mugen00.moo.jp/web/jquery/getscript-2

　 Tweet
Qiitaで続きを読む

20190203のCSSに関する記事は3件です。

Gatsby.jsで静的なWebサイトをサクッと作る（CSS・SCSS篇）

SCSSを使えるようにする

グローバルなスタイルを設定

スコープされたスタイルを設定する

CSS animation で遊び倒す　- 涙 Gooey Effect-

1. 完成版

2. 参考文献

3. 分解してみる

loadしたhtmlにjsを適用させる

loadしたhtmlにjsを適用させる

前提：フォルダ階層

やりたかったこと

機能

コード

問題1

実際にやってみたこと

問題2

解決方法

参考にしたサイト

日付別

タグ一覧

20190203のCSSに関する記事は3件です。

Gatsby.jsで静的なWebサイトをサクッと作る（CSS・SCSS篇）

SCSSを使えるようにする

グローバルなスタイルを設定

スコープされたスタイルを設定する

CSS animation で遊び倒す - 涙 Gooey Effect-

1. 完成版

2. 参考文献

3. 分解してみる

loadしたhtmlにjsを適用させる

loadしたhtmlにjsを適用させる

前提：フォルダ階層

やりたかったこと

機能

コード

問題1

実際にやってみたこと

問題2

解決方法

参考にしたサイト

日付別

タグ一覧

CSS animation で遊び倒す　- 涙 Gooey Effect-