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

2011年11月16日 13:00

Media Queriesで振り分けた表示を確認できるオンラインツール「Simple Media Queries Tester」

Simple%20Media%20Queries%20Tester_1321410203888.png

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

2011年11月02日 19:51

簡単 オンラインCSS診断ツール「CSS LINT」

lint1.jpg


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

2011年09月21日 13:00

角丸専用のCSS3ジェネレーター「CSS Border Radius Generator」

border-radius.com

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


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

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

2011年07月21日 15:04

iPhone Safariのオンラインシミュレーター「TestiPhone.com」

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

2011年06月21日 08:43

オンラインで使えるiPadエミュレーター「iPad Peek」

ipadpeek.jpg

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

2010年09月29日 19:15

PNG画像もDLできるグリッドレイアウト作成ツール「Gridulator」

Gridulator.jpg

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

2010年06月01日 09:45

CSSのフォントサイズをem指定する際に便利な「EmCahart」

emchart.gif

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

2010年05月07日 18:56

グリッドレイアウト作成に便利な「Variable Grid System」

cssjptemp.gif

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

2009年09月24日 00:12

Google Chrome Frame

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

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

2009年08月03日 13:29

グリッドのPNGとCSSのソースを作成できる「nP: Grid Generator」

gridgenerator.jpg

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

2009年07月29日 22:34

スクリーンショット.jp

screen.jpg

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

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

2009年07月13日 18:22

ブラウザのCSSやHTML等のサポート状況を確認「QuirksMode.org」

QuirksMode.org

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

2009年07月13日 18:11

ie6fixer(スタイルシートをIE6対応にするツール)

ie6fixe(スタイルシートをIE6対応に変換)

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

2009年07月07日 19:12

CSS Fly (CSS直接編集ツール)

cssfly.jpg

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

2009年07月02日 16:42

The 1Kb CSS Grid(CSSレイアウト生成ツール)

The 1Kb CSS Grid(CSSレイアウト生成ツール)

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

2009年06月25日 01:00

BrowserLab(ブラウザーラボ)

BrowserLab(ブラウザーラボ)

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

2009年06月25日 00:45

ブラウザのスクリーンキャプチャーをOS毎に確認「browsershots.org」

browsershots
IE 4.0IE 8.0FirefoxGoogle ChromeOpera等の
ブラウザのスクリーンキャプチャーを
各OS(Linux、Windows、Mac OS、BSD)ごとに表示し、
サイトをブラウザチェックできるツールです。

2009年06月23日 13:39

iPhoneブラウザチェックツール・エミュレーター「AIR iPhone」

AIR iPhone(iPhone用エミュレーター)

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

AIR iPhone(iPhone用エミュレーター)

2009年06月09日 15:26

CSS Redundancy Checker

redundancy1.jpg

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

2009年06月08日 15:09

簡易ウェブレイアウトチェッカー

簡易ウェブレイアウトチェッカー

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

2009年06月06日 10:57

CSSでの文字調整を確認できるオンラインツール「CSS Type Set」

csstypeset.jpg

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

2009年06月03日 12:56

HTML/CSS/JavaScriptの構文チェックをオフラインで「bkhvalid」

bkhvalid

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

2009年06月02日 01:48

W3C CSS 検証サービス

3C CSS 検証サービス

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


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

2009年06月01日 13:53

Firebug (Firefox アドオン)

firebugs.jpg

Firebug (Firefox アドオン)

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

2009年05月25日 14:15

CSS Ganerator(オンラインCSSジェネレーター)

CSS Ganerator

CSS Ganerator

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

2009年05月24日 00:28

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

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

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


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

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




正当なCSSです!