質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • HTML

    8715questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5606questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSの整理方法について質問です

受付中

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 2,023

grapeee

score 3

主にフロントエンドでコーディング業務をしている者です。
ページ数が百ページ以上はある大きなサイトで、長い年月の間、複数の人間が更新を繰り返してきたために、非常に複雑になってしまったサイトの整理整頓をしようと思っています。

特に、CSSの整理ついて
・CSSからCSSの読み込みを多重に繰り返していたり、
・違うディレクトリに同じ名前のCSS(common.cssなど)があったりで、
デベロッパーツールをつかっても構造が分かりづらいため、部分的な更新作業にも時間が取られてしまうことが多く、使用しなくなったCSSやスタイルの記述も溜まっていて、非常に無駄の多くなってしまっているCSSの改善に困っています。

「htmlから使用していないCSSを抽出する方法」について既に質問がされていたようですが、

(1)htmlから使用しているCSS(最終的に効いているスタイル)だけ抽出してまとめてくれるようなツールはないでしょうか?

(2)CSS内に記述されたスタイル側から、そのスタイルが適用されている箇所がわかる方法やツールがあれば教えていただきたいです。

(3)上記以外にも、CSSの整理、管理方法に関して、よい方法やツールなどご助言いただけたら大変たすかります。

よろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

こんにちは。
 まずは、ごめんなさい、この回答は「こういうツールがあるよ」という回答ではないです。
そこだけ最初に言っておきますね。それでは何かといえば、いま自分が関わっている開発案件
でも、grapeeeさんの担当されているサイトと同様に、大量のHTML(実態は、Smartyテンプ
レートですが)とCSSファイルがあり、本当に活きてるスタイルがどれなのか、すぐには分か
らない状況になっていますので、おっしゃるような

(1) htmlから使用しているCSS(最終的に効いているスタイル)だけ抽出してまとめて
くれるようなツール
 
(2) CSS内に記述されたスタイル側から、そのスタイルが適用されている箇所がわかる
方法やツール

があればいいなと思いまして、軽くGoogleで調べてみましたが、案外無いものですね。
(あっても良さそうなものだけど、と正直思いましたが)

 そこで、(私はサーバー側+フロントエンドのJSも書くプログラミング担当なのですが、)
もし、WEBデザインやコーディングのチームのほうからgrapeeeさんのような要望があった
場合どうするかを考えましたが、多分「ツールを作ってしまいましょう」という提案をする
と思うので、以下に、実際作るならば、どんなプログラムになるのかのアウトラインを記し
ました。

 まず、最も単純な場合として、ある1つのHTMLファイルに1つのCSSファイルが
読み込まれているケースを想定して、以下のプログラム1、2を作成します。

  • プログラム1

 (1)このCSSファイルのセレクタだけを読み込んで、1行1セレクタのテキストファイルを出力する。

  • プログラム2

(1)検証対象のHTMLをパースして、(プログラムの中で)要素のツリーを作る。
(2)プログラム1が作ったセレクタのリストを読んで、上から順にそのセレクタに相当する
  要素数を数える。(※該当要素を抽出するために、セレクタをXPathに変換する必要がある
  かもしれないので、その際は適宜変換)
(3)その数えた結果を、ファイル(CSVとか)に、セレクタと該当数を1行にカンマ区切りで出力
 →注目すべきは、該当数が0のセレクタですね。

といった処理を行うプログラムを書くことになるかと思います。

 プログラム1の出力をテキストファイルにしないで、プログラム1と2を結合した
1個のプログラムにすることもできますが、ここではストーリーを分かりやすく
するために分割して2つのプログラムにしています。
 このアウトラインを実装するには、HTMLのパーサー、DOM、セレクタ、XPath周辺の
知識があれば、そんなに作るのに難易度の高いプログラムにはならないと思います。

あとは、
  • 1つのCSSが複数のCSSをimport している場合

  • 静的なHTMLではなく、プログラムで動的にHTMLを作っている場合(例:Smarty、JSPなど)

に対応しなければなりませんが、これらは 1HTML-1CSSのチェックの応用なので、
(それなりに時間はかかると思いますが、)すごく難しいアルゴリズムを考えないと
クリアできない種類の難問ではないと思います。

