@nishinagahori888

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

DevTool 適応されるStyleシート

Chromeからです。

下記URL参照願います

https://gyazo.com/a3b9208949236599e763533cd2392c85
対象にするブログの一部分 A

https://gyazo.com/965076aa2876c0c22c63410c075687a1
Elementsの一部分 B

Bに対応する部分の動画URL
https://streamable.com/pewi8p
Bに対応するスタイルシート C

質問
BとCに対応して質問させてください
1.Bに対応する部分はCの箇所のどの部分ですか
2.1の箇所は一部分だと思いますが、他が長すぎる。これはなにか理由があるのですか

0 likes

1Answer

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12253966662
同内容の質問を過去に他サイトでも投稿されているように見受けられますが、マルチポストを快く思わない方もおられるので十分な配慮をお願いします。

1.Bに対応する部分はCの箇所のどの部分ですか

「Bに対応する部分」を「Bが関連する部分」と捉えるならば ”全て” です。

B は「class属性値が entry-title の要素」とも「単独の <h1> 要素」とも「<article> の中の <h1> 要素」とも解釈することができます。

C の箇所(=Styles ペイン)には、まず .css ファイルか <style> タグに記述されたスタイルシートの内、上記のような B の特徴に合致するセレクタで指定された全てのスタイル指定が羅列されます。
次に、ブラウザがデフォルト値として勝手に適用するスタイルシートも存在し、これもまた B に合致するものが右側に user agent stylesheet と記載された上でペイン内に表示されます。
そして B に対する直接的なセレクタ指定とは別に、動画の 0:17 あたりから現れる Inherited from body.post-template-default... のような祖先要素から引き継がれた一部のプロパティも表示されます。

2.1の箇所は一部分だと思いますが、他が長すぎる。これはなにか理由があるのですか

よって表示されている内容は全て B に関与しているので「長すぎる」ということはありません。Styles ペインには B に適用されようとしているスタイル指定が、重複指定されたもの(font-sizeline-height など)も含めて全て表示されるため長く感じるのだと思います。

これらのスタイル指定がカスケーディングの仕様に沿って上書きを繰り返し最終的な B のスタイルは決定されます。上書きされて無効になった値は打ち消し線が表示されているので、質問1にあった「Bに対応する部分」が「B の表示に適用されたスタイル指定」と捉えるのであれば「C の中で打ち消し線が付いてないもの」と言えるかもしれません。

ちなみに、最終的に B にどんなスタイルが適用されているかを確認するなら1つ隣の Computed ペインを閲覧するのが使いやすいかと思います。

0Like

Comments

  1. @prismism

    1.
    >「Bに対応する部分」を「Bが関連する部分」と捉えるならば ”全て” です。
    了解しました。

    2.
    了解しました。
    >1つ隣の Computed ペインを閲覧するのが使いやすいかと思います。
    助かります。今後大いに利用します。

    ありがとうございました。最初読んだときまったくチンプンカンプンでしたが、
    なんども読み返して理解できるようになりました。私みたいな初心者でもよく
    わかる内容なので助かります。

Your answer might help someone💌