しろう さん、EarlgreyTea と申します。
拡張機能の Stylus を使うことが念頭にあったため、拡張機能の板にトピック投稿されたのだと思いますが、いったん拡張機能からは離れましょう。
たぶん、話の方向が決まったら、モデレーター権限を持つ方がトピックを適切な板に移動してくれると思います。
では本題に入ります。
まず しろう さんが本当にやりたいと思っていることは何かをはっきりさせる必要があると思います。
件名の「デベロッパーツールを疑似で変更したい」ですと、変更したい対象はデベロッパーツール（ウェブ開発ツールでしょうか）ということになります。
たぶん、そうじゃないですよね。
しろう さんが書きました:
お好みのホームページを疑似で編集し、完成はPDFで保存します。
デベロッパーツールの中身に精通していれば、CSSとHTMLを好きなように
編集すればいいのですが
大枠は、「任意のウェブサイトの表示を変更し、その画面のスクリーンショットをPDFで保存したい」ということでよろしいでしょうか。
「疑似で編集」「デベロッパーツールの中身に精通していれば、CSSとHTMLを好きなように編集」ということは、
読み込んだウェブページに対して、ウェブ開発ツールの
インスペクターの
ということをお考えになっているということでしょうか。
これらは、直接ウェブサイトを編集するわけではなく、読み込み済みの HTML と CSS をオンメモリで編集して表示に反映させているという意味で、
疑似で編集と言えますし、再度読み込めば元に戻ります。
しろう さんが書きました:
・Stylusだけでデベロッパーツールを疑似で変更できますか
「デベロッパーツール」ではなく任意のサイトの表示を変更するということでしたら、Stylus は後からCSSを上書き設定して表示を変えるものです。
つまり、HTML の変更はできません。
また、Stylus はその設定を Firefox の再起動なしで切り替えられるようにしているだけで、ウェブページへの CSS の上書き設定自体は、拡張機能無しで userContent.css ファイルの設置により可能です。
インスペクターを使って読み込み済みの HTML や CSS をいじる方法も、Stylus や userContent.css でCSSだけ上書き変更する方法も、
当然 HTML や CSS や場合によっては JavaScript の知識が必要です。
そして、対象のウェブサイトによって必要な知識レベルは変わってきます。
HTML や CSS の基本を押さえるために Progate で学習するのは良いかもしれませんが、有料コースまでやる必要はありません。
といいますか、結局は対象のサイトにあわせてご自身で調べるしかありません。
基本を押さえておけば、何を調べたらいいかがわかってくると思います。
ログイン
ユーザー登録
FAQ
検索
