HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > Chromeのデベロッパーツールでシャドウの編集ができる『シャドウエディター』が便利そう
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
CSS3

Chromeのデベロッパーツールでシャドウの編集ができる『シャドウエディター』が便利そう

CSS3ブラウザ2016.11.30

CSSのシャドウって、Photoshopでデザインするときは簡単に目的の色合いにできるのに、CSSで設定すると box-shadow や text-shadow の値を数字で指定しなきゃいけなくて、なんかめんどくさくないですか?

この記事ではデベロッパーツールでシャドウを編集できる『シャドウエディター』を紹介したいと思います。

使い方

デベロッパーツールのスタイルパネル上で、text-shadow か box-shadow のプロパティを見ると、パープルのアイコンがあります。

shadow-editor-img02

もしくは、スタイルパネルの右下のアイコンを選択します。

左側にある2つです。

shadow-editor-img05

text-shadowの場合

shadow-editor-img03

画像は text-shadow のアイコンをクリックしたときですが、色以外の値を数字 or ツマミで調整できます。

ツマミで値を変える場合は X offset / Y offset の値は -20~20、Blurの値は 0~20 の範囲で変更できます。

box-shadowの場合

shadow-editor-img04

box-shadow の影を要素の外側につけるか内側につけるか、クリックで切り替えられます。

色を変更する

shadow-editor-img01

シャドウエディターでは色の変更はできないので、カラーピッカーを使います。

カラーコードの左の表示色をクリックするとカラーピッカーが出てきます。

カラーピッカーを使うとブラウザ上で文字色や背景色を編集したり、カーソルが虫メガネっぽくなって要素の色を吸い取って適用したりできます。

shadow-editor-img06

安定版のChromeではまだ使えない

大事なことを言い忘れました。

このシャドウを編集する機能ですが、一番多く使われている安定版のChromeではまだ使えません。

この機能を使うには『Google Chrome Canary』という開発者向けのChromeを使ってください。

※Chrome Canaryは毎日更新されるので、開発段階の機能がいきなり消えることがあります。

まとめ

デベロッパーツールで直感的にシャドウを編集する方法について紹介しました。

シャドウエディターは便利な機能なので、はやく安定版のChromeにも追加してほしいです。

この記事は公開から 377 日経っているため、情報が古くなっている可能性があります。

PAGE TOP