【CSS】スタイルやクラスがどのHTMLファイルのどの部分に使われているかを知るソフト

質問

CSSファイル内のクラスやIDが大量になってきたので整理したいと思っています。ただ、HTMLファイルも沢山あるので、どのIDやクラスがどのファイルで読まれているのか、または既にどのファイルかも読まれていないID、クラスがあるのかを知りたいのですが、自動で拾ってくれるソフトとかってあるのでしょうか？

ご存知の方いらっしゃいましたら教えてください。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

一発で一覧表示できるソフトは知りませんが、
grepを使えるテキストエディタを使えば調べることはできると思います。

タグセレクタはすべてのHTMLファイルで使われている（または使う予定）のため削除不可なので、考えなくていいでしょう。

「#」または「.」で"*.css"ファイルをgrepすると、
cssファイルに書かれているIDセレクタとクラスセレクタの一覧が作れます。
（ただし色指定 #ffffff などのゴミが混ざります）
属性セレクタも使われてるなら、「[」 でgrepすればいいと思います。

そのIDとクラス名で"*.html"ファイルをgrepすれば、
どのＨＴＭＬファイルにIDやクラス名が入っているかを見つけられると思います。

HTMLファイルのgrep結果が０件であれば、そのIDやclass名は使われていない、ということになると思います。
本文中や、タグ名と同じidやclass名があれば、それも表示されますので、
それらの除去は手作業になりますが、たいした労力にはならないでしょう。

正規表現が使えれば
id="(cssファイルから抽出したID)"
class=".*(cssファイルから抽出したclass)
でHTMLファイルをgrepしてみてください。
（正規表現中の括弧は注意書きの一部）

未検証です。

お礼

talooさま

ご回答ありがとうございます。
ちょっと私には高度なやり方になってしまいますが、
Googleで調べてやってみます。

どうもありがとうございました。

回答No.2

yambejp

全てのCSSを共通にしているのですか？ちょっと危険な感じがしますねぇ
私の場合、共有CSSと個別CSSをわけて管理してます

共有=common.cssは使うかどうかわからないけど、常に呼んでおくcssとして
個別.cssの先頭でimportするようにします。
個別のcssはhtml名にあわせたcssを用意してヘッダで呼びます。
たとえばaaa.htmにはaaa.cssを用意し、bbb.htmにはbbb.cssを用意するわけです

あとは個別ページのcssは好きにかけばよいわけです。
共通で使いそうだなぁ・・・というものはcommon.cssに、このページでしか
つかわないだろうなぁという場合は個別cssに書くようにすれば
かなりすっきりします。

目安としてはクラスは共有、idは個別としておくと無難ですが、
idだけどいろんなページでつかうもの（たとえばメニューにmenuってidをふるとか）
や、classだけど個別でしかつかわないもの（そのページの複数箇所に
どうしてもおなじ処理をしたい場合など）などありますので状況に
応じてつかいわけるとよいでしょう。

お礼

yambejpさま

ご回答ありがとうございます。
なるほど、各フォルダやファイルに分けてCSSを管理すれば
整理する時には楽ですね。

参考にさせていただきます。
ありがとうございました。

回答No.1

ORUKA1951

原理的に無理だと思いますよ。--知らないだけかも--
　HTML側から、CSSのどの設定が適用されているかは、fireBugを使えば一目瞭然ですが、逆はむりだと思います。
＞CSSファイル内のクラスやIDが大量になってきた
・・・私も失敗しました。

　そもそもCSSを巨大化してしまったのが失敗なので最初から作り直しましょう。そのときにCSSを複数に分けましょう。
<!-- すべてに適用するCSS -->
<link rel="stylesheet" type="text/css" href="../Css/general.css" />
<!-- デザインAの配置や枠線 -->
<link rel="stylesheet" type="text/css" media="screen" title="標準" href="../Css/shapeA.css" />
<!-- デザインAの色使いだけ
<link rel="stylesheet" type="text/css" media="screen" title="標準" href="../Css/colorA.css" />
<!-- 特定のグループ -->
<link rel="stylesheet" type="text/css" media="screen" title="標準" href="../Css/productColor.css" />

　いずれ、整理しなくちゃならないなら今のうちに。
　HTML側も、class="note foot memo" のように複数書いておくと、CSSもずっと減らせる。

お礼

ORUKA1951さま

ご回答どうもありがとうございます。
やはり最初にCSSを整理しておくことが重要なのですね。

今後のHP作りにはそういったことを意識して作成していこうと
思います。ありがとうございました。