Close

Web技術Tips

Homepage Tips Homepage Tips

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

SHARE

SHARE

ブラウザCSS3 2016.11.30(公開)

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

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にも追加してほしいです。

DOE(横浜)のニュースとブログ

News News

横浜のWeb制作会社DOEはホームページ制作に関連するWeb技術、Webデザイン、SEO対策情報など人気&おすすめ記事を随時公開中です。
尚、Twitterでは現場の声がリアルタイム配信中です。良かったらShareして繋がってください。