さまざまなUIを実装するCSSの各プロパティの基礎知識や使い方をはじめ、実装時のスタイルシートの問題点をチェックしたり、重複している箇所を見つけたり、見やすいように整形したり、コードを圧縮・展開したりなど便利なオンラインツール・リソースを紹介します。
CSSのリファレンス・基礎知識系
CSSの各プロパティの基礎知識から、どのように使うべきか豊富なサンプルを備えたコーダー必読のリファレンス。
CSS3の代表的な視覚系プロパティの豊富なサンプルをプレビューを見ながらコード編集ができます。
nth-child, nth-of-typeのnth疑似クラスのテストが行えます。
楽しいアニメーションを使ってゲーム感覚で、CSSのセレクタについて学べます。
CSSのセレクタのポイントをビジュアル化し、優先順位が簡単に分かります。
制作する時に重要なのがサポートブラウザ。各ブラウザのサポート状況の確認をお忘れなく。
CSSの調査・分析系
ページのURLやCSSのファイルを指定すると、そこに書かれているスタイルシートを分析します。
CSSの構文チェック。問題点の指摘だけでなく、どのように改善すべきかも教えてくれます。
CSS/SCSSの複数のファイルを解析して、重複しているルールをチェックできます。
CSSの整形・圧縮・展開系
スタイルシートの余計なセレクタやプロパティなどをまとめ、整形してgzipに圧縮できます。
スタイルシートを指定したルールに基づいて整形し、組織化して読みやすいようにします。
スタイルシートをリファクタリングし、可読性・保守性を高めたCSSに変換します。
一行で書かれたスタイルシートなどをセレクタごとにまとめ、タブ・スペースのインデントをつけ読みやすくします。
これも一行で書かれたスタイルシートを読みやすくします。余分な設定が必要がなく、シンプルな方が使いやすい人にオススメ。
HTMLファイルからidやclassやインラインのスタイルを抽出し、それを外部CSSファイルとして出力します。
Sassで書かれたコードを展開して、CSSに出力します。
コメント