MozillaZine.jp フォーラム :: トピック - レスポンシブデザインビューの背景色を変更する方法

MozillaZine.jp フォーラム https://forums.mozillazine.jp/

レスポンシブデザインビューの背景色を変更する方法 https://forums.mozillazine.jp/viewtopic.php?f=2&t=15706	ページ 1 ／ 1

作成者:	RWD [ 2015年10月07日(水) 14:06 ]
記事の件名:	レスポンシブデザインビューの背景色を変更する方法
黒いサイトをレスポンシブデザインビューで表示すると境界の判別が付きづらく不便です。開発ツールのテーマをlightに変更てみましたが、レスポンシブデザインビューの背景色はそのままでした。 about:configなどから変更する方法はありますでしょうか？

作成者:	WADA [ 2015年10月08日(木) 16:20 ]
記事の件名:	Re: レスポンシブデザインビューの背景色を変更する方法
レスポンシブデザインビューを使えて、開発ツールのテーマをlightに変更、なんてなことを簡単に試せるんだから、 DOM Inspectorで背景となっている要素とか背景色のCSSの設定を見つけ、 Custom Buttonsというアドオンでツールバーにボタンを追加し、ボタンのスクリプトで背景色をトグル、とかいうのは、楽にできそう... XULの要素のIDを見つければ、document.getElementById("xx").style.backGroundColor="#FEFEFE" ; ってなことが可能です。

作成者:	偶然的通行人 [ 2015年10月08日(木) 20:34 ]
記事の件名:	Re: レスポンシブデザインビューの背景色を変更する方法
※質問するときは、「フォーラムの利用に関するご案内」、とりわけ「質問するときは」に目を通し、OS の種類や Firefox のバージョンといった使用環境についての最低限の情報を書き添えることをお勧めします。横から失礼します。WADA さんからのアドバイスの延長線上の話なのですが......。 about:config から変更する方法は知りませんが、背景色など静的（Static）な要素ならユーザースタイルで調整できるかと思います。ごくシンプルなものですが、例えば次のような感じです。 /* レスポンシブモードで開いたタブの背景色 / .browserContainer[responsivemode] { background-color: teal !important;} 注意すべき点は、レスポンシブデザインビューはタブ内に表示されますが、Content 要素ではなく Chrome 要素だということです。ユーザースタイルは userChrome.css に書いてください。（[アドオンマネージャ] や [トラブルシューティング情報] などもタブ内に開かれ、これらのカスタマイズは userContent.css で処理しますが、レスポンシブデザインビューは、これらとは異なることに注意してください。）ただし、ユーザースタイルで背景色を固定すると、それと同じような背景色の Web ページを表示したときは、また境界がわかりにくくなります。 WADA さんからご助言があるように、表示するページの背景色によって、レスポンシブモードで開いたタブの背景色を切り替えられるトグル式のツールバーボタンを作るといったことができるなら、そのほうがいいかもしれません。あるいは、元から指定されているボックスシャドーの初期値であるブラックの色を他に変更することで、暗色の Web ページを読み込んだときの境界を判別しやすくできるかもしれません。これで納得できるのなら、必ずしも上記のスタイルを使わなくても（つまり背景色は既定のままでも）かまわないと思いますし、２つを組み合わせて自身が見やすいと思う工夫をするのもアリだと思います。（例） / レスポンシブデザインビューのボックスシャドー指定 */ .browserStack[responsivemode] { box-shadow: 4px 4px 12px yellow !important;} いずれも、上記の配色等は仮の指定です。分かりやすさのため標準 16 色のカラーネームで書いてありますが、RGB 16 進でも 10 進でもユーザーの好みで指定してください。とりあえず以上です。的外れだったらすみません。

ページ 1 ／ 1	All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group http://www.phpbb.com/