CSS・スタイルシート関連ツール・サイト

Simple Media Queries Testerは、
CSS3のMedia QueriesでCSSを振り分けた場合の
表示結果をサイズ別に確認できるオンラインツールです。

作成したスタイルシートを入力するだけで、
そのCSSのエラー、注意を抽出してくれるオンライン診断ツール「CSS LINT」

CSS3のborder-radius生成に特化したジェネレーター「CSS Border Radius Generator」。

ページの中心にある四角の四隅の入力項目に数値を入力するとその数値に即したCSSが生成されます。
必要のないプロパティは下のチェックボックスを外せば削除できます。

他にあるようなごちゃごちゃしたUIではないので、
角丸の具合を集中して（？）確認できます。
角丸のコードだけ確認したいときはこれだけで十分では。

iPhoneの実機がなくても、
どのように表示されるか確認したい時に
URLを入力するだけで表示確認できるオンラインシミュレーター、
「TestiPhone.com」

「iPad Peek」はオンライン上で
iPadエミュレーターとしてブラウザチェックができるツールです。
アドレスバーにURLを入力するだけで、
そのサイトをiPadで見ているかのようにある程度ですが表示できます。

使い方は簡単で、
横幅のピクセル数とカラム数の数値を指定するだけで、
1カラムと余白のサイズを表示してくれる便利なオンラインツールです。

フォントのem指定の数値を基準となるpxの数値からチャート式で確認できる、
「EmCahart」。
javascriptで見たいラインに背景がつくようになっているので見やすく、
オンラインでもダウンロードして使うことも可能です。

簡単にグリッドレイアウトのベースCSSが作成・確認できる便利なオンラインツールです。
サイズ・カラム数・カラム間の数値をパラメーターに入れると、
サイト上にグリットが表示されます。
もちろんCSSはダウンロード可能。
また「preview」をクリックすると以下のように様々なら、
グリッド内でカラム分けした様々なレイアウトが確認できます。

Google Chrome Frameは、
Chrome FrameはIEをChromeに変えるブラウザ用プラグインです。

外はIE、中はChromeということで、
IEのストレスを軽減できそうです。

パラメーターからグリッドを作成、
グリッドのPNGとCSSのソースを作成できる無料のオンラインツールです。

表示を確認したいURLを入力し、ブラウザとOSを選択すると、
それぞれの環境でのスクリーンショットを表示してくれるサービスです。
複数のブラウザでレイアウトを確認したい場合などに利用できます。

無料版ではWindows環境でのIE 8とFirefox 3、Mac環境でのSafari 4のみを確認でき、
スクリーンショットをダウンロードすると
スクリーンショット.jpのロゴのウォーターマークが入ります。

主要ブラウザがサポートしているCSSやHTML等の互換性、対応状況について確認できます。

ie6fixerは、
スタイルシートをオンライン上でIE6に対応した形にできるツールです。
フロートやネガティブマージンなどIE6のバグを回避する記述を自動生成できます。

URLを入力するだけで、
そのサイトをブラウザ上で直接HTML、CSSを編集できるツールです。

複雑なCSSレイアウト、グリッドレイアウトのHTML、CSSデータを
ウェブ上で簡単に作成、ダウンロードできるジェネレーターです。

Adobe社によるオンラインのブラウザチェックツールです。
Webサイトが複数のウェブブラウザでどのように見えるのかをテストできます。

IE 4.0〜IE 8.0、Firefox、Google Chrome、Opera等の
ブラウザのスクリーンキャプチャーを
各OS（Linux、Windows、Mac OS、BSD）ごとに表示し、
サイトをブラウザチェックできるツールです。

Adobe AIR上で動くフリーウェアのiPhone用エミュレーターです。
インストールすることでWindowsでもMac OSXでもデスクトップで動作確認が可能です。

ブラウザから使用していないCSSを簡単にチェックできるツールです。
無駄なCSSコードを見つけられるので、CSSの軽量化に最適です。

簡易ウェブレイアウトチェッカーとは、ホームページがのTABLEレイアウトか、CSSレイアウトか、ウェブ上でとっても簡単にチェックが出来るウェブ上のサービスです。

CSSでの文字スタイルを調整を、フォントサイズ、ファミリー、フォント色、単語間調整、行間調整、ボールディング等のスタイリングがプレビュー付きで確認できるオンラインツールです。

オフライン用のHTML/CSS/JavaScriptの構文チェックプログラムです。
(HTML/CSS/JavaScript Validator)

http://jigsaw.w3.org/css-validator/

W3C CSS 検証サービスは、W3Cによって作られたフリーソフトウェアで、ウェブデザイナーやウェブ開発者が CSS (Cascading Style Sheets; カスケーディング・スタイルシート) をチェックするのに使うことができます。 このサービスは、ウェブ上のフリーサービスを通じて使ったり、ダウンロードして Java プログラムとして実行したりウェブサーバー上で Java サーブレットとして使ったりできます。

Firebug （Firefox アドオン）

Firebug は、Web ページを閲覧中にクリック一つで使える豊富な開発ツールを Firefox に統合します。あなたはあらゆる Web ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。

CSS Ganerator

* 約60種のセレクタから自由に選択。組み合わせは無限大。
* 必要なCSSセレクタ（スタイル）を選び、それにあった入力フォームが生成されるため、効率よくCSSの生成が行えます。
* マッシュアップツールを使用した入力を補助する様々な機能（以下を参照）
* 2つのシーンに対応した出力形式。外部CSS用、HTMLヘッダ用の2種類の形式でCSSを出力します。
* グループ分けされたスタイルセット。リンク、余白などよく使われるCSSセレクタのセットをあらかじめ用意。

CSS Maker - スタイルシート簡単作成ツール

スタイルシートをブラウザ上で簡単に作成できるスタイルシート作成ツールです