Smartial Wayback Machine Text Extractor

Live version of this page DOES NOT exist (#0)

https://web.archive.org/web/20110612065542/http://east08.webdirections.org:80/blog/progress/style-master-tool-page-published/

This article contains 5 images. You will find them at the very end of the article.

This article contains 141 words.

WDE08 Blog: これは便利！Style Master tool

これは便利！Style Master tool

菊池
2009年6月2日
7:17 PM
進行状況

Web DirectionsのJohn allsoppが制作したStylemaster、そのブログで今迄公開されてきたツール達を１つのページにまとめました。

Style Master Cool Tools and Toys for Web Developers

リンク先:http://tools.westciv.com/

紹介されているツールはXRAY, MRI, CSS3 Gradient, text-shadow, box-shadowと便利なものばかりです。

XRAY

XRAYは要素のwidth/height/positionを調べる事が出来るツールです。使い方はいたって簡単で、

使い方が詳しく掲載されています

http://youmos.com/news/xray
http://www.moongift.jp/2007/08/xray/

MRI

MRIは要素にCSSを適用したい時にCSSセレクタの記述を教えてくれるツールです。もし、CSSを記述したのに適用されない時など、セレクタを確認する時に便利なツールです。

CSS3 sandbox

Gradients(liner/radial)

WebkitのnightlyバージョンとSafari4以上はCSSでbackground・border-image・list-style-imageへGradient（グラデーション）を適用できます。ただ如何せん記述が難しい。でも、このツールがあれば簡単にGradientを適用することができます。

Gradientにはliner(線状)とradial(円状)の二つのタイプのGradientがありますが、それぞれのバージョンがあるので自由に作成することができます。

ちなみにlinerを使えばiPhoneのUIに合わせたボタンやバーなどを簡単に作る事ができます。iPhoneのSafariはgradientをサポートしています。

Shadow

CSS3ではテキストやボックスに陰をを付けることができます。しかし、慣れの問題とは考えていますが、感覚的に陰の方向や距離の具合を掴むことは非常に困難です。このツールはスライダーを調整するだけで自分の好みの陰を決定できます。そして、生成されたソースをコピー＆ペーストするだけで簡単にtext-shadowやbox-shadowのCSSを記述することができます。

上記に紹介したツール以外にもドンドンとツールは追加される予定です。

楽しみですね。