[Chrome拡張機能] カスタムCSSテスター (ツイキャス版/YouTube版/Twitch版): カスタムCSSのエラーを確認。

ツイキャス、YouTubeとTwitchのライブ配信のコメント欄は、オーバーレイとしてOBSなどの配信ツール上で表示できるほか、専用のカスタムCSSを使ってコメント欄のデザインをカスタマイズする事もできます。

検索で見つけたサイトからコピーしたカスタムCSSや、自分で編集したカスタムCSSを試したい場合、実際にOBSのブラウザソースにオーバーレイとCSSを読み込ませて表示するのが普通かもしれませんが、カスタムCSSの設定をブラウザソース上で更新するのが少し面倒なのと、CSSにエラーがあってもOBSのプラウザソースでそのエラーを確認するには少し面倒な設定が必要になります。

なので、各サイトのコメント欄オーバーレイ用のカスタムCSSを、一般的なブラウザ上で表示できるカスタムCSSテスターを拡張機能として作ってみました。

現在、Chromeウェブストアでツイキャス、YouTubeとTwitch用の三種のカスタムCSSテスターを拡張機能として公開しています:

	キャスコメカスタムCSSテスター 👉サポートページ
	チューブコメカスタムCSSテスター 👉サポートページ
	TwitchコメカスタムCSSテスター 👉サポートページ

これらのカスタムCSSテスターを使うと、手持ちのカスタムCSSを実際のコメント欄のオーバーレイのURLと一緒に読み込んで、どの様に表示されるかをブラウザで確認出来るほか、ブラウザの開発者ツールを使ってCSSのエラーを確認する事も出来ます。

このメモでは、各カスタムCSSテスターの使い方よりも、オーバーレイをブラウザで読み込んだ際にカスタムCSSのエラーをブラウザの開発者ツールでどのように確認出来るかを説明しているので、上記のカスタムCSSテスターの使い方については各拡張機能のサポートページを参照して下さい。

[目次]

CSS: カスケーディング・スタイリング・シート

カスケーディング・スタイリング・シート (CSS: Cascading Styling Sheet) は、HTMLページの書式を設定して、ページの見た目を良くしてくれます。

各CSSセレクターごとに、CSSプロパティとその値からなる「宣言ブロック」を指定しますが、CSSは書式が決まっている為、慣れていない人が既存のCSSを編集したり、新しいCSSを付け加えた場合、スペル間違いや無効な文字などがあると、CSSの一部が読み込まれず、思い通りのデザインが反映されない時があります。

CSSのコードをさっと見て修正箇所を見つけられると良いのですが、時にはコードを何度見返しても見つけられなかったり、どのCSSのどこを確認すべきか見当も付かない場合もあるかもしれません。

また、CSSには設定を反映させる優先順位があるのと、一般的なウェブページやOBS用のオーバーレイなどのHTMLページでは、複数のCSSが読み込まれるのが一般的で、これらのCSS内の一番高い優先順位のCSS設定が採用されます。なので、この優先順位が原因で、新たに加えたCSSが反映されない場合もあります。

この場合、パソコン版ブラウザの『開発者ツール』を使うと、表示されたページの「こうなると思っていた」のとは違う部分で、どのCSS設定が有効/無効になっているのかを把握する事が出来ます

開発者ツールはほとんどの一般的なパソコン版のブラウザでサポートされていて、「Chrome」をはじめとする「Edge」や「Opera」、「Brave」といったchromium系ブラウザ、Firefox、Safariといったブラウザで標準装備されています。

各ブラウザで表示や操作性が微妙に違いますが、ブラウザで表示されているページのCSSを確認したい部分を右クリックして開くメニューにある:

「検証」 Chrome
「開発者ツールで調査する」 Edge
「調査」 Firefox
「要素の詳細を表示」 Safari

を選択する^※と拡張ツールが開いてクリックした部分のCSS情報が表示されます。

※: ブラウザのバージョンによって表示が違う場合もあると思うので理解をお願いします。

次はパソコン版のChromeで右クリックの後に『検証』を選択して開発者ツールを表示させた場合のスクショになります。

例: Chrome 開発者ツール

この例では、左右に三つの列が並んでいて、左から、「元のページ」「ページのDOMエレメント (Element)」「スタイルインスペクター (Styles)」が表示されています。

又、中央のDOMエレメントで水色で選択されたエレメントのスタイルが左のスタイルインスペクタに表示されています。

次はパソコン版のSafariで右クリックの後に『要素の詳細を表示』を選択して開発者ツールを表示させた場合のスクショになります。

例: Safari 開発者ツール

この例では、上下2段で、上の段に「元のページ」、下の段には左右に三つの列が並んでいて、左から、「ページのDOMエレメント」「スタイルインスペクター (スタイル属性)」「計算済みのスタイル」が表示されています。

