スタイルシート関連の便利なオンラインツールのまとめ
Post on:2011年10月19日
スタイルシートの制作、確認などに役立つ、便利なオンラインツールを紹介します。
[ad#ad-2]
ジェネレーター:ベーシック系
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-03.png)
CSS3 Please!
CSS3の視覚系プロパティを確認しながら編集できます。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-07.png)
CSS3 Generator
角丸、ボックスシャドウ、テキストシャドウなどを確認しながら生成します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-12.png)
CSS3 Generator
角丸、ボックスシャドウ、グラデーション、不透明度を確認しながら生成します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-23.png)
Layer Styles
角丸、ドロップシャドウなどを確認しながら生成します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-08.png)
Ultimate CSS Gradient Generator
CSSグラデーションをPhotoshopライクのUIで生成します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-16.png)
CSS3 Drop Shadow Generator
ドロップシャドウを生成します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-09.png)
border-image-generator
border-imageのジェネレーター。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-17.png)
Générateur de multi-colonnes
CSS3のMulti-columnを生成します。
ジェネレーター:ボタン、画像使わない系
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-18.png)
CSS Button
CSS3を使ったボタンを作成します、hover, activeも可。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-15.png)
Button Maker
グラデーションを使ったボタンを作成します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-20.png)
Loading CSS Spiners and Bars
画像無しで生成するアニメーションで動くローディング用スピナー。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-04.png)
CSS3 Patterns Gallery
画像を使わずにCSS3で作成したパターン集。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-26.png)
The Shapes of CSS
丸・三角・ハートなどさまざまな形状をCSSで作成。
[ad#ad-2]
制作補助、診断、確認
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-01.png)
CSSDesk
ブラウザ上でCSSの編集・確認が行えます。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-25.png)
Prefixr
ベンダープレフィックスを付与します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-06.png)
CSS Lint
あなたのスタイルシートの診断・アドバイスします。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-21.png)
Code Beautifier
スタイルシートを整形・最適化します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-13.png)
Cascader
インライン化されたCSSをHTMLから分離します。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-05.png)
CSS Pivot
指定したウェブページにスタイルシートを適用できます。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-02.png)
CSS Test Creator
セレクタのパフォーマンスを確認できます。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-24.png)
Simple Media Queries Tester
Media Queriesの確認用、サイトを複数のサイズで同時に表示します。
リファレンス、対応ブラウザなど
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-22.png)
haz.io
CSS3, HTML5のブラウザの対応状況が一目で分かります。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-19.png)
CSS Properties Index
各プロパティのCSSの対応状況と初期値。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-10.png)
HTML5 & CSS3 Support
HTML5とCSS3の各プロパティ、セレクタのブラウザの対応状況。
![サイトのキャプチャ](/wp-content/uploads-2011-2d/2011101904-11.png)
CSS3 Selectors Test
CSSの各セレクタの記述例や実行例を確認できます。
sponsors