白い部分の名前を教えて

お世話になります。
アドレスバーの外側の部分、
掲載した画像の緑色の外側の部分の名前を何と言いますか。
またcssでは何と表現するのでしょうか。

No.5 ベストアンサー 回答者： まめでっぽう 回答日時： 2020/01/14 13:16

はい、userChrome.cssにcssを適用し、Firefoxを再起動すると反映されます。

試しにuserChrome.cssに下記のように打って再起動してみてください。
メニューやURLの文字色は赤に変わりますか？
* {
color: red !important;
}
ブラウザやプロファイル名が違うと当然適用されないので、念のため確認してみてください。

また、ブラウザーツールボックス(Ctrl+Shift+Alt+I)では、各要素のcss適用状況を確認することができます。
調べたい要素を選択し、右画面の「計算済み」タブを選択すると確認できます。
添付画像は
box > toolbox#navigator-toolbox > toolbar#nav-bar
に適用されているスタイル一覧です。
Firefox72.0.1のデフォルトテーマは、背景色は薄い灰色(R249 G249 B250)、背景は画像無しなので、
このまま背景色を指定すれば適用されます。
背景画像が指定されている場合は、背景色の上に画像が配置されてしまうので、背景画像を無効にするcssも追加します。
質問者様の計算済みタブを添付していただければ何か分かるかもしれません。

この回答へのお礼

回答ありがとうございます。
お教えいただいたcssをFirefoxとWarterfoxに適用すると両方とも
文字は赤く変わります。
背景色はグレーのままで変わりません。
開発ツールによる絞り込みは文章のやりとりでは私には無理があります。
このままでFirefoxからWarterfoxへ移行しようと思っております。

お礼日時：2020/01/15 16:30

No.4 回答者： まめでっぽう 回答日時： 2020/01/13 18:55

開発ツールはCtrl++で文字拡大、Ctrl+-で縮小、Ctrl+0でデフォルトサイズに戻ります。

キーボードの上下などで辿っていくと、選択した要素に対応したバーやアイコンが破線で囲まれ、そこからidなどを知ることができます。

ツリーをクリックするか→キーを押すとツリーが展開されます。
ナビゲーションバー
└URLバー
　└鍵アイコン
といった感じで、変更したい場所を少しずつ掘り下げて探していってください。

この回答へのお礼

何度も回答ありがとうございます。お尋ねしますが、
No.2に掲載して下さった画像の黒い部分は、FirefoxのuserChrome.cssに
#nav-bar {
background-color: #303030 !important;
}
を加入して実行したものですか？
私のパソコンでFirefoxのuserChrome.cssの中身を
#nav-bar {
background-color: #303030 !important;
}
だけにして実行しても背景色はグレーのままです。

お礼日時：2020/01/14 11:27

No.3 回答者： まめでっぽう 回答日時： 2020/01/13 14:34

Warterfoxは使っていないのでFirefoxでの説明になります。

アドレスバー全体の背景を変えたい場合はid="urlbar"を指定します。

適用されないのは、背景に画像が使われている、cssの優先順位の問題、WarterfoxとFirefoxのidが違う、辺りでしょうか。
Firefox系ブラウザならNo1の手順で開発ツールを使うことができると思うので、
ご自分でidを調査してみてください。

この回答へのお礼

回答ありがとうございます。
開発ツールを何とか表示してみましたが、目の悪い私にはちょっとお手上げです。
小さい字はよく見えません。
ナビゲーションツールバーの背景色はグレーですが、当面これで使って行こうと思っております。
どうもありがとうございました。

お礼日時：2020/01/13 17:28

No.2 回答者： まめでっぽう 回答日時： 2020/01/12 21:59

\Users\<UserName>\AppData\Roaming\Mozilla\Firefox\Profiles\<ProfilesName>\chrome\userChrome.css

にこんな感じで記述し、#303030をお好きなカラーコードに変更してFirefoxを再起動してください。
#nav-bar {
background-color: #303030 !important;
}

慣れるとweb開発ツールのように要素を調査し、自由にカスタマイズすることができますよ(最近はいじっていませんが)。
また、調べていないので分かりませんが、テーマを自由にカスタマイズできる拡張機能がありそうな気がします。

この回答へのお礼

回答ありがとうございます。使用ブラウザはWarterfoxです。
#nav-bar {
background-color: black !important;
}
としてWarterfoxを再起動しましたが黒くなりません。グレーのままです。
Firefoxでもやってみましたがグレーで黒ではありません。
いまWarterfoxのuserChrome.cssに入っているのは
#main-window[windowtype="navigator:browser"] {
background-color: black !important;
}
です。他のサイトから見つけてきたものですが、
これでメニューバーとタブバーの背景色が黒になっております。
アドレスバーが入っているバー(ナビゲーションツールバー？)の背景色も黒にしたいのですが、どうすればいいのでしょう。
お教えくださると大変助かるのですが。

お礼日時：2020/01/13 09:31

No.1 回答者： まめでっぽう 回答日時： 2020/01/12 19:24

Firefoxの名称でよろしいでしょうか？

GUIのカスタマイズではオーバーフローメニューとなっておりますが、
中身のラベルはナビゲーションとなっていますね。
該当箇所のcssは
id="nav-bar"
class="browser-toolbar"
になります。

Firefox付属の開発ツールを開き、開発ツールの設定(…→設定)の以下の項目にチェックを入れ、
「ブラウザーとアドオンのデバッガーを有効化」
「リモートデバッガーを有効化」
ブラウザーツールボックス(Ctrl+Shift+Alt+I)を起動すると、
UIやアドオンの要素を調べることができます。

この回答へのお礼

回答ありがとうございます。
今までFirefoxを使ってきましたが、私の目には合わない部分が出てきたので最近、Warterfoxに乗り換えていこうと思っているところです。
件の名称は「ナビゲーション」と言うのですか。
私のやりたいことはナビゲーションの色を黒にしたい、ということです。
厚かましいお願いですが、cssでどう書くかお分かりでしたらお教えください。
よろしくお願いいたします。

お礼日時：2020/01/12 21:23