先日作成しましたイベント管理アプリにおきましてモーダルを開いた時、ローカル環境では問題なく中央表示されていたモーダルが、ネットにアップロードした後はなぜか左寄りで表示されるようになりました。
モーダルの左寄り表示っていかにもなバグで見栄えも悪いですよね。ゆえにすぐ改善すべく時折AIに頼りつつデバッグ作業を開始しました。今回はその手順の記録になります。
【▼今回アップロードしたファイル・フォルダの種類】
・index.html
・style.css
・dataフォルダ＞画像ファイル(png)×8
・jsフォルダ＞calendar.js
まずは自分の書いたコードを怪しい順（js、html、css）に見ていきました。まず症状からして一番怪しかったのはjsファイルです。
なぜならモーダルのhtmlはコンポーネント化してjsファイルに書いていたからです。しかしながら、calendar.js内のモーダルコンポーネントその他の部分含め特に問題は見当たりませんでした。
次にhtmlとcssファイルも見てみましたが、やはりこの症状につながりうるような問題のあるコードは特に見当たりませんでした。
今回使用していたbootstrapやcssの影響をモーダルの親が受けていることで今回のような症状につながる可能性もあるとAIに言われましたが、その懸念もこの時点でなくなりました。
さて、こうなりますといよいよ問題の原因は私の書いたコード部分ではなかったということになります。一体何が原因なのか。
次の確認項目としましては、ブラウザに標準搭載されている検証ツール（デベロッパーツール）です。ブラウザページ内で右クリック＞検証を選択もしくはF12で開きます。
ただし、ここで注意すべき点が1つあります。問題はモーダルが開いた際の表示が左寄りになってしまうという症状ですので、今回の場合必ずモーダルを開いた状態で検証ツールを見てみるということです。
検証ツール内で確認すべき項目としましては、
「Elements」そして「Styles」「Computed」です。
まずElementsで（モーダル）dialogタグ部分の確認、そしてそのdialogを選択した状態で下部にある「Styles」「Computed」を確認します。
とうとう見つかりました。「Styles」メニュー内にありますdialog[open]セレクターの右端にありました表示「ress.min.css」。リセットCSSです。結論、これが犯人でした。
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
リセットCSSはブラウザごとの装飾を崩さない、見た目の違いをなくすためにあるものですが、どうやら時にこいつが今回のような「本来中央にくるべきモーダルがなぜか左寄せされてしまう」などの悪さをすることがあるようです。
このコードがあることで、モーダルが本来持っている標準機能「margin:auto」が上書きされてしまって効かなくなるということが今回の症状の原因でした。このリセットCSSを削除しましたところ、モーダルは問題なく中央表示されるようになりました。
それでは今回はこの辺で。
ご覧いただきありがとうございました。