便利なCSS解析ツールXRAY

シェアする

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

CSSを解析する上で便利なツールのご紹介です。

スポンサードリンク

便利なCSS解析ツールXRAY

WordPressなどでWEBページを制作していると、スタイルシートCSSの構造が把握できなくなることがよくあります。
最近のWordPressのテーマはレスポンシブ構造になっており、見ているユーザーに優しくなる分、制御は複雑になっています。
WEB制作中にその都度、スタイルシートを修正してみては、プレビューしてみるのでは効率が悪くなってしまいます。

そこで、XRAY  http://www.westciv.com/xray/index.html
というソフトをブラウザのブックマークに保存しておくと、インストールすることなく見ているページのCSSを解析することが可能です。

XRAYは、western civilisation pty. ltd.のフリーツールです。

スポンサードリンク

XRAYの使用方法

以下はChromeでの設定例です。
まず、XRAY     http://www.westciv.com/xray/index.html を開きます。

XRAY

XRAY: look beneath the skin

XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

See what's new in this version. Upgrading to future versions should not require changing your bookmark!

  • Drag XRAY to your bookmarks bar

XRAY

  • Load any web page
  • Hit the XRAY bookmark
  • Click elements on the page to XRAY them

Go here for more detailed instructions or more about XRAY.

If you just want to try it out, simply click the XRAY button above.

Beta versions

For the adventurous, as we develop XRAY, the latest beta version is always available here. No guarantees that this will work at any given point in time, so keep that in mind. But the worst it will do is throw javascript error, make your page display funny (in your browser just for that load) or maybe crash the browser in extreme circumstances - so make sure there are no forms with content unsaved if using the beta version.

XRAYはベータバージョンで、IE6以降のIEやWebkitやMozillaベースのブラウザに対応しています。
もちろん、SafariでもFirefoxでもChromeでも動作します。

 

Chromeの設定でブックマークバーを表示するようにしておきます。
XRAYというボタンをブラウザのブックマークバーにドラッグ&ドロップします。

その後、任意のWEBページを開き、ブックマークバーからXRAYをクリックします。

XRAY

XRAYのウィンドウがホバー表示されます。
現在開いているWEBページの任意の位置をクリックすると、その場所のスタイルシートCSSの設定が表示されます。

このツール、使いやすくてとても便利です。

スポンサードリンク

httpsではXRAYが動かない?

httpsのサイトではXRAYが動かないようです。

ITエンジニアらしくF12デバッグを試みます。
WS000026

SEC7111: HTTPS セキュリティが http://westciv.com/xray/thexray.js によって危害を受けています
ファイル: login.html
SEC7111: HTTPS セキュリティが http://westciv.com/xray/thexray.js によって危害を受けています
ファイル: login.html
SCRIPT16388: 操作は中断されました

ファイル: script block (7)、行: 1、列: 136
SEC7111: HTTPS セキュリティが http://westciv.com/xray/thexray.js によって危害を受けています
ファイル: login.html
SEC7111: HTTPS セキュリティが http://westciv.com/xray/thexray.js によって危害を受けています
ファイル: login.html
SCRIPT16388: 操作は中断されました

ファイル: script block (13)、行: 1、列: 136
SEC7111: HTTPS セキュリティが http://westciv.com/xray/thexray.js によって危害を受けています
ファイル: login.html

よくわからないけれど、httpsはダメっぽいです。
まぁ、なんとなく理解できます。

image

IEの場合、「すべてのコンテンツを表示(S)」を押すと回避できます。

WS000028

httpsサイトでもXRAYが使えました。

まとめ

XRAYを出しているwestern civilisation pty. ltd.では、59.99ドルしますが、Style MasterというCSS開発ツールを売っています。
http://westciv.com/style_master/index.html

以下の本はCSS、CSSフレームワークを勉強する上でとても役に立ちました。

シェアする

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

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です