今年お世話になったCSSまとめ

今年もあと3週間弱で終わりますね。
ということで、今年お世話になったCSSをざっとまとめてみたいと思います。

（最近同一ページ内で `h1` タグは1つとかそうじゃないとか盛り上がってますが、この記事では何個も `h1` 使いますのであしからず）

#間隔の空いたボーダー

これには本当にお世話になりました。
普通に `border: 1px dotted #000;` みたいに実装すると、間隔は調整できないので、 `background-image` のグラデーションの機能を使ってボーダーを実装しよう、というやつです。
以下の例では「線幅1px、ドットの大きさ1px、間隔2px、横向きの破線」を実装しています。

注意点は、 `background-image` なので1つの要素に複数指定できない点です。

[DEMO](http://codepen.io/takanorip/pen/oYaVGe)

```css
.hoge {
  background-image: linear-gradient(to right, #ccc, #ccc 1px, transparent 1px, transparent 2px);
  background-size: 3px 1px;
  background-position: top;
  background-repeat: repeat-x;
}
```

#`@keyframes`

CSSでアニメーションをするとき、この `@keyframes` にアニメーションの動きを設定しておいて、アニメーションを使う箇所で呼び出す、というやつです。
簡単なアニメーションはCSSで実装することが多いので、とても重宝しています。

CSSアニメーションの欠点は書き方があまり直感的でないところでしょうか…
下のサンプルを見てもらえればわかると思いますが、CSS見ただけではどんなアニメーションになるかイメージしにくいですよね。

サンプルは **Stylus** というCSSプリプロセッサで書いています。**Stylus**はいいぞ。

[DEMO](http://codepen.io/takanorip/pen/gLBEjQ)

```scss
$easeOut = cubic-bezier(0.165, 0.840, 0.440, 1.000);

@keyframes beat {
  0% { transform: scale(0.8) }
  14% { transform: scale(1.1) }
  96% { transform: scale(1) }
  100% { transform: scale(0.8) }
}

.hige {
  animation: beat 0.8s infinite $easeOut;
}
```

#カーソルに画像を設定

みなさんもカーソルに画像を設定したいと思ったことありますよね。
少なくとも僕はありました。

JavaScriptでごにょごにょすることもできるのですが、CSSを使って実装することもできます。
使用できる画像の拡張子は `.cur`, `.png`, `gif` の3種類です。
困ったことに、**IEでは `.cur` しか使えません**が、ChromeやSafariだと `.cur` が表示されないことがあります。
`cursor` プロパティには複数の設定をすることができるので、`.cur` と `.png` を設定して、どちらもダメなら `auto` でカーソルがいい感じになるように設定するのが良いでしょう。

```css
.hoge {
  cursor: url(../img/hoge.cur) 35 35, url(../img/hoge.png) 35 35, auto;
}
```

#Flexbox

これはもう言わずもがなですね。
いろんな人がいいぞって言ってますし、実際とても良いです。(ブラウザごとにいろいろバグがあるのはつらいですが…)
詳しくは私の記事を御覧ください。

[Flexboxレイアウトまとめ](http://qiita.com/takanorip/items/a51989312160530d89a1)

Web制作界隈ではまだまだ **float** や **display: table;** などが使われることが多いですが（対応ブラウザやチームのスキルセットなどの関係で…）、 **Flexbox** もじわじわと増えてきている印象です。
僕は**float**や**display: table;**が嫌いなので、2017年はバリバリ**Flexbox**使っていきたいと思います。

僕は下の設定をよく使います。鉄板ですね。

```css
.hoge {
  justify-content: center;
  align-items: center;
}
```

#calc

CSSプリプロセッサを使用していれば計算式使ますが、CSSしか使えないときでも計算式が使えるのでとてもいい感じです。
特にレスポンシブデザインに対応するときなどによく使います。

以前は対応ブラウザの関係で使わないこともあったのですが、最近はIE8やAndroid4.3以下を切れるようになってきたので、使用頻度高くなっていますね。

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

#translate3d
最近、アニメーションをCSSで実装することが多いのですが、そのときにこいつをよく使います。
これは要素を立体的に動かすときに使うCSSですが、2次元的なアニメーションも実装できます。

こいつを使うメリットは、CPUではなく**GPU**を使ってアニメーションを処理できる、というところです。
GPUでアニメーションを処理できれば、CPUの使用率が下がるので、結果的に全体の処理速度が向上します。
CSSハック的な感じですが…

アニメーションを高速化する `will-chage` プロパティもあり、できればこちらを使いたいのですが、ブラウザ対応が十分でないので、まだまだ実用的ではない感じがしますね…

https://developer.mozilla.org/ja/docs/Web/CSS/will-change

[DEMO](http://codepen.io/takanorip/pen/zoywxj)

```scss
.hoge {
  transform: translate3d(0, 0, 0);
  &.js-move {
    transform: translate3d(500px, 80px, 0);
  }
}
```

#box-sizing

`box-sizing: border-box;`を指定すると、`border`と`padding`を`width`や　`height`に含めて計算してくれます。
widthが100%で左右にpaddingが16pxある、みたいな実装をするときに、その計算をよしなにやってくれる感じですね。
最初は慣れませんでしたが、今となってはこの設定なしでは生きていけないくらい便利です。

これを使うことでmarginをpaddingを明確に使い分けることもできるようになります。
（コンテンツの中身は幅や高さに影響のないpaddingで、外側はmargin、みたいな）

[DEMO](http://codepen.io/takanorip/pen/RoEpME)

#counter-increment
これ皆さん知ってましたか…？
お恥ずかしながら、僕は最近知りました。

主に`li`に指定するプロパティで、リスト要素の順番を変数に保存してくれます。
これを使うと、リストのマーカーを任意の書式に変えることができます。

[DEMO](http://codepen.io/takanorip/pen/aBPJWy)

```scss
li {
  list-style: none;
  counter-increment: num;
  &:before {
    content: "(" counter(num) ") ";
  }
}
```

#まとめ
いかがでしたでしょうか？
振り返ってみると、よく使うCSSの機能って少ないんだなと思いました。
またCSSって意外と勉強する機会が少ないので、実装されているのを見て「こんなプロパティあったんだ！」みたいなことが結構ありますよね。
来年もいろんなサイトみて勉強していきたいです。