@nishinagahori888

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Stylusについて

Q&A

Closed

標記のアプリを使おうかなと思っています。

識者の方からの回答をお待ちしています。

1.アプリはFirefoxやChromeのアドオンですが、操作面で両者の違いはないですか
2.操作をするのにHtmlやCssの知識はどれぐらいあればいいですか
3.コミュニティやサポートはどういうものがありますか
4.PrintEditWeというHPの不必要な箇所を削除できるアプリですが、
Stylusとどういう違いがありますか
Firefoxアドオン】Print Edit WEで思い通りにWebページを編集して印刷
https://pc-pier.com/blog/2017/10/23/firefox-print-edit/

4に関しては実際に経験ある方からのアドバイスをお願いします

0 likes

6Answer

普段ChromeでStylusを利用しているので、わかる範囲で回答させていただきます。

1.アプリはFirefoxやChromeのアドオンですが、操作面で両者の違いはないですか

FirefoxのStylusを利用したことがないですが、Firefox版のアドオンの説明を見る限り特に違いはないように思います。

2.操作をするのにHtmlやCssの知識はどれぐらいあればいいですか

最低限の知識があれば活用できると思います。過去にCSSを書いた経験があればスムーズに導入できます。
ディベロッパーツールを使って変えたい要素のスタイルをちょこちょこいじるくらいのことができれば、Stylusを利用して好きに見た目を変えるくらいはお手の物だと思います。

3.コミュニティやサポートはどういうものがありますか

GithubのHelpにあるとおり、公式ページに議論できるところがあったりDiscordでやり取りできるようです。
image.png

4.PrintEditWeというHPの不必要な箇所を削除できるアプリですが、
Stylusとどういう違いがありますか

PrintEditWeを利用したいことないので、記載の使用方法を説明しているサイトをみて感じた内容です。

まずは、そもそも使用目的が少し異なるのかなと思います。
Stylusは普段閲覧するサイトの見た目を変えるためのものであるのに対し、PrintEditWeは印刷する際に見た目を変更するためのもののようです。
印刷するタイミングだけ見た目を変更して印刷したいのであればPrintEditWeでいいと思いますが、普段閲覧するサイトの広告を消して見やすくしたり自分好みに見た目をカスタマイズしたりしたいのであればStylusが必要になってくると思います。

機能面としては、PrintEditWeは選択領域をボタンひとつで削除したりできるようですが、Stylusではそういった機能はないです。
Stylusではディベロッパーツールなんかで変えたい要素のidなどを特定して、CSSをひとつひとつ記述していかないといけません。
(※私が使ったことないだけでStylusにもそういった便利機能があったらすみません。)

また、Stylusは自分で書いたCSSを共有する機能があります。
有名サイトであればいろんな人のCSSが共有されているので、自分好みのスタイルをインポートして、修正したい箇所があればそこから自分好みにカスタマイズするというような使い方もできます。

0Like

Comments

  1. @YottyPG

    回答ありがとうございます。

    1.ブログの1つに下記のようなものがありました。
    https://gyazo.com/8e323dec6ba6485033d79cfaebefa339
    この方はFirefoxを使っていますが、指摘した所をChromeに置き換えたらいいだけですか。ちなみにChromeではどうなっていますか

    2.殆どCssが関連してくるのですか

    3.Discordの箇所をクリックしたらメンバーのリストだけが出てきました。
    HtmlやCssに関するサーバーの物はありませんか

    4.PrintEditWeでも広告は削除できますよ。ただ、アプリを使っていらない部分
    を削除するので、ページの代わり目などや無駄な空白、蜜になって見にくい箇所が散見されます。Stylusの場合は手作りなので綺麗にページが仕上がるかなと思います。それと結構時間がかかるのではないでしょうか。Stylusも疑似で編集するから、PDFでの印刷や編集済のURLを保管しなければならないですね。

    使ったことがある方からの印象はすごくいいですね。私はPrintEditWeを使っていますが、便利がいい割には知れ渡っていない感じです。

1.ブログの1つに下記のようなものがありました。

Mozilla形式インポート機能についてよくわかっていないですが、Firefoxなどでは独自の「Mozilla拡張」と呼ばれるCSSの書き方があるようでそれに関連する機能のようですね。
ただ、「Mozilla拡張」のなかには標準化されているプロパティも多くあるようです。
よほど特殊なスタイルを適用しようとしない限り、FireFoxとChromeで異なるCSSを書く必要はないと思います。

参考:

2.殆どCssが関連してくるのですか

ほとんどというか、StylusはCSSそのものみたいなものです。
Stylusはいろんなサイトに対して、自分で記述したCSSを適用するためのツールです。

3.Discordの箇所をクリックしたらメンバーのリストだけが出てきました。

Discordに自身のアカウントでログインするとチャットできるようにならないでしょうか?

HtmlやCssに関するサーバーの物はありませんか

