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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

1回答

1274閲覧

最も優先度の高いCSSはなんでしょうか?

blendegg

総合スコア81

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2019/07/20 22:18

###概要
ページコンテンツの背景を黒くするfirefoxアドオンを作成したいのですが、CSSの優先度の決まり方はそう簡単ではないようです。インラインのstyleにimportantを付けたものが最も強いと思っていましたが、機能しないサイトもあるようです。
このような場合の解決策はあるでしょうか?
単純にこれが一番強いと言えるものは存在しないようです。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/07/20 22:28

組み方次第です。 ケース、パターンのコードを例示してください。
blendegg

2019/07/21 00:09

組み方とは何のことでしょうか。 自身のサイトで動かしたいのではなく、あらゆるサイト上で動かしたいのです。 youtube、reddit、アマゾンなど、異なるサイトで背景を黒くしたいです。 しかしサイトごとに設定が異なりますから、うまく黒くならない場合もありますよね。
m.ts10806

2019/07/21 00:23

>組み方とは何のことでしょうか。 CSS,HTML またはJavaScript つまりコードの組み方です。 >youtube、reddit、アマゾンなど、異なるサイトで背景を黒くしたいです。 全て自身のサイトではないですがどういうことでしょうか。ユーザーページのカスタマイズのことでしょうか。(私はいずれもアカウント持ってないので詳しくないですが) 仕組みが違う以上は「そのサイトの仕様にあわせて適宜対応する」が答えるになると思います。もちろん仰っているように同じやり方で一概にできるわけではないと思います。
blendegg

2019/07/21 01:01

https://addons.mozilla.org/ja/firefox/addon/darkreader/ このような背景を変更するアドオンがあります。似たようなことをしたかったです。 では一律で背景を変更できるような方法はないということですね。 個別に対応するとなると労力がかかりすぎるので、一律で変更できる方法を探していました。
m.ts10806

2019/07/21 01:06

作りが違うのに同じやり方できくわけがないです。 CSSの基本はあと勝ちとはいえ、JavaScriptで変えられていたらきかないわけですし。 しかも提示のものはあくまでFirefoxのアドオンです。 Chromeなどにも拡張はありますが、それはそこにしかきかない機能で、その人にしかきかない機能です。アドオンや拡張で対応したところで自分にしかきかないので意味がないのではないでしょうか。 もう少しそのあたり具体的に質問本文に追記しておいてください。(でないと、この課題に対する解決策は誰も出せないと思います)
CHERRY

2019/07/22 04:32

参考にしているものがあるのであれば、コードを読むのが早いと思います。
guest

回答1

0

ベストアンサー

カスケーディング (Cascading)

文書言語の規約に則って,ソース文書用に作者が指定するスタイルシート。 例えば HTML では,文書内に含められたり, 外部へリンクされ得る。

作者出自( author origin )
文書言語の規約に則って,ソース文書用に作者が指定するスタイルシート。 例えば HTML では,文書内に含められたり, 外部へリンクされ得る。
利用者出自( user origin )
利用者は、個々の文書用に,スタイル情報を指定することもある。 例えば,利用者がスタイルシートが含まれたファイルを指定することもあれば、 UA が利用者スタイルシート(あるいはそのようにふるまうもの)を生成する UI を供することもある。
UA 出自( user agent origin )
適合 UA は、既定のスタイルシート(あるいはそのようにふるまうもの)を適用するものとする。 UA の既定のスタイルシートは、文書言語の要素を,文書言語にて一般に期待されている呈示を満たす仕方で呈示するべきである(例えば 視覚系ブラウザは,HTML の em 要素を italic フォントで呈示するなど) — 例: HTML の UA スタイルシート [HTML]。


  1. Transition declarations [css-transitions-1]
  2. Important user agent declarations
  3. Important user declarations
  4. Important author declarations
  5. Animation declarations [css-animations-1]
  6. Normal author declarations
  7. Normal user declarations
  8. Normal user agent declarations

以下、日本語訳。

  1. CSS Transitions 宣言
  2. !important 規則を持つ User-Agent 宣言 (デフォルト・スタイルシート)
  3. !important 規則を持つ User 宣言 (ユーザ・スタイルシート)
  4. !important 規則を持つ Author 宣言 (Webサーバ上で宣言されたスタイルシート)
  5. CSS Animations 宣言
  6. 通常の Author 宣言
  7. 通常の User 宣言
  8. 通常の User-Agent 宣言

詳細度 (specificity)

詳細度の計算法。

HTMLのstyle属性の詳細度。

スタイル属性 内の宣言は、その属性を有する要素に適用される。 この宣言は、カスケードにおいては,[ 出自は**作者(Author)**であって, 詳細度はどの選択子よりも高い ]ものと見なされる。

詳細度を計算した上で、下記セレクタが最優先されます。

  • 詳細度が最も高いセレクタ
  • 詳細度が同値の場合は、後から宣言されたセレクタ

最優先されるスタイル

(前提) CSS Transitions 宣言、User-Agent宣言は一般に制御不可なので、考慮しないものとします。

次の全ての条件を満たすスタイルが最優先されます。

  • ユーザ・スタイルシートで最も詳細度が高いセレクタ (詳細度が同値のセレクタが複数存在する場合、最後に宣言されたセレクタ)
  • !important 規則を持つプロパティ値 (同一セレクタ上では、最後に宣言された プロパティ値)

Re: blendegg さん

投稿2019/07/21 04:31

編集2019/07/22 09:15
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

blendegg

2019/07/21 20:41

作者の設定次第ではコントロール不可ということですね。 ありがとうございました。
think49

2019/07/21 23:21

> 作者の設定次第ではコントロール不可ということですね。 カスケーディングを再読下さい。 !important を付与するなら、User 宣言の方が優先順位は上です。
m.ts10806

2019/07/22 04:03

think49さん 大変参考になる回答のなか、細かいですが大事なところでスペルミスが・・・ >!imporant
think49

2019/07/22 09:22

確かに…。修正しました。 ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問