CSSだけでテキストを縁取りする方法トリッキーすぎた！

今回は、お仕事でテキストを縁取りする事態が発生したので、こちらを紹介していきます！！text-shadowを限界まで(?)使った実に厄介なものになっているので限界までわかりやすく説明しました（笑）

text-shadow基本

「text-shadow」はテキストに影を付けるプロパティになります。

See the Pen text-shadow by カノト (@kanoto) on CodePen.

値の内容は「横にXピクセル　縦にYピクセル　ぼかしNピクセル　影の色」の順になります。

さて、これの値が複数の場合はどうなるでしょうか？

やってみましょう！！（わかりやすいように影をめちゃずらしました）

See the Pen text-shadow複数 by カノト (@kanoto) on CodePen.

おわかりいただけただろうか・・・。

値を指定した個数だけ影が増えるのですね！！

この特性を使って、縁取りを作っていきます！

 テキストに縁取りを付けてみよう！

考え方としては、ぼかし無しのシャドウをテキストの周り（上下左右）に配置すればOKという感じです！

それでは実際にやってみよう！

See the Pen 縁取りpart1 by カノト (@kanoto) on CodePen.

おぉ！いい感じ！！

と思いきや、ちょっとビミョーに切れてる・・・。

応用編以降は続きを見るからぜひご覧ください！！

続きはこちらから！

ユーザ設定でアニメーションの有無を変える？「prefers-reduced-motion」の紹介！

今回はユーザが設定をするだけでアニメーションの有無を切り替えできるメディアクエリを紹介します！これは先日リリースされたGoogle Chrome 74でも実装されたものになります！ちなみにFireFoxなどではすでに実装されていましたね。

この機能はユーザ側のPCに設定されている視差効果の有無を取得してスタイルを当てていくメディアクエリになります。

「prefers-reduced-motion」の使い方

それでは、実際に使ってみましょう！！

といっても簡単で、CSS上に以下のように記述するだけです。

  @media (prefers-reduced-motion: reduce) {
    .reduce {
      animation: none;
    }
  }

この例で言うと、「reduce」クラスをアニメーションしている要素につけるとユーザ設定でアニメーションの有無を制御できるようになります。

勘の良い方は気付いたかもしれないですが、アニメーション以外でも設定可能です！

じゃあユーザ設定ってどうやるの！？

続きはこちらから！

ユーザ設定でアニメーションの有無を変える？「prefers-reduced-motion」の紹介！

今回はユーザが設定をするだけでアニメーションの有無を切り替えできるメディアクエリを紹介します！これは先日リリースされたGoogle Chrome 74でも実装されたものになります！ちなみにFireFoxなどではすでに実装されていましたね。

この機能はユーザ側のPCに設定されている視差効果の有無を取得してスタイルを当てていくメディアクエリになります。

「prefers-reduced-motion」の使い方

それでは、実際に使ってみましょう！！

といっても簡単で、CSS上に以下のように記述するだけです。

  @media (prefers-reduced-motion: reduce) {
    .reduce {
      animation: none;
    }
  }

この例で言うと、「reduce」クラスをアニメーションしている要素につけるとユーザ設定でアニメーションの有無を制御できるようになります。

勘の良い方は気付いたかもしれないですが、アニメーション以外でも設定可能です！

じゃあユーザ設定ってどうやるの！？

続きはこちらから！