デザイン

デザイン

【CSS作業能率を上げる!】デザイナー必見!!のCSSコード整理ツール

8,328 views

読了時間 : 約1分51秒

ベテランのウェブデザイナーなら、CSSファイルはきちっと整理されていることでしょう。

セレクタは適切に配置され、プロパティも完璧…。

ですがそんな人でも、新規のWebプロジェクトを手掛けたときに、はじめは必要最低限のものしかなかったCSSが、次第に膨れ上がり、気づけばしっちゃかめっちゃかに……なんていう経験があるのではないでしょうか。

そんな状態では、全体の構造が極端に見えにくくなって、そうでなければありえないようなミスが増えても仕方がないでしょう。

このようなケースに対してすぐに思い付かれる解決策は2つ、逐一CSSを見直して再構築するか、サイトができてから最後に手直しをするかですが、いずれにせよ時間がかかります。

そんなときに便利なのが、以下に紹介する、CSSを整理してくれるツールです。

CSS Comb:CSSプロパティを適切な順番に整理する

ttf03

(※画像をクリックするとリンク先に飛びますのでご注意ください。)

このツールはスタイルシートの段階からCSSプロパティを整理して、設定した順に並べてくれます。

CSS Comb

 

Csscss:CSSリダンダンシー分析

css_02

このツールはCSSファイルを構文分析して、どのルールセットの宣言が重複しているかを教えてくれます。使い方の詳細はこちらをご覧ください。

Csscss

 

Helium CSS:サイトをスキャンして不必要な部分を教えてくれるJSツール

このツールはウェブサイトの複数のページを調べて使われていないCSSを教えてくれます。サイトの複数個所のURLをリスト化し、それぞれのページをロード・オペラント分析してスタイルシートのリストを作成します。その後URLリストのページへとび、スタイルシートのセレクタが使われているかを調べます。

Helium CSS

 

CSSO:CSSファイルの構造最適化

このツールはCSSファイルの構造最適化をすることで、他のミニマイザと比べてファイルのサイズをずっと小さくしてくれます。セレクタやプロパティとブロックを統合したり、重複したセレクタやオーバーライドのプロパティ、空のルールセットを取り除いたりくれます。

CSSO

 

CSS Beautifier:CSSを自動で読みやすく

css_03

CSSファイルを自動で清書して読みやすくしてくれるツールです。下の画像のようなCSSが…

ttf01

こうなります。

ttf02

CSS Beautifier

 

CSS Lint:CSSコードの問題点を指摘

css_04

このツールは非効率だったり問題のあったりするパターンのCSSコードを指摘してくれます。ルールは挿し込めるので、自分で書いたりいらないものを編集したりできます。

CSS Lint

 

Devilo.us:CSSを整理して圧縮

css_05

CSSTidyを基にしたこのツールは、CSSを圧縮して最適化してくれます。CSS3にも対応していますよ。

Devilo.us

 

いかがでしたか。ぜひここで紹介したツールをうまく組み合わせて利用し、作業の効率をあげてくださいね。

 

(※本記事は、Tools to Format, Organize and Tidy Your CSS Codeを翻訳・再構成したものです)

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