Kore! Ene!

始めに 参考にさせていただいた元記事 カクカクするのはブラウザごとに異なる アニメーション時のチラつきの原因はほとんどが「アニメーション」として処理されていないということです。 一般的なブラウザ(Chrome,Firefox,Safari,Opera)の最新バージョンであればあまり気にする必要もないのですが、一部のデバイス内のアプリ等(cordova等)では古いバージョンのブラウザを使用している場合や、古いデバイスであると古いブラウザになってしまうでしょう。 (IEでもチラつきが目立つ。また、Edgeの場合もIEとほぼ変わらずチラつきがみられる。) 今回は一般的な3つの対処法を見ていきます。 対処法 1 サイトによっては ○○{ transform: translate3d(0,0,0); } などというものもありますが、これはブラウザに無駄な処理を与えてしまっているため良い対処法ではない他、直らない場合もあるのでこれは軽く頭に入れておく程度でいいでしょう。 2 次の対処法は、will-changeです。 初めて聞く方もいると思いますが、will-changeを使用することで、要素にどのような変更を加えるかを先にブラウザに伝えることができます。 変形処理を伝えるときはこのようにします。 ○○{ will-change: transform; } また、アニメーションは次のようにします。 ○○{ will-change: animation; } さらに、複数の処理を同時に行うときはカンマ( , )で区切ることでまとめて記述することができます。 ○○{ will-change: transform,animation,position; } このようにすることで、translate3dのように不要な処理なく効率的に処理することができます。 3 また、この方法でも直る場合があります。 ○○{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } この要素について詳しくはこちらを見ていただくといいと思います。 backface-visibility 最後に 一番最適な対処法は2番目の...

box-shadowとは box-shadowは、要素に影を作ることができます。 さらに、box-shadowでは、細かく影を設定することができるほか、簡単にできる点が挙げられます。 ここにサンプルを表示します。 box-shadowで影を出しています。 このように、とても簡単に自然な影を出すことができます。 また、これはぼかし付きの影ですが、ぼかしなしの影もだすことができます。 box-shadowの使い方 ◯◯ { box-shadow: 右の向きpx 下の向きpx ぼかしpx 広がりpx 色 内側指定; } 上や左に影を出す場合は、下の指定を-に指定すると上になります。 詳しくは後述します。 ぼかしなしの影 右と下に影を表示させる例はこちらです。 .example { box-shadow: 4px 4px; } これを適用すると次のようになります。 box-shadowで影を出しています。 上に影を表示させたい場合は-を使用します。 上と下に表示する例 .example { box-shadow: -4px -4px; } box-shadowで影を出しています。 影の色を変える 初期では影の色が黒になっていますが、色も自由に変更することができます。 背景の色をグレーに変更する例です。 .example { box-shadow: 4px 4px gray; } box-shadowで影を出しています。 このようになります。 影のぼかし 影をぼかすことで、より自然な影を生成することができます。 影をぼかすには次のように指定します。 .example { box-shadow: 4px 4px ぼかしpx gray; } ぼかしを4pxに指定した例です。 box-shadowで影を出しています。 また、8pxに指定すると次のようになります。 box-shadowで影を出しています。 より、やわらかな影になります。 影の広がりを調整 影の広がりを調整するには、次のように指定します。 .example { box-shadow: 4px 4px ぼかしpx 広がりpx...

今まで、要素のサイズを指定するときなど、〇px分だけ引いてやりたい。そんなときありますよね。 でも、今までであればJavaScriptから毎回やったりととても大変ですよね。 ですが、なんと、 CSSでだけで計算が可能 なのです。 さらに詳しく見てみましょう。 ブラウザ別対応状況 Chrome: Chrome26 よりサポート Safari: Safari6.1, Safari7.0 よりサポート Firefox: Firefox16 よりサポート IE　　: IE9 よりサポート Ede　:サポート Oprera: Opera15 よりサポート 対応状況は、「ほとんどのブラウザの最新バージョンなら対応している」というところでしょうか。 webkitを使用しているSafariやGoogle Chromeなどは-webkitのベンダー識別子をつけるのがよいでしょう。 使い方 基本的にはこのように記述します。 .sample{ width : -webkit-calc(50% - 20px); width : -moz-calc(50% - 20px); width : calc(50% - 20px); } ですが、最新ブラウザのみのアクセスとわかるのであれば、 .sample{ width : calc(50% - 20px); } のように省略しても構いません。 もちろんwidth以外にもheightなどと利用できます。 減算を利用することが多いと思いますが、calcで利用可能な式を記述しておきます。 +　=　加算 -　=　減算 *　=　乗算 /　=　除算 となります。 最後に どうだったでしょうか。 CSSもこんなことができるのか///と感じてしまいます。 このcalcはとても便利なものなのですが、対応していないブラウザ/バージョンから見るとサイトが崩れてしまうので「どのデバイスでも」というのならcalcは最低限にしたほうがいいかもしれません。