ユーザースタイルシートとは

Web ブラウザーでユーザースタイルシートを使用する必要がある理由は次のとおりです。

過去のインターネットは、ウェブデザインの悪さ、読みにくいフォント、衝突する色、画面サイズに適合するものは何もありませんでした。当時、Web ブラウザーでは、ユーザーが CSS スタイルシートを作成することができました。これは、ページデザイナーが行ったスタイルの選択をブラウザーがオーバーライドするために使用されていました。このユーザースタイルシートは、フォントを一貫したサイズに設定し、指定された色の背景を表示するようにページを設定します。一貫性と使いやすさがすべてでした。

ユーザースタイルシートの人気が急落

しかし現在、ユーザースタイルシートは一般的ではありません。 Google Chrome では許可されておらず、Firefox では段階的に廃止されています。 Chrome の場合、ユーザースタイルシートを作成するための拡張機能が必要です。 Firefox では、開発者ページからオプションを有効にする必要があります。 Web デザインが良くなったので、ユーザースタイルシートはなくなりました。

それでもユーザースタイルシートを試してみたい場合は可能ですが、お勧めしません。アクセスしたページを壊したり、見苦しくしたりする可能性が高くなります。

Firefox でユーザースタイルシートを有効にする

Firefox でユーザースタイルシートを使い始めるには、それらを有効にします。数秒しかかかりませんが、オプションは Firefox の設定ページに埋もれています。

Firefox を開き、次のように入力します。 概要:設定 アドレスバーに。
Firefox は、さらに先に進むとブラウザを台無しにする可能性があることを警告するページに移動します。プレス リスクを受け入れて続行 続けること。
次に表示されるページは単なる検索バーです。タイプ toolkit.legacyUserProfileCustomizations.stylesheets 検索に。
結果は 1 つだけである必要があります。ダブルクリックして値を設定します真実 .
Firefox を閉じます。

Firefox ユーザースタイルシートを作成する

Firefox がスタイルシートを受け入れるようになったので、スタイルシートを作成できます。このファイルは、他の CSS と何ら変わりはありません。これは、ブラウザーのユーザープロファイルディレクトリ内のフォルダーにあります。

Firefox ユーザープロファイルディレクトリを見つけます。 Windows では、次の場所にあります。 C:Usersユーザー名AppDataRoamingMozillaFirefoxProfiles .

Mac では、次の場所にあります。 ライブラリ/アプリケーションサポート/Firefox/プロファイル .

Linux では、 /home/ユーザー名/.mozilla/firefox .
そのフォルダー内には、ランダムな文字列の後に .default または .default-release 拡張子が続く名前のフォルダーが少なくとも 1 つあります。別のものを作成しない限り、それが必要なプロファイルフォルダーです。
プロファイル one 内に新しいフォルダーを作成し、名前を付けます。 クロム .
の中に クロム ディレクトリ、というファイルを作成します userContent.css をクリックし、選択したテキストエディターで開きます。
有効な CSS である限り、このファイルには何でも入れることができます。要点を説明するために、すべての Web サイトをばかげているように見せます。背景色を明るいピンクに設定します。

本体、メイン {
背景色: #FF00FF !重要;
}

の ！重要 最後に重要です。通常、CSS で !important を使用することはお勧めできません。スタイルシートの自然な流れを壊し、デバッグを悪夢にする可能性があります。ただし、この場合、サイトの既存の CSS をオーバーライドする必要があります。作成するすべてのルールで必要になります。
フォントサイズを変更します。

p {
font-size: 1.25rem !重要;
}
h1 {
font-size: 1rem !重要;
}
h2 {
font-size: 1.75rem !重要;
}
h3 {
font-size: 1.5rem !重要;
}
p、a、h1、h2、h3、h4 {
font-family: 'Comic Sans MS', sans-serif !important;
}
ファイルを保存して終了します。
Firefox を開き、ページに移動して試してみてください。この例で使用されているルールを設定すると、サイトは見栄えが悪くなります。

Google Chrome で Chrome 拡張機能を使用する

Google Chrome はユーザースタイルシートをサポートしていません。 Chrome はそのために構築されていません。その多くは、より現代的な起源を持つ Chrome に帰着します。もう1つは哲学の違いです。 Firefox は常にユーザーコントロールを念頭に置いて構築されてきましたが、Chrome は Google が所有および管理する商用製品に近いものでした。彼らは、あなたがブラウザをどれだけ制御できるかを気にしません。

ただし、ユーザースタイルシートを実装してブラウジングエクスペリエンスをカスタマイズできる Chrome 拡張機能があります。このガイドでは、拡張機能を使用していますスタイリッシュ Chrome でユーザースタイルシートを有効にします。

クロムを開きます。
を選択 三重点 画面の左上隅にあるメニューアイコン。案内する その他のツール > 拡張機能 .
[Chrome 拡張機能] タブで、 三重線 画面の左上隅にあるメニューアイコン。新しいメニューがスライドアウトします。選ぶ Chrome ウェブストアを開く 底部に。
Chrome ウェブストアで、検索を使用して探します スタイリッシュ .
スタイリッシュは、結果の最初の拡張機能である必要があります。それを選択します。
スタイリッシュのページで、 Chrome に追加 .
スタイリッシュの追加を確認するポップアップが表示されます。選択する 拡張子を追加 .
Chrome に、Stylish がインストールされていることを知らせるページが表示されます。そこから、任意のページに移動したり、タブを閉じたりできます。
を選択 パズルピース Chrome ウィンドウの右上隅にある拡張機能アイコン。選ぶ スタイリッシュ メニューから。
新しいスタイリッシュなメニューが開きます。を選択 三重点 右上隅のメニューアイコン。
表示されたメニューから、 新しいスタイルを作成 .
Chrome でスタイルの新しいタブが開きます。左上隅のフィールドを使用して名前を付けます。
CSS を使用して、タブの本体にスタイルの新しいルールを作成します。必ずご利用ください ！重要 各ルールの後、ルールがサイトの既存のスタイルを上書きすることを確認します。

本体、メイン {
背景色: #FF00FF !重要;
}
選択する保存をクリックして新しいスタイルを保存します。すぐに適用されるはずです。
サイトを参照して、新しいスタイルシートをテストします。スタイリッシュでは、スタイルシートを制御し、選択したサイトに選択的に適用できます。拡張機能のコントロールを調べて、ユーザースタイルシートに対して微調整されたアプローチをどのように取ることができるかを感じてください。