2016年人気が高かった!CSSの制作、確認、検証に便利なオンラインツール厳選20個のまとめ
Post on:2016年12月5日
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