DOE HOME > Web技術Tips > CSS3 > Chromeのデベロッパーツールでシャドウの編集ができる『シャドウエディター』が便利そう

category_15_m

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

Pocket

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

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. 無料で使える明朝体の日本語WEBフォント
  2. Google Mapがエラーで表示されなくなった場合の直し方
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. カスタムタクソノミー一覧を任意の順番にソートする方法
  5. 無料エディター『Brackets』で快適コーディング

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。