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