WEBサイトのコーディングにて質問です。

HTML+CSSにて構築されたサイトで、CSS内での未使用のクラスを消して行きたいのですが、
何か方法はありませんでしょうか。
※ポイント稼ぎと思われる浅い回答は全て通報します。

回答の条件
  • 1人2回まで
  • 登録:2010/01/20 11:07:58
  • 終了:2010/01/27 11:10:03

回答(2件)

id:horonict No.1

horonict回答回数257ベストアンサー獲得回数512010/01/20 11:40:00

ポイント35pt

不要なCSSを洗い出すツールがあります。

Rubyが必要です。

http://feed.designlinkdatabase.net/feed/outsite_755.aspx

id:Hidehisa No.2

Hidehisa回答回数24ベストアンサー獲得回数22010/01/20 23:05:06

ポイント35pt

■PageSpeed

ブラウザのFirefoxにアドオンのFirebugを入れて、さらにGoogleのPageSpeedアドオンを入れると、特定ページで、CSSに記述されているけれども使われていないスタイルを教えてくれます。

方法としては、

Firefoxをインストール

http://mozilla.jp/firefox/

FirebugをFirefoxにインストール

https://addons.mozilla.jp/firefox/details/1843

FirebugにGoogle PageSpeedをインストール

http://code.google.com/speed/page-speed/download.html

目的のページを表示

Firefoxのメニューから[ツール]>[Firebug]>[Firebugを新しいウィンドウ開く]

Firebugのウィンドウで、上部のタブから[Page Speed]を選ぶ

[Analyze Performance]ボタンをクリックして、解析が終わるまで待つ

表示された結果のなかの「Remove unused CSS」を開いて、示されているスタイル記述を記録する。これが、CSSに記述されているけれどもそのページでは使われていないスタイル指定です。

サイト全体ではチェックできませんが、主要なページでこれを繰り返して、使われていない記述を絞り込んでいくことは可能ですね。


■Dust Me CSS

Dust-Me Selectors

http://www.sitepoint.com/dustmeselectors/

をFirefoxにインストールすれば、サイト内の全ページにリンクされているサイトマップを指定すると、そこからリンクされているすべてのページで同様のチェックをまとめてしてくれるようですが、そちらは私は使ったことがありませんので参考までに。


■grep

動的なサイトでなく、静的なHTMLファイルがある場合は、idやcssをgrepして探す方法もあります。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません