今年もあと3週間弱で終わりますね。
ということで、今年お世話になったCSSをざっとまとめてみたいと思います。
（最近同一ページ内で h1 タグは1つとかそうじゃないとか盛り上がってますが、この記事では何個も h1 使いますのであしからず）
間隔の空いたボーダー
これには本当にお世話になりました。
普通に border: 1px dotted #000; みたいに実装すると、間隔は調整できないので、 background-image のグラデーションの機能を使ってボーダーを実装しよう、というやつです。
以下の例では「線幅1px、ドットの大きさ1px、間隔2px、横向きの破線」を実装しています。
注意点は、 background-image なので1つの要素に複数指定できない点です。
.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はいいぞ。
$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 でカーソルがいい感じになるように設定するのが良いでしょう。
.hoge {
cursor: url(../img/hoge.cur) 35 35, url(../img/hoge.png) 35 35, auto;
}
Flexbox
これはもう言わずもがなですね。
いろんな人がいいぞって言ってますし、実際とても良いです。(ブラウザごとにいろいろバグがあるのはつらいですが…)
詳しくは私の記事を御覧ください。
Web制作界隈ではまだまだ float や display: table; などが使われることが多いですが（対応ブラウザやチームのスキルセットなどの関係で…）、 Flexbox もじわじわと増えてきている印象です。
僕はfloatやdisplay: table;が嫌いなので、2017年はバリバリFlexbox使っていきたいと思います。
僕は下の設定をよく使います。鉄板ですね。
.hoge {
justify-content: center;
align-items: center;
}
calc
CSSプリプロセッサを使用していれば計算式使ますが、CSSしか使えないときでも計算式が使えるのでとてもいい感じです。
特にレスポンシブデザインに対応するときなどによく使います。
以前は対応ブラウザの関係で使わないこともあったのですが、最近はIE8やAndroid4.3以下を切れるようになってきたので、使用頻度高くなっていますね。
translate3d
最近、アニメーションをCSSで実装することが多いのですが、そのときにこいつをよく使います。
これは要素を立体的に動かすときに使うCSSですが、2次元的なアニメーションも実装できます。
こいつを使うメリットは、CPUではなくGPUを使ってアニメーションを処理できる、というところです。
GPUでアニメーションを処理できれば、CPUの使用率が下がるので、結果的に全体の処理速度が向上します。
CSSハック的な感じですが…
アニメーションを高速化する will-chage プロパティもあり、できればこちらを使いたいのですが、ブラウザ対応が十分でないので、まだまだ実用的ではない感じがしますね…
.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、みたいな）
counter-increment
これ皆さん知ってましたか…？
お恥ずかしながら、僕は最近知りました。
主にliに指定するプロパティで、リスト要素の順番を変数に保存してくれます。
これを使うと、リストのマーカーを任意の書式に変えることができます。
li {
list-style: none;
counter-increment: num;
&:before {
content: "(" counter(num) ") ";
}
}
まとめ
いかがでしたでしょうか？
振り返ってみると、よく使うCSSの機能って少ないんだなと思いました。
またCSSって意外と勉強する機会が少ないので、実装されているのを見て「こんなプロパティあったんだ！」みたいなことが結構ありますよね。
来年もいろんなサイトみて勉強していきたいです。