スタイルシート関連の便利なオンラインツールのまとめ

スタイルシートの制作、確認などに役立つ、便利なオンラインツールを紹介します。

[ad#ad-2]

• ジェネレーター：ベーシック系
• ジェネレーター：ボタン、画像使わない系
• 制作補助、診断、確認
• リファレンス、対応ブラウザなど

ジェネレーター：ベーシック系

CSS3 Please!
CSS3の視覚系プロパティを確認しながら編集できます。

CSS3 Generator
角丸、ボックスシャドウ、テキストシャドウなどを確認しながら生成します。

CSS3 Generator
角丸、ボックスシャドウ、グラデーション、不透明度を確認しながら生成します。

Layer Styles
角丸、ドロップシャドウなどを確認しながら生成します。

Ultimate CSS Gradient Generator
CSSグラデーションをPhotoshopライクのUIで生成します。

CSS3 Drop Shadow Generator
ドロップシャドウを生成します。

border-image-generator
border-imageのジェネレーター。

Générateur de multi-colonnes
CSS3のMulti-columnを生成します。

ジェネレーター：ボタン、画像使わない系

CSS Button
CSS3を使ったボタンを作成します、hover, activeも可。

Button Maker
グラデーションを使ったボタンを作成します。

Loading CSS Spiners and Bars
画像無しで生成するアニメーションで動くローディング用スピナー。

CSS3 Patterns Gallery
画像を使わずにCSS3で作成したパターン集。

The Shapes of CSS
丸・三角・ハートなどさまざまな形状をCSSで作成。

[ad#ad-2]

制作補助、診断、確認

CSSDesk
ブラウザ上でCSSの編集・確認が行えます。

Prefixr
ベンダープレフィックスを付与します。

CSS Lint
あなたのスタイルシートの診断・アドバイスします。

Code Beautifier
スタイルシートを整形・最適化します。

Cascader
インライン化されたCSSをHTMLから分離します。

CSS Pivot
指定したウェブページにスタイルシートを適用できます。

CSS Test Creator
セレクタのパフォーマンスを確認できます。

Simple Media Queries Tester
Media Queriesの確認用、サイトを複数のサイズで同時に表示します。

リファレンス、対応ブラウザなど

haz.io
CSS3, HTML5のブラウザの対応状況が一目で分かります。

CSS Properties Index
各プロパティのCSSの対応状況と初期値。

HTML5 & CSS3 Support
HTML5とCSS3の各プロパティ、セレクタのブラウザの対応状況。

CSS3 Selectors Test
CSSの各セレクタの記述例や実行例を確認できます。