Safariに搭載されているwebインスペクタで新規スタイルを適用する方法

カテゴリ:webの便利なものを紹介 2009年6月28日 20:42

Safari アイコン

Safari や Google Chrome などの、webkit 系ブラウザに搭載されているwebインスペクタ
Firefox のエクステンションである Firebug に比べると、やや使いづらいイメージがあります。(なんというか、直感的に使えない感じで。慣れの問題だとは思いますが)n

さてこの webインスペクタ、Firebug みたいに閲覧中の CSS が追加できなくて不便だなーと思っていたんですが、どうやら CSS を追加することはできるようです。n

まずは新規スタイルを適用したい要素をピックアップ

やり方は、ちょっと分かりづらいんですが、まずはinspectinspect button image)ボタンで CSS を変更したい要素を選択します。(このボタンが搭載されているのは Safari4, Google Chrome2 以上のようです。それ以外の ver では、調べたい要素上で右クリックして出てくるメニューの "要素の検証" を選ぶことですぐに調べたい要素がクローズアップされるようです)n

適用されているスタイルを確認する

選択すると右側に適用されているスタイルの一覧が表示されます。スタイル一覧の中で、class セレクタや ID セレクタで指定されているスタイルのオン・オフができます。
webインスペクタイメージ

スタイルを修正する

このプロパティの部分をダブルクリックすると編集状態になります。ここで値を変更すると内容が書き変わるわけですね。ただ、これではすでに指定されているものを変更するだけにしかなりません。
webインスペクタイメージ2

ここが肝心、新規スタイルを追加する

しかし、そこは "1 行の CSS エディタだ"、と思って見ると分かりますが、セミコロン;の後に続けて他のプロパティを指定しter キーを押すと、そこで記述した内容が追加されるのです。
webインスペクタイメージ3

色々調べても、新規で追加する方法が見つからなくて諦めていたのですが、これでずいぶんと Safari などでのチェックが楽になりました。n

Firebug のように、完全に新規で追加できるわけではないものの、大体の場合において class セレクタか ID セレクタから継承を受けているので指定に困ることは少ないと思います。n

この記事のカテゴリー一覧を見る⇒webの便利なものを紹介

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/151

コメント

1 - mass さん

ひゃー、なるほど。こうすればスタイルが追加できたんですね。
スッキリしました。ありがとうございます。
それにしてもこんな方法、よく気付かれましたね(笑)。

2010年2月12日 14:00

2 - えど Author Profile Pageさん

>>1 - massさん
コメントありがとうございます!
分かってしまえばなんでもないことなんですが、
気づくまで、ただの編集だと思っちゃいますよね、これw
これが分かってからは修正・検証がすごく楽になりましたw

2010年2月12日 15:12