DevTools tips — day 11: スタイルエディタ(続き)

DevTools tips — day 11: スタイルエディタ(続き):

この記事はTomek Sułkowskiさんによる

フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。

とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら。

---

休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。昨日はカスタムフォーマッターで楽しみましたね。今日は目で見て楽しめるものをテーマにします。使うものは…

30. シャドウエディタ

あまり良い響きではありませんが、今日扱うものは、先日取り上げたカラーピッカーのようなちょっとしたウィジェットで、さらにシンプルなものです。Stylesパネルのbox-shadow, text-shadowプロパティの近くに表示されるシャドウのついた四角いマークをクリックすると表示されます。

31. Timing function editor

Cubic bezierエディタとしても知られています。3次ベジェ曲線はアニメーション中のcssアニメーションの速度変化を定義する3つの数字です。私たちはそのCSSプロパティをtransition-timing-function、animation-timing-functionという名前で呼んでいます。

カラーピッカーやシャドウエディタと同じように、先ほど述べたプロパティ(またはその省略形：transition, animation — ちなみに、マークtiming function valueが省略形に設定されていないと表示されません)の横にある曲線のマークをクリックすると現れます。

3Dアニメーションをまだ使ったことがない人へ：これは簡単に利用できます。container elementのperspectiveプロパティを設定するだけです。この場合、私はperspective: 200px;をbodyに設定しています。

32. style rulesボタンを挿入する

style selector領域の終端の近くでホバーすると、瞬時にカラーエディタやシャドウエディタを利用するCSSプロパティを追加できるボタンが現れます。

• text-shadow
• box-shadow
• color
• 
  background-color
  そしてそれぞれに対応するエディタが開きます。

---

いつも通り、なにか新しいことを学べたらぜひ

→ もっと多くの人の目に止まるように拍手��ボタンをお願いします！

→ 他の投稿も見逃さないようにTwitter (@sulco)をフォローしてください！