2016年人気が高かった!CSSの制作、確認、検証に便利なオンラインツール厳選20個のまとめ
Post on:2016年12月5日
Webサイトのデザインもコーディングもやるべきタスクがどんどん増えてきました。それらの手間がかかる面倒な事は、楽にできるツールやサービスを利用することで効率化がはかれます。
CSSの制作、確認、検証に役立つ便利なオンラインツールやサービスを紹介します。
![CSSの制作、確認、検証に役立つ便利なオンラインツール厳選20個のまとめ](http://coliss.com/wp-content/uploads-201604/2016120501.png)
2016年にリリースされたものを中心に、今年人気が高かったものを20個ピックアップしました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-01.png)
デスクトップ・タブレット・スマホ用に設定したブレイクポイントがどのように機能するか、レスポンシブの確認ができるGoogle製のオンラインツール。上部のテキストフォームにページのURLを入力するだけで、簡単に確認できます。
デスクトップ・モバイルのアイコンをクリックすると、それぞれ詳細なサイズを選択できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-02.png)
スマホ・タブレットの縦向き・横向き、ノートブック・デスクトップなど、さまざまなデバイスでのページの見え方を確認できるオンラインツール。iPhone, iPad, MacBookなどのモックアップにも使えるレベルです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-03.png)
デスクトップ・タブレット・スマホのさまざまなデバイス用のMedia Queriesの書き方をまとめたサイト。各デバイスのサイズを知りたい時にも重宝します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-04.png)
Responsive Image Breakpoints Generator
画像をアップロードすると、デスクトップ・タブレット・スマホのそれぞれに最適なサイズの画像ファイルとコードを生成するオンラインツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-05.png)
YouTube, Vimeoなどの動画、Google Maps, Instagramなど、コンテンツをembedで埋め込む時のコードをレスポンシブ対応にするオンラインツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-06.png)
UIデザインで使う、フォント、背景、ボーダー、ボタンなどのカラーを効果的にするグレーと基本の12色から展開されたカラースキーム。カラースキームはAdobe CC ライブラリをはじめ、Photoshop, Illustrator, Sketch用とソースコードでもダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-07.png)
人気が高い2色の美しいグラデーションを指定したカラーで作成できるオンラインツール。右上の「</>」をクリックすると、CSSのコードが表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-08.png)
Apple風のかっこよくて美しいデザインの背景49種類をまとめたスタイルシート。背景を適用したい要素にclassを与えるだけで簡単に利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-09.png)
背景とテキストに使うカラーをWCAGアクセシビリティガイドラインに基づいたアクセシブルなカラーパレットに生成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-10.png)
こちらもアクセシブルなカラーのツール。
得点が少し低い時、ぎりぎりにしたい時など、カラーの値を微調整する時に便利です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-11.png)
Googleフォントを使った、Webフォントのスタイルシートの指定をブラウザで確認しながらコードを生成できるオンラインツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-12.png)
CSSで使う単位、px, em, point, %の値をベースの値から算出するオンラインツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-13.png)
スタイルシートを一行追加するだけで、画像をインスタグラム風にかっこよく、そしてかわいく仕上げるスタイルシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-14.png)
鉛筆画、色鉛筆画、水彩画、黒板(画?)など、かなりのクオリティで画像にエフェクトが適用できるスタイルシート。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-15.png)
SVGで描くさまざまなパターンのコードを生成するオンラインツール。SVGですが、backgroundプロパティを使うので、ここで紹介。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-16.png)
ブラウザに画像を表示しているように見えるかもしれませんが、画像は一切無し、CSSで実装されています。どんな画像でもピュアCSSに変換するオンラインツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-17.png)
テキスト・背景・ボーダー・シャドウ・トランスフォームなど、CSS3のさまざまなコードを生成するオンラインツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-18.png)
テキストや画像、ブロック要素を高さ(指定・未定)・幅(指定・未定)・IEの対応バージョンごとに、センターに配置するコードを生成します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-19.png)
スタイルシートの無駄な記述(重複や冗長、空白スペースなど)を削除して、軽量化するツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016120502-20.png)
重複しているセレクタがないか、不要なプリフィックスがないか、!Importantsを使用しているか、CSSファイルが最適化されているかチェックできるツール。
sponsors