TIL

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

環境変数の表示 printenv - Linuxコマンド

printenv コマンドで環境変数の一覧の表示ができる

$ printenv
LANG=ja_JP.UTF-8
SHELL=/usr/local/bin/bash
...

参考文献

ディレクトリをコピー

ディレクトリのコピーにはcpコマンドを使う。

-rオプションを使うとディレクトリのコピーができる

$ cp -r from/ to/

参考文献

【 cp 】 ファイルやディレクトリをコピーする | 日経 xTECH(クロステック)

ぷるんと回転するアニメーションの実装(写経して改良) - CSS

ぷるんと回転するアニメーションを写経して、改良してみた

See the Pen ぷるんと回転 by tamago (@tamago324) on CodePen.

  1. サンプルではmatrix3d()で実装されていたが、matrix()でもいいんじゃないかと思ってmatrix()で実装し直してみた
  2. その次に、rotateでいいんじゃないかと思って、rotateで実装

matrixで100pxっぽくなるようにしていたため、rotateの方が回転させるだけなので、楽に実装できる

matrix()関数

これはtransformプロパティの値に指定できる関数で、行列を使って2Dの変形を実現するらしい

基準はmatrix(1, 0, 0, 1, 0, 0)となっている。この状態では何も変形していない状態

1番目の数値は、水平方向の縮尺(a)
2番目の数値は、垂直方向の傾斜率(b)
3番目の数値は、水平方向の傾斜率(c)
4番目の数値は、垂直方向の縮尺(d)
5番目の数値は、水平方向の移動距離(e)
6番目の数値は、垂直方向の移動距離(f)

transform:matrix()-CSS3リファレンス

水平(x)と垂直(y)の縮尺と傾斜率と移動距離を指定するらしい

See the Pen matrix 試し by tamago (@tamago324) on CodePen.

色々やってみたけど、よくわからないから、rotate()とかscale()とかtranslate()とかでやったほうがいいかも...

matrix(a, b, c, d, e, f)matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0 , e, f, 0, 1)と同じ意味らしい

参考文献

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

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.jsonpackage-lock.jsonというファイルが作られる

SCSS記法のSassのコンパイル

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

$ npm install -D gulp gulp-sass

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

記事によっては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についてのメモ

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: 数値;

単位はmssのどちらかで記述できる

transition-delay: 500ms;  // 0.5s

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

参考文献

box-shadow - CSS

影をつけることができる。
あと、図形を複製することもできる

box-shadow: offset-x, offset-y, (blur-radius), (spred-radius), (color), (inset);
  • offset-x: 左右の影
  • offset-y: 上下の影
  • blur-radius: ぼかし具合
  • spred-radius: 影の広さ
  • color: 影の色
  • inset: 内側に影を表示する
続きを読む

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

codepen.io

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

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