TIL

Today I Learned. 知ったこと、学んだことを書いていく

【Gulp】インストールからSassのコンパイルまで - CSS

CSS Sass

SassのコンパイルをするときにGulpというものを使うといいって聞いたことあるからインストールとコンパイルを行ってみた

Gulpはめんどくさいことを自動で行ってくれたりするらしい。

環境

OS

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.13.3
BuildVersion:   17D102

Node.js

$ node --version
v8.7.0

コンパイル

プロジェクト毎にGulpをインストールして色々設定をしないといけない スクリプト作ったほうが良さそう...いつかやろう

プロジェクト設定ファイルの作成

$ npm init -y

package.jsonとpackage-lock.jsonというファイルが作られる

SCSS記法のSassのコンパイル

Gulp本体(gulp)とコンパイルするためのモジュール(gulp-sass)をインストールする

$ npm install -D gulp gulp-sass

-Dオプションを付けてカレントディレクトリに対してインストールする
-Dは--save-devの省略した形らしい。また、installはiでもいいらしい

記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。2017年現在、それは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。

タスクの作成

自動で実行したい処理をgulpfile.jsに記述する必要がある

// 使用するプラグインを読み込む
const gulp = require('gulp');
const sass = require('gulp-sass');

// タスク
gulp.task('default', function () {
  // css/style.scssを選択
  gulp.src('css/style.scss')
    // コンパイル
    .pipe(sass({
      // 見やすくする
      outputStyle: 'expanded'
    }))
    // コンパイルしたファイルをcssフォルダに格納
    .pipe(gulp.dest('css'));
});

pipeを使うことで処理をつなげることができる

タスクの実行

$ npx gulp

gulpfile.jsに記述されているタスクを実行してくれる

Sassファイルが更新されたら自動でコンパイルする

Watchという機能を使うことで自動でコンパイルできるようになるらしい

gulp.watch()メソッドを使うことで、更新があった場合に自動で処理を実行してくれるらしい。

gulp.watch(ファイル名, 処理)

watchメソッドの処理の部分にコンパイル処理を渡す

const gulp = require('gulp');
const sass = require('gulp-sass');
const src = 'css/style.scss';

gulp.task('default', () => {
  // 更新時にコンパイル
  gulp.watch(src, () => {
    gulp.src(src)
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassコンパイルエラー表示(必須！！)
      .on('error', sass.logError))
      .pipe(gulp.dest('css'));
  });
});

また、コンパイルエラーの表示処理も入れてあげないといけないらしい

監視の開始

$ npx gulp

Ctrl+cで止めることができる


こんな感じで使えるようにはなった！！ いろんな事ができるらしいから、使っていくうちに試していこう

参考文献

transitionについてのメモ

CSS

transitionとは

プロパティを変更するときにどのように変化させるかを設定できるプロパティ！

.boxに定義された値・・・transitionのスタート値
.box:hoverに定義された値・・・transitonのゴール値

CSSアニメーションの基礎【Transitionを使ってみる】 | キタックCGソリューションセンター｜Webマーケティング

もし、hover時に適用するスタイルが合った場合、:hoverに記述したスタイルがアニメーション後のスタイルになる

プロパティ

指定する値は以下の通り

  • transition-duration: かける時間
  • transition-property: 適用するプロパティ名
  • transition-timing-funciton: 変化の仕方
  • transition-delay: 始まるまでの時間

transitionでは、上の4つを1度に指定できる

transition-duration

始まりから終わりまでの時間を指定できる

transition-duration: 時間(ms, s);

かける時間を1000msと300msとした場合

transition-duration: 1000ms;

See the Pen transition-duration by tamago (@tamago324) on CodePen.

transition-peorperty

transition-propertyでtransitionを適用させるプロパティを指定することができる
widthだけにtransitionの効果を適用とかもできる

transition-property: プロパティ名;

設定できるキーワードがいくつかある

  • none: transitionを適用しない
  • all: すべてのプロパティに対して適用する

例）background-colorとwidthを変化させるとき、transitionをwidthだけに適用する

transition-property: width;

See the Pen transition-property by tamago (@tamago324) on CodePen.

横幅の変化だけ、transitionが適用されているのがわかる

transition-timing-function

transition-timing-functionでtransitionの進行度とタイミング(変化の仕方)を指定できる

値として設定できるキーワードがいくつかある

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

また、cubic-bezier()関数を使うことでいろいろな動きができる

See the Pen transition-timing-function by tamago (@tamago324) on CodePen.

cubix-bezier関数で実現できる例を見れるサイト

cubic-bezierでも表現できないものに関しては@keyframeのアニメーションで実装するらしい

