AIプログラミング日記：CSS崩れの原因特定に取り組んだらブックマークレットができてしまった件
CSSがいつの間にか崩れてた
困ったことが起きました。
Webサイト内で、いつのまにか特定のページのレイアウトが崩れていました。自分がいじった記憶はありませんが、他のスタッフがやったという確証もありません。自力で解決することにしました。
レイアウト崩れの原因ですが、特定のCSSの設定値が変わっているのではなく、複数のCSSファイルの読み込みが抜けているところまでつきとめました。部分的なレイアウト崩れなら開発ツールで対応しますが、失われているCSSを特定するにはどうしたらいいか…。
ただ、今回救いだったことがあります。それは、ほぼ同じレイアウトの他のページが存在したことです。ということは、他ページのCSSを1つずつ外して、レイアウトが崩れたWebページと同じ表示になれば、特定できそうだと…。
ブックマークレットが提案される
そこで、AIに聞いてみることにしました。
👦Chromeの開発ツールで、表示中のWebサイトのCSSを1つずつ外してどのように表示されるか確認したいです。
方法1: スタイルの無効化
Chromeで対象のWebサイトを開く。
ページ上で右クリックして「検証」を選択するか、
キーボードショートカット（Windowsの場合はCtrl+Shift+I、
Macの場合はCmd+Option+I）を使用してDevToolsを開く。
「Elements」タブを選択する。
検証したい要素を選択する。要素をクリックすると、
その要素のスタイルが右側の「Styles」ペインに表示される。
各スタイルプロパティのチェックボックスをクリックして無効化する。
チェックボックスをオフにすると、そのスタイルが一時的に無効化され、
ページの表示がリアルタイムで更新される。
方法2: CSSファイル全体の無効化
「Sources」タブを選択する。
左側のファイルツリーからCSSファイルを見つけて選択する。
ファイルの内容を削除またはコメントアウトする。
コメントアウトするには、コード全体を選択してCtrl+/（Windowsの場合）
またはCmd+/（Macの場合）を押す。
変更を保存するためにCtrl+S（Windowsの場合）またはCmd+S（Macの場合）を押す。
方法3: ブックマークレットを使用する
以下のブックマークレットを使用して、ページ内のCSSを
1つずつ無効化するスクリプトを実行することもできます。
＜コード＞
このコードをコピーする。
Chromeのブックマークバーに新しいブックマークを追加し、
URLフィールドに上記のコードを貼り付ける。
任意のWebページを開いて新しいブックマークをクリックすると、
スタイルシートが1つずつ無効化され、その後再度有効化される。
これらの方法を試して、CSSを1つずつ無効化してページの表示が
どのように変わるか確認してください。3つの方法が提案されています。
「ん？」
これを見て「ブックマークレット」を使うという「方法3」が気になりました。ブックマークレットといえば、ブックマークの中にコードを入れて実行するアレ？
コードを実行してみると、開発ツールのコンソールに結果を出力するようになっていました。使いづらいなと思い、別ウィンドウを表示して、そこにCSS一覧を表示するようにアップデートしてみました。
CSSの無効化／有効化切り替えツール
こうして作ったのが、次に公開している「CSSの無効化／有効化切り替えツール」です。実行するとウィンドウが作られ、使用しているCSSの一覧が表示されます。
左のチェックボックスをオン／オフすると、CSSを無効化と有効化を個別に切り替えることができます。
ここまでできたらしめたもの。切り替える方法をいくつか用意したり、CSSのリストをクリップボードに保存したりといった機能を追加し、より使い勝手のいいPlus版にバージョンアップしました。
差分の追加をスピーディーに行う姉妹版
こうして、CSSの無効化／有効化を簡単に切り替えるツールができましたが、対象のWebページときたら、CSSを大量に使っているため、とてもちまちまやっていられません。
そこで、クリップボードに保存したCSSリストを、CSSが不足しているWebページに一時的に張り付けられる姉妹版を作ることにしました。
CSSが不足しているWebページに対して姉妹版を実行し、テキストボックスにCSSリストを張り付けます。すると、崩れていたレイアウトが元通りになりました。
それにしても、どうしてそんなことができるのか、作った私自身もわからなかったので、ソースを調べてみました。すると<HEAD>タグの最後にCSSの記述が追加されていました。こんなことしてくれてるなんてびっくりです。
そこで最後の機能として、対象となるWebページに存在するCSSと、張り付けたCSSを比較する[Compare]ボタンを追加しました。ボタンを押すと、どちらにも存在するCSSだけが選択されます。さらに[Reverse selection]ボタンを押すとチェックボックスが反転します。
問題が解決できました
こうして、不足しているCSSを特定することができました。もちろん、このCSSを追加すれば問題解決ではありますが、これだけまとめて失われているのには別の原因があるはずです。
調べてみたところ、ついに原因がわかりました。テンプレート内のヘッダー指定がすげかわっていたことを発見。正常に表示されているWebページと同じヘッダーにしてみたら、なんのことはない、すべてが正常に表示されました。
わかってみれば、本当に些細なアップデートミスだとは思いますし、経験のある人なら、パッと閃いて原因特定できそうな感じ。しかし、CSSをある程度自由に試すことができるツールはあってもいいんじゃないかと思いますし、AIでブックマークレットを作ったことはいい経験になりました。
今日もまた、ノーコーディングプログラミングでつまらぬコードを生成してしまった…
今日も助かった！ AIプログラミングありがとう！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？