ネットで色々なサイトを見ていると、文字が小さかったり、文字色が薄かったり、読みづらいページに遭遇することがありませんか？
そんな時に重宝するのが、Stylusというブラウザ用の拡張機能です。
過去の記事でオマケ程度に紹介したこともありますが、今回はStylusメインで書こうと思います。
Stylusはこちら（chromeウェブストア）にアクセスし、右上の「Chromeに追加」をクリックすると使えるようになります。
スタイルシートを使う拡張機能なので、本来は自分でスタイルシートを書く必要があるのですが、今回は生成AIに書いてもらったもので設定する方法を紹介します。
スタイルシートって何？
スタイルシートがどういうものかわからないと、この先の説明がよくわからないと思うので、先に説明します。知っている場合は飛ばしてください。
デザインの指示書
ブラウザの画面に表示されるページや記事は、複数のファイルで成り立っていて、主に以下のファイルが使われています。
・見出しや文章等が書かれているファイル
・画像ファイル
・Javascriptファイル
・スタイルシートのファイル
分業制、というか違う分野の複数のファイルが協力して1つのページを表示している感じです。
すべてのサイトが同じ構成というわけではありませんが、どのサイトでも複数のファイルが使われています。
そして、今回の主役であるスタイルシートは、画面上の表示に関する指示書のようなもので、配置や装飾等を細かく指定することができます。
スタイルシートの書式
スタイルシートでは以下の書式を使うのですが、「セレクタ」は場所を意味するもので、「プロパティ」と「値」で表示方法を指定します。
プロパティ：値（もしくは値と単位）
}
冒頭に場所を書き、「{」と「}」の中に希望の表示方法を書くというシンプルな形です。
ブラウザ付属の開発者ツール
今回は生成AIにスタイルシートを書いてもらいますが、頼む時にセレクタと表示方法を伝えるので、カスタマイズする部分のセレクタを事前に調べておく必要があります。
ただ、ブラウザに付属する機能を使えば、セレクタを簡単に調べられます。
開発者ツールを起動
ブラウザには開発者ツール（デベロッパーツール）という機能があり、表示しているページの情報を調べることができます。
以下のいずれかの操作をすると、開発者ツールが起動します。（Windowsの場合）
・画面上の右クリックで出てくる「検証」をクリック
・右上の「三」、「その他のツール」、「デベロッパーツール」の順にクリック
・キーボードの「F12」を押す
・キーボードの「Ctrl」、「Shift」、「I」を同時に押す
以下の画像はこちらのページを表示した状態で開発者ツールを起動した時のもので、下にある黒っぽい画面が開発者ツールです。
起動した開発者ツールで「Elements」以外のタブを選択した状態になっている時は、「Elements」のタブをクリックすると切り替えられます。
スタイルシートを調べる
開発者ツールは開発者向けなので、小難しい情報が色々と出ますが、今回見るところは画面右の「Styles」です。
この Styles はスタイルシートが表示される部分で、表示しているページで使われているスタイルシートの中身を見ることができます。
また、一番左のアイコン（矢印つきの四角）をクリックすると、画面上で場所を選択できるようになり、クリックした場所のスタイルシートが Styles に表示されます。
以下は先ほどの画像の Styles に出ていたもので、画面上の文章（Stylusの設定を～）を選択した時のスタイルシートです。
.entry-content p {
font-size: 100%;
}これはセレクタ「.entry-content p」の文字サイズを100%にするという指示になります。
生成AIでスタイルシートを作成
ここでは生成AIにスタイルシートを書いてもらいますが、今回はChatGPTとCopilot（旧Bing Chat）を使って比較してみようと思います。
また、どちらのチャット欄にも以下を入力して送信してみます。
ちなみに、開発者ツールの画面ではセレクタだけをコピーすることもできるので、AIのチャット欄に入力する時はコピペすると楽です。
ChatGPTに書いてもらったスタイルシート
以下はChatGPT（GPT-3.5）に先ほどの内容で依頼した結果です。
ChatGPTでは画面の一番下にある「ChatGPT にメッセージを送信する」と表示されている部分に入力します。
以前のChatGPTはユーザー登録が必要だったのですが、現在は登録しなくても使えるようになっています。
アクセスした時にログイン画面が出た時は「ログアウトしたままにする」をクリックするとログインせずに使えます。
ただ、AIとのやりとりが履歴として残らないので、画面を閉じる前に書いてもらったスタイルシートをメモ帳やテキストエディタ等にコピペして保存しておくと良いです。
Copilotに書いてもらったスタイルシート
以下はMicrosoft Edgeに付属するCopilot（旧Bing Chat）に同じ内容で依頼した結果です。
単位を指定せずに依頼したので、ChatGPTの返答とは違う単位になっていますが、今回の場合は同じ表示になるので問題ありません。
複数の指示をまとめて依頼
スタイルシートでは複数の指示をまとめて書くことができるのですが、AIに頼む時も以下のように入力すると、まとめて書いてくれます。
以下はCopilotが書いてくれたもので、コメント（「/*」から「*/」まで）で内訳も書いてあります。
.entry-content p {
font-size: 1.5rem; /* 文字サイズ */
color: red; /* 文字色 */
font-weight: bold; /* 文字の太さ */
}Stylusの設定にはMicrosoft Edgeが便利
Chromeを使う場合は、生成AIのページを別のタブで開いて切り替えながら使うことになりますが、Edgeの場合は開発者ツールとCopilotを1つの画面で表示できます。
ごちゃごちゃとした画面にも見えますが、スタイルシートを作成する作業が同じ画面でできるので、今回紹介した作業をする上では重宝すると思います。
Stylusに貼り付けて設定
ここではAIに書いてもらったスタイルシートを使ってStylusの設定をしてみます。
設定するページは先ほどのテスト用のページで、ChatGPTに書いてもらったスタイルシートを使います。
まず、テスト用のページを表示した状態でStylusのアイコンをクリックし、表示されるドメインのところをクリックします。
別のタブでStylusの設定画面が開きます。
画面の右側に先ほどAIに書いてもらったスタイルシートを入力しますが、AI画面からのコピペが楽だと思います。
保存ボタンを押して設定を保存し、通常画面のタブに切り替えて表示が変化していたら設定完了です。
尚、サイト全体ではなく、特定のページだけの設定にしたい時は、「ドメイン上の URL」を「次で始まる URL」に切り替えて、右側にページのURLを入れて保存します。
さいごに
文字サイズや行間等の簡単なカスタマイズであれば、スタイルシートの知識がなくても今回紹介した設定方法で解決できると思います。
ただ、使えるプロパティと値を知っているとカスタマイズできる部分も増えるので、これを機に覚えると良いかもしれません。
とはいえ、全部まとめて覚えようとすると途中でイヤになると思うので、カスタマイズする時に必要なものを調べて覚えると良いです。
スタイルシートに関する情報は、ネットで検索したら山ほど出てくるので、理解しやすいサイトをブックマークしておくと、困った時に助かると思います。
今回はChatGPTとCopilotを使いましたが、Googleのアカウントにログインすることが多い場合は、Geminiに書いてもらう手もあります。
