する質問をすることでしか得られない、回答やアドバイスがある。7主にフロントエンドでコーディング業務をしている者です。ページ数が百ページ以上はある大きなサイトで、長い年月の間、複数の人間が更新を繰り返してきたために、非常に複雑になってしまったサイトの整理整頓をしようと思っています。・違うディレクトリに同じ名前のCSS(common.cssなど)があったりで、デベロッパーツールをつかっても構造が分かりづらいため、部分的な更新作業にも時間が取られてしまうことが多く、使用しなくなったCSSやスタイルの記述も溜まっていて、非常に無駄の多くなってしまっているCSSの改善に困っています。「htmlから使用していないCSSを抽出する方法」について既に質問がされていたようですが、(1)htmlから使用しているCSS(最終的に効いているスタイル)だけ抽出してまとめてくれるようなツールはないでしょうか?(2)CSS内に記述されたスタイル側から、そのスタイルが適用されている箇所がわかる方法やツールがあれば教えていただきたいです。(3)上記以外にも、CSSの整理、管理方法に関して、よい方法やツールなどご助言いただけたら大変たすかります。attachmentクリップ2気になる質問をクリップするクリップした質問は、後からいつでもマイページで確認できます。クリップした質問に回答があった際、通知やメールを受け取ることができます。自分も答えを知りたい質問者以外のユーザにも役立つ評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。-評価を下げられる数の上限に達しました評価を下げることができません1日5回まで評価を下げられます1日に1ユーザに対して2回まで評価を下げられます質問の評価を下げるteratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。コメントをしてください。送信する質問の評価を下げる機能の利用条件この機能を利用するためには、以下の事項を行う必要があります。件sort評価が高い順sort新着順sort古い順link+1こんにちは。ごめんなさい、この回答は「こういうツールがあるよ」という回答ではないです。そこだけ最初に言っておきますね。CSS内に記述されたスタイル側から、そのスタイルが適用されている箇所がわかる方法やツールがあればいいなと思いまして、軽くGoogleで調べてみましたが、案外無いものですね。(あっても良さそうなものだけど、と正直思いましたが)そこで、(私はサーバー側+フロントエンドのJSも書くプログラミング担当なのですが、)もし、WEBデザインやコーディングのチームのほうからgrapeeeさんのような要望があった場合どうするかを考えましたが、多分「ツールを作ってしまいましょう」という提案をすると思うので、以下に、実際作るならば、どんなプログラムになるのかのアウトラインを記しました。単純な場合として、ある1つのHTMLファイルに1つのCSSファイルが読み込まれているケースを想定して、以下のプログラム1、2を作成します。プログラム1(1)このCSSファイルのセレクタだけを読み込んで、1行1セレクタのテキストファイルを出力する。プログラム2(1)検証対象のHTMLをパースして、(プログラムの中で)要素のツリーを作る。(2)プログラム1が作ったセレクタのリストを読んで、上から順にそのセレクタに相当する要素数を数える。→注目すべきは、該当数が0のセレクタですね。いった処理を行うプログラムを書くことになるかと思います。プログラム1の出力をテキストファイルにしないで、プログラム1と2を結合した1個のプログラムにすることもできますが、ここではストーリーを分かりやすくするために分割して2つのプログラムにしています。このアウトラインを実装するには、HTMLのパーサー、DOM、セレクタ、XPath周辺の知識があれば、そんなに作るのに難易度の高いプログラムにはならないと思います。1HTML-1CSSのチェックの応用なので、(それなりに時間はかかると思いますが、)すごく難しいアルゴリズムを考えないとクリアできない種類の難問ではないと思います。これを実装する言語としては、PHPでもJavaでもRubyでも、または他の言語でもできそうな気がしますが、機能が充実しているHTMLパーサーのライブラリがある言語を選ぶのがよいと思います。いえ、HTMLから、CSSセレクタなりXPathで要素を取ってくるのは、いわゆるスクレイピングと呼ばれるよく知られた技術の範疇なので、どの言語でも便利なものはあると思います。(JavaならJsoup、RubyならNokogiri、など)以上が、私からの回答としての「こんなプログラムを書けばいいのでは?」というのものになります。(やや突き放した回答で申し訳ないのですが)もしgrapeeeさんのお近くで、上記のプログラミングができそうな方がいらっしゃれば、ご相談されてみてはいかがでしょうか?私からの回答は以上です。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。20:01ご回答ありがとうございます。自前で作るとしたらそれが可能かどうか、という質問を書こうか迷っていたので、ykt68さんの回答は大変ありがたいです。私はプログラミングやシステムの知識が乏しいので、まずその開発をするとしたら、どの担当者が関わることになるのかというところさえわからなかったので、ご回答大変参考になります。回答頂いたプログラミングの内容について、知らない用語や知識などあり、まだ全部は理解できていないのですが、難しいプログラムではないことが分かっただけでも良かったです。これから自分なりに少し調べて参考にさせて頂こうと思います。取り急ぎコメントだけさせてもらいました。ありがとうございました。ご回答ありがとうございます。自前で作るとしたらそれが可能かどうか、という質問を書こうか迷っていたので、ykt68さんの回答は大変ありがたいです。私はプログラミングやシステムの知識が乏しいので、まずその開発をするとしたら、どの担当者が関わることになるのかというところさえわからなかったので、ご回答大変参考になります。回答頂いたプログラミングの内容について、知らない用語や知識などあり、まだ全部は理解できていないのですが、難しいプログラムではないことが分かっただけでも良かったです。これから自分なりに少し調べて参考にさせて頂こうと思います。取り急ぎコメントだけさせてもらいました。ありがとうございました。20:10ご返信ありがとうございます。お役に立てるかもしれない件、嬉しいです。rikさんのご回答にもあるように、JavaScriptで要素を動的に追加しCSSを効かせているコードがかなりの量あるのでしたら、現場で実際に管理ツールとして使えるレベルにまでもっていくには、ツール開発自体がけっこう手強いものになるかもしれません。luckをお祈りしております。ご返信ありがとうございます。お役に立てるかもしれない件、嬉しいです。rikさんのご回答にもあるように、JavaScriptで要素を動的に追加しCSSを効かせているコードがかなりの量あるのでしたら、現場で実際に管理ツールとして使えるレベルにまでもっていくには、ツール開発自体がけっこう手強いものになるかもしれません。luckをお祈りしております。キャンセル完了するlink0最近はJavaScriptで動的にタグを追加したり、スタイルを適用させたりという事がありますので、自動処理では漏れが出てしまうのではないかと思います。私は100ページを超えるサイトであってもスタイルシートやjsは1カ所に集めるようにしていますが、チーム開発では分散することになるのはやむおえないかもしれません。場所によってはCSSの上書きも考えられますので、CSS適用順番も考慮しなければなりません。今のタイミングとしては、HTML5でモバイルフレンドリーで作り直しが良いような気もします。答えになっていなくて申し訳ございません。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。20:00ご回答ありがとうございます。確かに、ページによっては作り直したほうが早いという選択肢もありますよね。実際、内容やデザインが古くなったページを作り直す、という業務は常に、行われているのですが、コーディングや管理方法にルールがないために、私の質問したような問題は解決されないままになっているということもあります。その根本の運用管理についても同時に解決しなければならないことだと思います。サイトの特徴として、部分的な改修や細かい更新作業が多いということから、共通のスタイルも個々のスタイルも分けずに、ページごとに一つのCSSファイルを用意するという方法を考えているところです。回答頂いた「スタイルシートやjsは1カ所に集めるようにしています」と同じことなのかもしれませんね。ご意見参考にさせて頂きます。ありがとうございました。ご回答ありがとうございます。確かに、ページによっては作り直したほうが早いという選択肢もありますよね。実際、内容やデザインが古くなったページを作り直す、という業務は常に、行われているのですが、コーディングや管理方法にルールがないために、私の質問したような問題は解決されないままになっているということもあります。その根本の運用管理についても同時に解決しなければならないことだと思います。サイトの特徴として、部分的な改修や細かい更新作業が多いということから、共通のスタイルも個々のスタイルも分けずに、ページごとに一つのCSSファイルを用意するという方法を考えているところです。回答頂いた「スタイルシートやjsは1カ所に集めるようにしています」と同じことなのかもしれませんね。ご意見参考にさせて頂きます。ありがとうございました。20:02そうですね。私が先に書いた回答のプログラムだと、おっしゃるような「JavaScriptで動的にタグを追加したり、スタイルを適用させたり」の部分までは追いかけきれません。WebDriverを使えば、JSで動的に追加された要素もプログラムから取得、制御できるかもしれないかなあ・・・と妄想しなくもないのですが、それだとツール開発自体が大変になりそうです。私が先に書いた回答のプログラムだと、おっしゃるような「JavaScriptで動的にタグを追加したり、スタイルを適用させたり」の部分までは追いかけきれません。WebDriverを使えば、JSで動的に追加された要素もプログラムから取得、制御できるかもしれないかなあ・・・と妄想しなくもないのですが、それだとツール開発自体が大変になりそうです。20:23googleなどのデベロッパーツールでも最終的な適用スタイル(プロパティ)の結果をまとめて表示してくれる欄がありますが、あの結果を新たなCSSファイルとして生成することができればよいのにな(してくれる機能があればよいのにな)、と思ったりしました。開発やプログラミングを知らない人間の安易な考えで申し訳ないのですが。googleなどのデベロッパーツールでも最終的な適用スタイル(プロパティ)の結果をまとめて表示してくれる欄がありますが、あの結果を新たなCSSファイルとして生成することができればよいのにな(してくれる機能があればよいのにな)、と思ったりしました。開発やプログラミングを知らない人間の安易な考えで申し訳ないのですが。頂いたご意見への回答は行っておりません。