Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事はTomek Sułkowskiさんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら


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

30. シャドウエディタ

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

31. Timing function editor

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

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

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

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

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

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

1.gif


いつも通り、なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします!
→ 他の投稿も見逃さないようにTwitter (@sulco)をフォローしてください!

rena_m
日々の学びや作ったものについて。誰かの役に立てたら嬉しいです。
https://renamoo-portfolio.netlify.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away