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