開発者ツールを使ってみる (スタイルインスペクター)

説明だけを読んでも理解しにくと思うので、実際にブラウザの開発者ツールを使って確認出来るCSS情報の例を次にいくつか挙げていきたいと思います。

inline-CSSコード

今表示されている、このページにはHTMLコード内の<style>タグによって、次の様なCSSがinlineで組み込まれています。

  .test {
    border: 2px solid #eee;
    padding: 5px 10px;
    margin: 15px 0;
    width: 80%;
  }

「.test」がクラスセレクタで、その次に続く弧かっこ{}内の部分が宣言ブロックになります。

この宣言は、「test」クラスのタグに灰色(#eee)の囲み線を表示させて、周りの空白部の大きさを指定するほか、タグ幅を親の90%の幅に設定します。

以降に<DIV>タグの属性にtestクラスを設定した例と、testクラスと他にstyleを加えたいくつかの例を挙げます。

例１: testクラス

この<DIV>タグにはtestクラスの属性だけが指定されていて、他のstyle属性は追加されていません。

↑パソコンのブラウザで表示している場合は、灰色の枠の部分を右クリックして開くメニューから開発者ツールを表示する事が出来ます。

上のタグのHTMLソースは

<div class="test"> ... </div>

となっていて、「class="test"」とあるので、上記のinline-CSS内で指定されている「.test」セレクタ用のCSS設定がタグに適用されます。

なので、このページのデフォルトのCSS設定の上に上記のinline-CSSコードが反映されて、結果、灰色の角のある囲み枠付きで表示されています。

例１の灰色の囲み線を右クリックして開発者ツールを開いた場合。(Chromeブラウザ)

開発者ツールのスタイルインスペクターには選択したタグに読み込まれているCSSがリストされますが、優先順位が高い順に表示されます。

例のスクショでは、上から２つ目で.test {...}が読み込まれているのを確認する事が出来ます。

例２: testクラス + 青の丸角の囲み線

要素のスタイル設定で線の色と角の丸みがinlineで追加指定されている場合

上のタグはの例１のCSS設定に加えて、

<div class="test" style="border-color: blue; border-radius: 8px;"> ... </div>

となっていて、「style="border-color: blue; border-radius: 8px;"」がinlineで追加されているので、囲み線が青色、角が丸い角で表示されます。

例２の青色の囲み線を右クリックして開発者ツールを開いた場合。(Chromeブラウザ)

開発者ツールのスタイルインスペクターの上から１番目には「element.style{...}」とあり、タグにinlineで指定されているスタイルが表示されいます。

２番目には例１と同様に.testのスタイルが表示されています。

例３: testクラス + 青の丸角の囲み線 + スペル間違い

要素のスタイル設定で線の色の値のスペルが間違っている場合

このタグは例２とほぼ同じCSS設定ですが、HTMLコードは

<div class="test" style="border-color: blu; border-radius: 8px;"> ... </div>

と、「blue」がスペル間違いで「blu」になっています。なのでブラウザ上ではCSSのエラー扱いになり、囲み線は青色にならず、丸い角の設定のみ反映されています。

例３の灰色の囲み線を右クリックして開発者ツールを開いた場合。(Safariブラウザ)

開発者ツールのスタイルインスペクターで確認すると、一番上のスタイル属性で、「border-color: ~~blu~~;」と、スペル間違いの部分に取り消し線が引かれています。

日頃からCSSをいじっている人であれば直観的にスペル間違いに気が付く事が出来ると思います。

例４: testクラス + 青の丸角の囲み線 + 無効な文字

要素のスタイル設定で線の色の設定に全角スペースが紛れ込んでいる場合

上のタグも例２と同じ様なCSS設定ですが、

<div class="test" style="border-color:　blue; border-radius: 8px;"> ... </div>

囲み線の色を設定する「border-color:」と「blue」の間スペースが半角ではなく、全角のスペースになっています。なのでブラウザ上ではCSSのエラー扱いになり、囲み線は青色にならず、丸い角の設定のみ反映されています。

例４の灰色の囲み線を右クリックして開発者ツールを開いた場合。(Edgeブラウザ)

開発者ツールのスタイルインスペクターで確認すると、一番目のelement.styleで「border-color: ~~blue~~;」と値が取り消されています。

取り消し線で消されているだけなので、「全角のスペースがまぎれ込んでいる」というのは直観的には思いつかないかもしれませんが、元のHTMLコードを詳しく見る事で全角スペースの存在に気がつけるかもしれません。

以上、PCブラウザの開発者ツールを使ってCSSのバグを確認する方法の例をメモしてみましたが、上記のカスタムCSSテスターを使うとコメント欄をブウザーに表示する事ができるので、ブラウザの開発者ツールを使ってコメント欄用のカスタムCSSのエラーを同様の方法で確認できます。

このブログを検索

メモ帳