これを実装する言語としては、PHPでもJavaでもRubyでも、または他の言語でも
できそうな気がしますが、機能が充実しているHTMLパーサーのライブラリがある
言語を選ぶのがよいと思います。
 とはいえ、HTMLから、CSSセレクタなりXPathで要素を取ってくるのは、いわ
ゆるスクレイピングと呼ばれるよく知られた技術の範疇なので、どの言語でも便利な
ものはあると思います。(JavaならJsoup、RubyならNokogiri、など)

 以上が、私からの回答としての
  「こんなプログラムを書けばいいのでは?」
 というのものになります。

(やや突き放した回答で申し訳ないのですが)もしgrapeeeさんのお近くで、上記の
プログラミングができそうな方がいらっしゃれば、ご相談されてみてはいかがでしょうか? 

私からの回答は以上です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/04 20:01

    ご回答ありがとうございます。

    そういったツールがない場合 自前で作るとしたらそれが可能かどうか、という質問を書こうか迷っていたので、ykt68さんの回答は大変ありがたいです。

    私はプログラミングやシステムの知識が乏しいので、まずその開発をするとしたら、どの担当者が関わることになるのかというところさえわからなかったので、ご回答大変参考になります。

    回答頂いたプログラミングの内容について、知らない用語や知識などあり、まだ全部は理解できていないのですが、難しいプログラムではないことが分かっただけでも良かったです。これから自分なりに少し調べて参考にさせて頂こうと思います。
    まず取り急ぎコメントだけさせてもらいました。

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

    キャンセル

  • 2015/05/04 20:10

    ご返信ありがとうございます。お役に立てるかもしれない件、嬉しいです。なのですが、rikさんのご回答にもあるように、JavaScriptで要素を動的に追加しCSSを効かせているコードがかなりの量あるのでしたら、現場で実際に管理ツールとして使えるレベルにまでもっていくには、ツール開発自体がけっこう手強いものになるかもしれません。good luckをお祈りしております。

    キャンセル

0

最近はJavaScriptで動的にタグを追加したり、スタイルを適用させたりという事がありますので、自動処理では漏れが出てしまうのではないかと思います。
私は100ページを超えるサイトであってもスタイルシートやjsは1カ所に集めるようにしていますが、チーム開発では分散することになるのはやむおえないかもしれません。
場所によってはCSSの上書きも考えられますので、CSS適用順番も考慮しなければなりません。
今のタイミングとしては、HTML5でモバイルフレンドリーで作り直しが良いような気もします。
答えになっていなくて申し訳ございません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/04 20:00

    ご回答ありがとうございます。

    確かに、ページによっては作り直したほうが早いという選択肢もありますよね。
    実際、内容やデザインが古くなったページを作り直す、という業務は常に、行われているのですが、コーディングや管理方法にルールがないために、私の質問したような問題は解決されないままになっているということもあります。

    なので、その根本の運用管理についても同時に解決しなければならないことだと思います。

    サイトの特徴として、部分的な改修や細かい更新作業が多いということから、共通のスタイルも個々のスタイルも分けずに、ページごとに一つのCSSファイルを用意するという方法を考えているところです。
    回答頂いた「スタイルシートやjsは1カ所に集めるようにしています」と同じことなのかもしれませんね。

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

    キャンセル

  • 2015/05/04 20:02

    そうですね。私が先に書いた回答のプログラムだと、おっしゃるような「JavaScriptで動的にタグを追加したり、スタイルを適用させたり」の部分までは追いかけきれません。Selenium WebDriverを使えば、JSで動的に追加された要素もプログラムから取得、制御できるかもしれないかなあ・・・と妄想しなくもないのですが、それだとツール開発自体が大変になりそうです。

    キャンセル

  • 2015/05/04 20:23

    googleなどのデベロッパーツールでも最終的な適用スタイル(プロパティ)の結果をまとめて表示してくれる欄がありますが、あの結果を新たなCSSファイルとして生成することができればよいのにな(してくれる機能があればよいのにな)、と思ったりしました。
    開発やプログラミングを知らない人間の安易な考えで申し訳ないのですが。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8715questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5606questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。