2016年人気が高かった!CSSの制作、確認、検証に便利なオンラインツール厳選20個のまとめ

Webサイトのデザインもコーディングもやるべきタスクがどんどん増えてきました。それらの手間がかかる面倒な事は、楽にできるツールやサービスを利用することで効率化がはかれます。
CSSの制作、確認、検証に役立つ便利なオンラインツールやサービスを紹介します。

CSSの制作、確認、検証に役立つ便利なオンラインツール厳選20個のまとめ

2016年にリリースされたものを中心に、今年人気が高かったものを20個ピックアップしました。

サイトのキャプチャ

Resizer

デスクトップ・タブレット・スマホ用に設定したブレイクポイントがどのように機能するか、レスポンシブの確認ができるGoogle製のオンラインツール。上部のテキストフォームにページのURLを入力するだけで、簡単に確認できます。
デスクトップ・モバイルのアイコンをクリックすると、それぞれ詳細なサイズを選択できます。

サイトのキャプチャ

Responsive View

スマホ・タブレットの縦向き・横向き、ノートブック・デスクトップなど、さまざまなデバイスでのページの見え方を確認できるオンラインツール。iPhone, iPad, MacBookなどのモックアップにも使えるレベルです。

サイトのキャプチャ

Simple CSS Media Queries

デスクトップ・タブレット・スマホのさまざまなデバイス用のMedia Queriesの書き方をまとめたサイト。各デバイスのサイズを知りたい時にも重宝します。

サイトのキャプチャ

Responsive Image Breakpoints Generator

画像をアップロードすると、デスクトップ・タブレット・スマホのそれぞれに最適なサイズの画像ファイルとコードを生成するオンラインツール。

サイトのキャプチャ

Embed Responsively

YouTube, Vimeoなどの動画、Google Maps, Instagramなど、コンテンツをembedで埋め込む時のコードをレスポンシブ対応にするオンラインツール。

サイトのキャプチャ

Open Color

UIデザインで使う、フォント、背景、ボーダー、ボタンなどのカラーを効果的にするグレーと基本の12色から展開されたカラースキーム。カラースキームはAdobe CC ライブラリをはじめ、Photoshop, Illustrator, Sketch用とソースコードでもダウンロードできます。

サイトのキャプチャ

Blend

人気が高い2色の美しいグラデーションを指定したカラーで作成できるオンラインツール。右上の「</>」をクリックすると、CSSのコードが表示されます。

サイトのキャプチャ

HUE.css

Apple風のかっこよくて美しいデザインの背景49種類をまとめたスタイルシート。背景を適用したい要素にclassを与えるだけで簡単に利用できます。

サイトのキャプチャ

Color Safe

背景とテキストに使うカラーをWCAGアクセシビリティガイドラインに基づいたアクセシブルなカラーパレットに生成できます。

サイトのキャプチャ

Colorable

こちらもアクセシブルなカラーのツール。
得点が少し低い時、ぎりぎりにしたい時など、カラーの値を微調整する時に便利です。

サイトのキャプチャ

Type Nugget

Googleフォントを使った、Webフォントのスタイルシートの指定をブラウザで確認しながらコードを生成できるオンラインツール。

サイトのキャプチャ

CSS Unit Converter

CSSで使う単位、px, em, point, %の値をベースの値から算出するオンラインツール。

サイトのキャプチャ

CSS gram

スタイルシートを一行追加するだけで、画像をインスタグラム風にかっこよく、そしてかわいく仕上げるスタイルシート。

サイトのキャプチャ

Image Effects

鉛筆画、色鉛筆画、水彩画、黒板(画?)など、かなりのクオリティで画像にエフェクトが適用できるスタイルシート。

サイトのキャプチャ

Hero Pattern

SVGで描くさまざまなパターンのコードを生成するオンラインツール。SVGですが、backgroundプロパティを使うので、ここで紹介。

サイトのキャプチャ

img2css

ブラウザに画像を表示しているように見えるかもしれませんが、画像は一切無し、CSSで実装されています。どんな画像でもピュアCSSに変換するオンラインツール。

サイトのキャプチャ

Enjoy CSS

テキスト・背景・ボーダー・シャドウ・トランスフォームなど、CSS3のさまざまなコードを生成するオンラインツール。

サイトのキャプチャ

How to Center in CSS

テキストや画像、ブロック要素を高さ(指定・未定)・幅(指定・未定)・IEの対応バージョンごとに、センターに配置するコードを生成します。

サイトのキャプチャ

cssnano

スタイルシートの無駄な記述(重複や冗長、空白スペースなど)を削除して、軽量化するツール。

サイトのキャプチャ

TestMyCSS

重複しているセレクタがないか、不要なプリフィックスがないか、!Importantsを使用しているか、CSSファイルが最適化されているかチェックできるツール。

top of page

©2017 coliss