セレクタの適用箇所を探す

質問

いつもお世話になっております。
よろしくお願いいたします。

特定のセレクタが適用されている個所を明示することはできるでしょうか。
制作上、cssの作りに不整合のある構造があったのですが、
その修正のために、影響が出る個所を探したいのです。

ご存知の方、何卒ご教示頂けますでしょうか。
よろしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

＞クライアントから送られてくる原稿に一貫性がなく、
＞ある事業所のページではリストがひとつで見出しがあり、文字数が膨大なのに
＞違う事業所ではリストが複数、見出しがなく、文字数が少なくサムネール画像が必要とか

　全く異なるクライアントではなく、ひとつのクライアントで部署が複数あるという場面について説明します。
　重要な事は、ひとつのクライアントサイトの場合、そのサイトのデザインや文書構造が変わるとユーザーから見た時に統一感がなく、使い勝手が極めて悪くなるからです。

　その場合は、Wikiのようなシステムがサイト構成では最も楽です。タグの代わりとなるタグ、または目印をしようする。あるいはXMLでデータを受け取ります。

　それが導入できない場合は、あらかじめフォーマット（雛形）を決めておきます。各部署から典型的な文書をいくつか提示を受けて、共通な構成で雛形を作っておきます。私の経験からは概ね
・インデックス(索引)ページ
　　部署のトップ、カテゴリーのトップなどの目次・表紙となるページ
・内容の詳細ページ
・会社情報や部署情報、連絡先等
　程度になるでしょう。

　そのうえで、
body
　|-- header/
　|　　　|-- navigation/　★SSIを使用するので内容は不要
　|-- section/
　|　　　|-- heading
　|　　　|-- section/　<!-- indexページだとここはnav -->
　|　　　|　　　|-- heading
　|　　　|　　　|-- 本文
　|　　　|　　　|-- artice/
　|　　　|　　　|　　　|-- header/
　|　　　|　　　|　　　|-- section/
　|　　　|　　　|　　　|-- footer/
　|　　　|　　　|-- aside/
　|　　　|-- section
　|　　　|-- (略)
　|　　　|-- contentTable/
　|　　　|-- aside/
　|-- footer/
　　　↑ これらはclass名　もしくはHTML5だと要素名

　このように提出された文書を元に雛形を作成して、それに基づいて原稿を提出してもらいます。別の要素が必要と言う場合は都度すりあわせが必要になります。
　これが苦手な、出来ない部署に関してはXMLでの提示をお願いします。
<ヘッダ>
　<見出し></見出し>
</ヘッダ>
<本文>
　<見出し></見出し>
　<説明文>
　　<段落></段落>
　</説明文>
　<項>
　　<見出し></見出し>
とね。

　事前の打ち合わせ、それができない場合は、全く素のテキストデータを貰ったほうが速いです。

お礼

お礼が遅くなって失礼いたしました。

事前にそこまで細かい指定をするのですね。事前にそこまで構造を決められるほどの経験もまだございません、今後の参考にさせて頂きます。ただ、私の職場はおばちゃんが多いため、決まった様式に当てはめて作成させるのは困難な気もします。。。

今回はもう諦めて、とりあえず作りきって、公開後に少しずつ手を入れることにしました。
そう割り切ったら速いこと速いこと・・・。
最初からそうしてればどれだけ効率的に進んだことかと思いますが、後から考えても仕方ありませんよね。

ご回答大変ありがとうございました。

回答No.1

ORUKA1951

それはないでしょう。
カスケーディングの仕組み上、継承されているものもあるし、詳細度の違いもあるし・・
不要なところにも適用されているようなら、セレクタの詳細度を上げればよい。
body{color:gray;}
を本文中だけに適用させるのでしたら、div.section{color:gray}としてもよいし、
body>div.header,body>div.fotter{color:black;}と上書きすればよい。

＞制作上、cssの作りに不整合のある構造があったのですが、
　なら、セレクタを書き直すのが筋ですから、
＞その修正のために、影響が出る個所を探したいのです。
　その必要はなくて、影響している要素のDOMを確認すればよいだけかと・・
　スタイルシートかいてれば、しばしば登場する場面です。

[例]
div.section{width:100%;min-width:630px;max-width:1000px;margin:0 auto;min-height:300px;}
なんてしていると、子供のセクションも適用されるので
div.section div.section{width:auto;min-width:0;min-height:0;}
とするとか・・・

　どんなセレクタ書いているのですか？？

　製作されるならfirefoxお使いだと思いますが、firebug使えば、それぞれの要素に継承やセレクタが原因で適用されているスタイルはわかると思います。

補足

ORUCA1951様

いつもお世話になっております。

クライアントから送られてくる原稿に一貫性がなく、
ある事業所のページではリストがひとつで見出しがあり、文字数が膨大なのに
違う事業所ではリストが複数、見出しがなく、文字数が少なくサムネール画像が必要とか

ほとほと手を焼いています。
その都度セレクタを用意すると、既存のページに影響が出ることが多々あるんですね。

以前ご教示頂いたfirebugを使って、問題点の洗い出しはしやすくなってはいるのですが
クライアントから送られてくる原稿に次々と現れる例外にどう対応していくべきなのか、
方針が立てられません。

やっぱりそんな都合のいい機能はないんですね。。。

> セレクタの詳細度を上げればよい。

あまりclassを増やさないことを心掛けているので、
＋やら>やらを使いながらスタイルを適用してますが、
どうしても既存の箇所に影響が出てしまうことがあるのです。

それは自分の管理が甘いことが原因ですが、、、