知らないCSSプロパティ・セレクターを知る

CSSのプロパティやせレクターを確認するにはMDNの以下のページを見るとよさそう。

https://developer.mozilla.org/ja/docs/Web/CSS/Reference

索引はアルファベット順でまとめられてる。A, B, Cの部分を見ただけでも知らないことがこれだけあった。

• all ... すべてのプロパティをリセットする
• caption-side ... テーブルにつけられたキャプションの位置指定
• color() ... clip-path プロパティで使用される値
• column 系 ... 段組みレイアウトをつくる

最初の方見ただけでこれだ。先は長い。

これから始めるCSSの情報収集

このへん見てるといいのかな。一旦これで。

• CSS | MDN
• タグ「css」を検索 - はてなブックマーク
• Archives - CSS Layout News
• Archives – CSS Weekly
• Forums Archive - CSS-Tricks
• Search Results for css on CodePen

もうすこしギャラリー的なイメージで見れるサイトがほしい。Search Results for css on CodePenにあんまりいいのが出てこない。

CSS Colors で好きな色

デモ用にコード書いたりするときはCSS Color Nameを使う。以下のページをよく見る。

• https://www.w3schools.com/cssref/css_colors.asp

一番よく使うのは color: tomato 。color: red` ほど強すぎず、使いやすい目に優しい色だと思う。

つぎは @namikuguri のブランドカラーにもなってる color: blue 。インターネットの色、という感じで好き。

嫌いなのは color: yellow 。明るすぎて見えず、使いどころが少ない。

とまぁ、雑談。

よくわからない動きをさせながら円周上に点を配置

よくわからない動きをさせながら円周上に点を配置 | JSFiddle

こんなコードになった。

li {
  ...

  $r: 40;

  @for $t from 1 through 100 {
    &:nth-child(#{$t}) {
      // 色
      $hue: (360 / 100) * $t;
      $color: hsl($hue, 100, 68);
      background-color: $color;

      // アニメーション
      animation-name: scale#{$t};
      animation-duration: calc(100s / #{$t});
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-iteration-count: infinite;

      // それぞれ100%のときの座標が違うので、点ごとに@keyframesが必要になる
      @keyframes scale#{$t} {
        0% {
          transform: translate(0, 0);
        }
        100% {
          // 円周上に点を配置
          $angle: (360 / 100) * (pi() / 180) * $t;
          $x: $r * cos($angle) + vmin;
          $y: $r * sin($angle) + vmin;
          transform: translate($x, $y);
        }
      }
    }
  }
}

@keyframesの100%の指定は省略できるので、こんなふうにも書ける。@keyframesをfor文の直下においている。このほうが$rと$x（または$y）の計算式が近く、関係が見えやすいかもしれない。

li {
   ...

   @for $t from 1 through 100 {
    &:nth-child(#{$t}) {
      // 円周上に点を配置
      $angle: (360 / 100) * (pi() / 180) * $t;
      $x: $r * cos($angle) + vmin;
      $y: $r * sin($angle) + vmin;

      ...
    }

    // それぞれ100%のときの座標が違うので、点ごとに@keyframesが必要になる
    @keyframes scale#{$t} {
      0% {
        transform: translate(0, 0);
      }
    }
  }
}

animation プロパティは省略すると何の指定かわからなくなるので、省略せずに書くほうが良い。あと、Sassを使っててうまく表示されないときは、コンパイル後のCSSを見るのが良い。それぞれ良い気づきがあった。

その他

上記以外にも2つ、今後のためになりそうなものができた。

• 円周上に点を配置（拡縮と回転、背景黒） | JSFiddle
• 順番に円周上に点を配置 | JSFiddle

円周上に点を配置

3年前を思い出しながら、Sassで円周上に点を配置してみる。

• 円周上に点を配置 | JSFiddle

まずは関数定義。「Trigonometry In Sass | Unindented」に書かれているコードを書き写した。関数は全部で7つある（けど tan() は使ってないな）。

• pow()
• fact()
• pi()
• rad()
• sin()
• cos()
• tan()

その下のコードで肝になるのは以下の部分。

li {
  $r: 40;

  @for $t from 1 through 100 {
    &:nth-child(#{$t}) {
      // 円周上に点を配置
      $angle: (360 / 100) * (pi() / 180) * $t;
      $x: $r * cos($angle) + vmin;
      $y: $r * sin($angle) + vmin;
      transform: translate($x, $y);
    }
  }
}

1. 円の半径を40と決めて、
2. $angle: (360 / 100) * (pi() / 180) * $t で角度を割り出し、
3. この角度を使って $x: $r * cos($angle) + vmin でX座標、$y: $r * sin($angle) + vmin でY座標を割り出し、
4. 最後に transform: translate($x, $y) で実際に点を配置

これでは面白くないと思って、点に色を付けた。

• 円周上に点を配置（点ごとに色を変える） | JSFiddle

うーん、もうちょい遊べそう。今度はアニメーションさせてみる。

参考

いくつか参考にした記事がある。

• 点を配置する方法 ... SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
• 三角関数を使うためのコード ... Trigonometry In Sass | Unindented
• 三角関数の概念 ... WebGL開発に役立つ重要な三角関数の数式・概念まとめ (Three.js編) - ICS MEDIA

今回は使わなかったけど、今後使ってみたいと思うものもあった。

• MathSass · terkel.jp

ボールっぽいやつを適当に動かす

昨日のやつをまたゴニョゴニョと触ってた。結果、ボールがすごい速さで移動するみたいなアニメーションができた。

• クソアニメーション（ボール移動） | JSFiddle

昨日と違うのは transform: rotate() の代わりに transform: translate() を使ってるくらいで、他はとくに変わってない。あ、あとあれ、Can I Useを見ると@keyframes とか animation プロパティに -webkit- ベンダープレフィックスがいらなくなってそうだったので、このへんの指定は消した。ベンダープレフィックス消した状態でもChromeでアニメーション動いたし大丈夫そう。

ボールを透過させて、Sassの random() 使ったらさらにいい感じになった。

• クソアニメーション（ボール移動、透過） | JSFiddle

for文を使ったお試しアニメーション

前 2回の記事で Sass の @for 文を使ってるけどこれ便利。もう少し試したくて適当なアニメーションをつくった。

• クソアニメーション（回転） | JSFiddle
• クソアニメーション（拡縮） | JSFiddle

background-color を登録した配列から取り出して設定、あとは繰り返しの回数（$i）を使って回転させる角度を決めたりアニメーション時間を決めたり。わずかに違う表示・アニメーションがいい感じにできあがるようにした。

/* SCSS（クソアニメーション（回転）） */
@for $i from 1 through length($colors) {
  li:nth-child(#{$i}) {
    background-color: nth($colors, $i);
    transform: rotate(calc(10deg * #{$i}));
    animation: papinPopin calc(.2s * #{$i}) ease-in;
    animation-iteration-count: infinite;
  }

  @keyframes papinPopin {
    0% {
      transform: rotate(calc(10deg * #{$i}));
    }
    100% {
      transform: rotate(calc(10deg * #{$i} + #{$i}));
    }
  }
}

Sass から展開された CSS はめっちゃ汚い。

/* CSS（クソアニメーション（回転）） */
li:nth-child(1) {
  background-color: aliceBlue;
  transform: rotate(calc(10deg * 1));
  animation: papinPopin calc(.2s * 1) ease-in;
  animation-iteration-count: infinite;
}

@keyframes papinPopin {
  0% {
    transform: rotate(calc(10deg * 1));
  }
  100% {
    transform: rotate(calc(10deg * 1 + 1));
  }
}

li:nth-child(2) {
  background-color: blue;
  transform: rotate(calc(10deg * 2));
  animation: papinPopin calc(.2s * 2) ease-in;
  animation-iteration-count: infinite;
}

@keyframes papinPopin {
  0% {
    transform: rotate(calc(10deg * 2));
  }
  100% {
    transform: rotate(calc(10deg * 2 + 2));
  }
}

...

アニメーションの名前って難しい。難しすぎて papinPopin というまったく意味のない名前をつけてしまった。