デベロッパーツールを疑似で変更したい

[しろう]

標記に関して当方のCSSとHTMLの知識は過去にかじった程度です。

お好みのホームページを疑似で編集し、完成はPDFで保存します。

デベロッパーツールの中身に精通していれば、CSSとHTMLを好きなように
編集すればいいのですが、そうはいきません。標記に役立つような拡張機能を探していた
ところ、Stylusのことを知りました。

・Stylusだけでデベロッパーツールを疑似で変更できますか
・CSSとHTMLのある程度が必要。そのためにはブラッシュアップ
が必要ですか、手段としてはProgateを使うことも考えています。

ある程度できるようになれば操作手順をテンプレートとしておきたいのです。

識者の方からのアドバイスをお願いします。

[aides]

CSSと大半のHTMLだけだったらアドオンではStylusが一番確実でしょう。
然し一部のHTMLの場合javascriptで表示させてる場合も在るので、一概には此れは云えません。
此の場合はユーザースクリプトを用いなければ為らず、Stylusでは対応出来ません。
詳しくは「Firefox ユーザースタイルシート」乃至「Firefox ユーザースクリプト」で検索するのが最善かと思います。

[EarlgreyTea]

しろう さん、EarlgreyTea と申します。

拡張機能の Stylus を使うことが念頭にあったため、拡張機能の板にトピック投稿されたのだと思いますが、いったん拡張機能からは離れましょう。
たぶん、話の方向が決まったら、モデレーター権限を持つ方がトピックを適切な板に移動してくれると思います。


では本題に入ります。
まず しろう さんが本当にやりたいと思っていることは何かをはっきりさせる必要があると思います。

件名の「デベロッパーツールを疑似で変更したい」ですと、変更したい対象はデベロッパーツール（ウェブ開発ツールでしょうか）ということになります。
たぶん、そうじゃないですよね。

お好みのホームページを疑似で編集し、完成はPDFで保存します。

デベロッパーツールの中身に精通していれば、CSSとHTMLを好きなように
編集すればいいのですが

大枠は、「任意のウェブサイトの表示を変更し、その画面のスクリーンショットをPDFで保存したい」ということでよろしいでしょうか。
「疑似で編集」「デベロッパーツールの中身に精通していれば、CSSとHTMLを好きなように編集」ということは、
読み込んだウェブページに対して、ウェブ開発ツールのインスペクターの

• HTML ペインで HTML の調査や編集を行ったり
• CSS ペインで CSS の調査や編集を行ったり

ということをお考えになっているということでしょうか。

これらは、直接ウェブサイトを編集するわけではなく、読み込み済みの HTML と CSS をオンメモリで編集して表示に反映させているという意味で、
疑似で編集と言えますし、再度読み込めば元に戻ります。

・Stylusだけでデベロッパーツールを疑似で変更できますか

「デベロッパーツール」ではなく任意のサイトの表示を変更するということでしたら、Stylus は後からCSSを上書き設定して表示を変えるものです。
つまり、HTML の変更はできません。
また、Stylus はその設定を Firefox の再起動なしで切り替えられるようにしているだけで、ウェブページへの CSS の上書き設定自体は、拡張機能無しで userContent.css ファイルの設置により可能です。

インスペクターを使って読み込み済みの HTML や CSS をいじる方法も、Stylus や userContent.css でCSSだけ上書き変更する方法も、
当然 HTML や CSS や場合によっては JavaScript の知識が必要です。
そして、対象のウェブサイトによって必要な知識レベルは変わってきます。

HTML や CSS の基本を押さえるために Progate で学習するのは良いかもしれませんが、有料コースまでやる必要はありません。
といいますか、結局は対象のサイトにあわせてご自身で調べるしかありません。
基本を押さえておけば、何を調べたらいいかがわかってくると思います。

[しろう]

aidesさん & EarlgreyTeaさん

回答ありがとうございます。aidesさんの回答を元に再質問しました。

やりたい事
下記の動画URLを参照してください
https://streamable.com/yzq7r3

Chromeでデフォルトは１００％で１３枚あります。
デフォルトのままでは煩雑なので、もうちょっと調整したいのです。この動画からだと
・大きな画像を調整する
・不必要な箇所を削除
・ページの終わりの調整

下記のように調整できればいいと思っています。ただし、ホームページの１部だけの表示
https://gyazo.com/270a018deed228770c2e2070e206b956

そのためには
・Stylusだけでできる
・ユーザースクリプトを調整する。この場合、Stylusは不要

上記の判断はユーザースクリプトにjavascriptが表示されているかどうかですか

＞「Firefox ユーザースタイルシート」乃至「Firefox ユーザースクリプト」で検索する

この場合、どういうことを検索するのですか

[aides]

動画を拝見した上で、調整したいと云う画像を確認しました。
然し、具体的にどう調整するのかは自分自身にしか解りません。

動画からのしたい事として、
「画像の大きさを調整する」の場合は該当するイメージ（img）に対して縦横の大きさをCSSで指定。
（元の大きさを100%と基準させて、%で大小させるか、ピクセル単位で大小させるか等）
「不必要な箇所を削除」では、該当する要素（div等）若しくはID（#**）やclass（.**）を指定して「display:none !important;」で「非表示」にする。
「ページの終わりの調整」に関しては意図する意味が不明なので回答困難です。

基本的にサイトの作りでjavascriptが「表示上」使われて無ければ、ユーザースクリプトは意識する必要は有りません。