こちらはどういった意味合いでしょうか?
HtmlやCssについて聞きたい・知りたいということであれば、Stylusに問合せするのは適切ではありません。
上記で述べた通り、StylusはCSSを適用するための「ツール」というだけです。
HtmlやCss自体について聞きたいのであれば、Qiitaをはじめとした技術系の質問ができる場を借りて質問したほうが適切かと思います。

4.PrintEditWeでも広告は削除できますよ。

PrintEditWeはPrintEditWe自体を起動しないとスタイルが適用されないと思っていたのですが、ページを開いたときに適用されるものなのでしょうか?

私の利用例ではありますが、Stylusでは事前にCSSを記述しておくことで、「Qiitaの記事を開いた際に自動で右上の広告領域をごっそり消したうえで、目次も見やすくする」みたいなことができます。
image.png

PrintEditWeでも、ページを開いた際に自動でスタイルが適用されるのであれば、たしかにPrintEditWeでもよさそうですね:qiitan:

0Like

Comments

  1. @YottyPG

    回答ありがとうございます。


    >FireFoxとChromeで異なるCSSを書く必要はないと思います。
    操作手順は同じだと判断しました。

    >StylusはCSSそのものみたいなものです。
    了解しました。

    >>Discordの箇所をクリックしたらメンバーのリストだけが出てきました。
    この箇所は無視してください。

    >HtmlやCss自体について聞きたいのであれば、Qiitaをはじめとした技術系の質問ができる場を借りて質問したほうが適切
    了解しました

    >>PrintEditWeとStylus
    HPを自分の好きなように編集するのは同じです。ただ、Print~の場合はラフ。Stylusの場合はCSSをいじるので、Print~に比べると仕上がりが繊細にできる。ただ、Stylusの方が時間がかかりそうな感じがします。
  2. >PrintEditWeとStylus
    一番の違いはページ表示時に自動的にスタイルが反映されるかだと思っていたのですが、PrintEditWeでもそのような機能があるのでしょうか?
    一度入れてみたのですが、そのような使い方がわかりませんでした...。

動画までいただいてありがとうございます。ワンクリックで要素を消したりできるのは便利ですね。

ただ、やはりページ表示時に自動的にスタイルを反映させるのはPrintEditWeとできないということですかね?

0Like

@YottyPG

時間がないときにこのアプリを使うと便利です。なにせ、このアプリに精通している人は皆無です。
私も見落としているところが大分あるので、詳しい人がどんどん現れて欲しいものです。

>ページ表示時に自動的にスタイルを反映させるのはPrintEditWeとできない
これは具体的にどういうことでしょうか?

0Like

>ページ表示時に自動的にスタイルを反映させるのはPrintEditWeとできない
これは具体的にどういうことでしょうか?

StylusですといちどCSSを記述してしまえばサイトのHTMLの構造が変わらない限り、そのスタイルがずっと反映され続けます。
またドメイン単位でCSSを反映できるので、例えばQiitaのトレンド1位の記事を開いても2位の記事を開いても広告は表示されません。
PrintEditWeだと、トレンド1位の記事を開いて広告削除などしても、2位の記事を開いた際にはまた広告が表示されるようになっているのではないかなーと思っていました。
そうでなかったら申し訳ありません。

0Like

Comments

  1. >PrintEditWe また広告が表示されるようになっているのではないかな
    その通りです。利用者がいらない箇所を削除して印字したり、PDFで保存します。その場限りという感じです。利点は早いことですね。

    >Stylus
    これに関して疑似編集と解釈しました。HPそのものはサーバーの権利がない限り不可能
    ですよね。疑似編集したものを保存して再編集することはできるのですか。できるので
    あれば、どのような手順ですればいいのでしょうか。大枠でいいから知りたいです。
  2. >その通りです。

    やっぱりそうなのですね。
    一番最初私がお伝えした「そもそも使用目的が少し異なる」というのは、そういったことをお伝えしたかったです。

    >疑似編集したものを保存して再編集することはできるのですか。できるので
    あれば、どのような手順ですればいいのでしょうか。

    StylusはCSSを保存していつでも再編集できます。
    使い方は簡単です。サイトのURLやドメインを指定して、そのサイトの要素を変更するようなCSSを記述して保存するだけです。

    >大枠でいいから知りたいです。

    おっしゃる通りStylusもPrintEditWeと同様な「疑似編集」を行うツールです。
    そもそもHTMLとCSSはページ表示後、開発者ツールなどを使えばだれでも容易に変更することが可能です。
    ただページを再読みすればHTMLとCSSを再取得することになるので元の表示に戻ってしまいます。

    Stylusはサイトにアクセス時、事前に記述しておいたCSSを自動で適用した状態でページを表示してくれるようなツールです。
    ですので、一度広告領域を消すようなCSSを記述しておけば、あるページを表示した際にあたかも元々広告なんてなかったように表示されるということになります。
  3. Stylusに関しての大枠は把握できました。とりあえず、アドオンをインストールして、ブログなどから知識を深めていきたいと思います。
    Stylusに関して質問しますので、その節はアドバイスをお願いします。詳しい回答どうもありがとうございました。

Your answer might help someone💌