Web制作者はおさえておきたい!CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ

さまざまなUIを実装するCSSの各プロパティの基礎知識や使い方をはじめ、実装時のスタイルシートの問題点をチェックしたり、重複している箇所を見つけたり、見やすいように整形したり、コードを圧縮・展開したりなど便利なオンラインツール・リソースを紹介します。

CSSのリファレンス・基礎知識系

サイトのキャプチャ

CSS Reference

CSSの各プロパティの基礎知識から、どのように使うべきか豊富なサンプルを備えたコーダー必読のリファレンス。

サイトのキャプチャ

CSS3 Please

CSS3の代表的な視覚系プロパティの豊富なサンプルをプレビューを見ながらコード編集ができます。

サイトのキャプチャ

NTH-TEST

nth-child, nth-of-typeのnth疑似クラスのテストが行えます。

サイトのキャプチャ

CSS Diner

楽しいアニメーションを使ってゲーム感覚で、CSSのセレクタについて学べます。

サイトのキャプチャ

Specificity Calculator

CSSのセレクタのポイントをビジュアル化し、優先順位が簡単に分かります。

サイトのキャプチャ

Can I Use -CSS

制作する時に重要なのがサポートブラウザ。各ブラウザのサポート状況の確認をお忘れなく。

CSSの調査・分析系

サイトのキャプチャ

CSS Stats

ページのURLやCSSのファイルを指定すると、そこに書かれているスタイルシートを分析します。

サイトのキャプチャ

CSS Lint

CSSの構文チェック。問題点の指摘だけでなく、どのように改善すべきかも教えてくれます。

サイトのキャプチャ

csscss

CSS/SCSSの複数のファイルを解析して、重複しているルールをチェックできます。

CSSの整形・圧縮・展開系

サイトのキャプチャ

CSS Shrink

スタイルシートの余計なセレクタやプロパティなどをまとめ、整形してgzipに圧縮できます。

サイトのキャプチャ

ProCSSor

スタイルシートを指定したルールに基づいて整形し、組織化して読みやすいようにします。

サイトのキャプチャ

CSS Ratiocinator

スタイルシートをリファクタリングし、可読性・保守性を高めたCSSに変換します。

サイトのキャプチャ

CSS Beautifier

一行で書かれたスタイルシートなどをセレクタごとにまとめ、タブ・スペースのインデントをつけ読みやすくします。

サイトのキャプチャ

FESS

これも一行で書かれたスタイルシートを読みやすくします。余分な設定が必要がなく、シンプルな方が使いやすい人にオススメ。

サイトのキャプチャ

extractCSS

HTMLファイルからidやclassやインラインのスタイルを抽出し、それを外部CSSファイルとして出力します。

サイトのキャプチャ

SassMeister

Sassで書かれたコードを展開して、CSSに出力します。

sponsors

top of page

©2018 coliss