現状ではStylusのみで対応可能と思われます。

検索の事案ですが、ブラウザに拠って記述内容が異為るので、検索しての記述方法を知る事が最善で在ると判断しました。

[EarlgreyTea]

しろう さん

トピック件名の「デベロッパーツールを疑似で変更したい」とは何だったのか謎ですが、
結局、Firefox でウェブページをPDFへ印刷する際に、希望のページ数に収まるように調整したい
ということですよね。

対象のウェブページをしろうさんがインスペクターで調べ、どうしたいかを勘案してCSSを書く必要があります。

もう一度書いておきます。

インスペクターを使って読み込み済みの HTML や CSS をいじる方法も、Stylus や userContent.css でCSSだけ上書き変更する方法も、
当然 HTML や CSS や場合によっては JavaScript の知識が必要です。
そして、対象のウェブサイトによって必要な知識レベルは変わってきます。

HTML や CSS の基本を押さえるために Progate で学習するのは良いかもしれませんが、有料コースまでやる必要はありません。
といいますか、結局は対象のサイトにあわせてご自身で調べるしかありません。
基本を押さえておけば、何を調べたらいいかがわかってくると思います。

逆にいうと、基本がわかっていないと、どうしたらよいか、何を調べたらよいかの見当もつかないかもしれません。

[しろう]

aidesさん

＞「ページの終わりの調整」
下記を参照してください。
https://gyazo.com/befc3687600f6101c21a37b3b839ec26
デフォルトだと、変なところで終わっているので調整をしたいのです。

＞サイトの作りでjavascriptが「表示上」使われて無ければ、ユーザースクリプトは意識する必要は有りません、
これはそのHPが動画が含まれていなければということですね。もし、含まれていれば、その箇所を省いてやればいいと思うのですが、いかがでしょうか

EarlgreyTeaさん

＞Firefox でウェブページをPDFへ印刷する際に、希望のページ数に収まるように調整したいということですよね。
はい　その通りです

＞インスペクターを使って読み込み済みの HTML や CSS をいじる方法も、Stylus や userContent.css でCSSだけ上書き変更する方法も、
当然 HTML や CSS や場合によっては JavaScript の知識が必要です。
この箇所は現在の私の知識では理解できないので、自分で調べます。
・インスペクター
・userContent.css

[EarlgreyTea]

しろう さん

Stylus 使うにせよ、useContent.css 使うのと同様にCSSを書かないといけないということです。

インスペクターはすでにリンク貼ってますので、そちらを見てください。
件名に「デベロッパーツールを」とありましたので、普通に使っているものと思っていました。

[aides]

画像を確認しましたが、此の場合は該当する箇所を「display:none !important;」で一端非表示にする。
表示上移動させたい箇所の要素の前に「要素名等::before { content:文字列等 !important; }」で挿入すると云う形に為るかと。

ユーザースクリプトと動画の関係が不明ですが、単純に動画自体が埋め込まれてた場合はjavascriptは関係有りません。
但し動画が外部のサービスの場合、javascriptが有効化されて無ければ再生しない等の事案だったらユーザースクリプトは関係して来る場合も在ります。

何れにしてもユーザースタイルシートの場合はCSS、ユーザースクリプトの場合はjavascriptの知識が必要に為ります。

最初に提示した動画の件、Firefoxから印刷でPDFにしたい旨了解しました。

[EarlgreyTea]

結局のところ、ウェブページの印刷を調整するための CSS を書くためには対象のウェブページを調べる必要があり、
それには、ウェブ開発者ツールのインスペクターを用いることになります。
しかも、その CSS は印刷してしまえば取っておく必要ないと思いますので、Stylus を使わずにインスペクターでそのまま（一時的に）HTML や CSS を編集してしまえばいいように思います。
※ただし、自動でリロードが入ったり、スクリプトが動いてページが書き替わるようなウェブページだと編集結果が消えてしまいます。

動画や画像で しろう さんご提示のウェブページ

• https://pc-plaza.com/stylus-reference/

の該当箇所で、印刷時の改ページ位置の調整を試しにやってみたいと思います。

まず、インスペクターで「Stylus管理画面用コードの例～」の段落の要素を調べます。

上の画像の手順により、インスペクターの画面で<p>要素が選択されました。

改ページ位置を制御するには下記のCSSプロパティを用います。

• break-before
• break-inside
• break-after

ここでは、該当段落の直前で改ページしたいということなので、選択された <p> 要素に「break-before: page;」を指定してみます。

この状態で印刷プレビューを見てみますと改ページが反映されました。

[しろう]

aidesさん & EarlgreyTeaさん

本当にありがとうございます。このスレだけであればキリがないので後は自習させてください。
なんかいい材料があれば教えてください。恐縮です。

[EarlgreyTea]

しろう さん
それではCSSに関しての取っ掛かりとなるポイントを2つ。

まず、肝となるのはCSSを適用する対象の要素を指定する「CSS セレクター」ですね。

• CSS セレクター - CSS: カスケーディングスタイルシート | MDN
• CSSのセレクタとは？覚えておきたい25種類と書き方

対象の要素を指定する方法がわかったら、あとは自分のやりたいことを実現するためにはどういう設定をすればよいかですが・・・これはググればいいです。
自分のやりたいことを適切な検索語で検索するのです。
例えば改ページのことなら「CSS 印刷 改ページ」という具合です。

がんばってください。