transition-delay

transition-delayで開始を遅らせる時間を指定する

transition-delay: 数値;

単位はmsとsのどちらかで記述できる

transition-delay: 500ms;  // 0.5s

See the Pen transition-timing-function by tamago (@tamago324) on CodePen.

参考文献

Wi-Fiハンカチ(青海波柄)を作ったとき知ったこと - CSS

CSS つくってみた

codepen.io

これを作ったときに知ったことを書いていく

  • ソース
  • wihte-space: nowrap;で折り返しをしない
  • :nth-child()を使うことで指定の要素にスタイルを適用できる
  • box-shadowのinsetで内側に影を作れる
  • border-radius: 50%;で円を作れる
  • z-indexが効かないときはpositionを設定する
  • 参考文献
続きを読む

指定の子要素に対してスタイルを適用 nth-child - CSS

CSS

nth-childを使うことで「2番目だけ」とか「5番目以降」にスタイルを適用するみたいなのができるようになる。

偶数番目の要素だけとか！！

nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させることができます。 多数の項目がある表で、交互に背景色を設定し見やすくしたい時などに役立ちます。

擬似クラスを覚えよう！CSSのnth-childの使い方 | TechAcademyマガジン

書き方

セレクタ:nth-child(値) {...}

指定できる値の種類は以下の通り

値 説明
2nかeven 偶数番目の要素
2n+1かodd 奇数番目の要素
a a番目の要素
n+b b番目以降の要素(bを含む)
-n+b b番目以前の要素(bを含む)
an aの倍数の要素

※ aとbは整数

偶数 番目に適用

2nかevenを指定する

.content:nth-child(2n) {...}
.content:nth-child(even) {...}

偶数番目の背景色を水色に変える

See the Pen 偶数番目にスタイルを適用 by tamago (@tamago324) on CodePen.

奇数 番目に適用

2n+1かoddを指定する

.content:nth-child(2n+1) {...}
.content:nth-child(odd) {...}

奇数番目の背景色を水色に変える

See the Pen 奇数番目にスタイルを適用 by tamago (@tamago324) on CodePen.

n番目の要素に適用

n番目だけに適用したい場合、その「数値」を指定する

.content:nth-child(数値) {...}

3番目だけ背景色を水色に変える

.content:nth-child(3) {...}

See the Pen 3番目だけにスタイルを適用 by tamago (@tamago324) on CodePen.

nを指定すると？？？

nを指定すると、全てという意味になる
たまたま、nだけ記述したら全てに適用されて発見した

.content:nth-child(n) {...}

n番目以降の要素に適用

n+数値とすることで、指定した数値以降の要素にスタイルが適用される

.content:nth-child(n+数値) {...}

3番目以降の要素の背景色を水色に変える

.content:nth-child(n+3) {...}

See the Pen n番目以降の要素にスタイルを適用する by tamago (@tamago324) on CodePen.

n番目以前の要素に適用

-n+数値とすることで、指定した数値以前の要素にスタイルが適用される

.content:nth-child(-n+数値) {...}

3番目以前の要素の背景色を水色に変える

.content:nth-child(-n+3) {...}

See the Pen QrGMPy by tamago (@tamago324) on CodePen.

応用？

:nth-child()をつな出て書くことで範囲指定することができる

.content:nth-child(値):nth-child(値) {...}

3番目から5番目まで背景色を水色に変える

.content:nth-child(n+3):nth-child(-n+5) {...}

See the Pen 3から5番目までスタイルを適用 by tamago (@tamago324) on CodePen.

参考文献

線形グラデーション linear-gradient関数 - CSS

CSS

グラデーションの表示をするにはlinear-gradient関数を使う。

cssアニメーションでグラデーションをしようとしていたときに見つけたこのサイトで知った

このlinear-gradientは線形グラデーションと呼ばれるらしい。他には円形グラデーション(radial-gradient)、反復線形グラデーション(repeating-linear-gradient)、反復円形グラデーション(repeating-linear-gradient)がある。

この関数の戻り値はimageとなっているため、imageを値として扱うプロパティにしか使えない。

cssに関数ってあるんだね...てっきりプロパティかと思ってた。たしかに、値のところに記述されてたからプロパティではないか...

liner-gradient(角度？, 開始色, 終了色)

例）背景をグラデーションにしてみる

body {
  background-image: linear-gradient(-90deg, #E9C886, #86E9B8);
}

See the Pen グラデーション！！！ by tamago (@tamago324) on CodePen.

え、こんな簡単にグラデーションできちゃうの...すご...

こんなのあるんだー程度に覚えておこう！！

参考文献