既存サービスのCSSがどうしても効かない → 正常動作する最小構成の単体デモを作成し、移し替える

問題発生

既存WebサービスのCSSがどうしても効かない

具体的には？
・モバイル表示する際だけ、h1タグが真ん中に表示されない
・モバイル表示する際だけ、headerタグ内のh1、h2、pタグの縦間隔が意図せず空いてしまう

どんなCSSなの？
・Animate.cssを利用しているJavaScriptライブラリ
・CSS の visibility プロパティや、 transform プロパティ を多用している
・何を行っているか理解できていないCSS

どうしても解決できない

色々試してみるも挙動を理解できない
・「font-size:2rem;」までは期待した通り動作するが、「font-size:2.6rem;」以上にすると、上記通りの異常挙動となる
・marginにマイナス指定したりしてみたが、モバイルで期待した通り表示されてもパソコンでおかしくなったり、その逆パターンだったりして、期待した結果を得られない
※メディアクエリは真っ先に確認したが、それらしい記述は見当たらない

Chromeデベロッパーツール（検証モード）を使用しても解決できない
・そんなはずはないと思われるかもしれないが、どうしても解決できない
・JavaScriptを利用して、ループでアニメーションさせているから？

最終的な対応

正常動作する最小構成の単体デモを作成し、移し替えた

考え方
・正常動作しないコードの原因を追究することは大変難しい
・正常動作する最低限のコードを作成し、そこから機能追加していく方が(精神的にも)楽

今回(最終的に)実行した手順

最初に考えたこと
ライブラリの問題があるのでは？
→ ライブラリのデモを改めて確認したみたが、正常動作している

1.ライブラリを改めてダウンロード

2.単体デモを設置する
モバイルでも正常動作することを確認する

3.単体デモを最小構成にする
・不要な記述を全て削除
・最低限必要なものに限定する。出来るだけシンプルに！

4.単体デモを既存Webサービスにコピペする
・単体デモのhtmlとcssを既存Webサービスにコピペする
・モバイルでも正常動作することを確認する

5.「既存Webサービスへ追加した単体デモコード」を拡張していく
・「既存Webサービスで正常動作しないコード」を、「既存Webサービスへ追加した(正常動作する)単体デモコード」へ一つずつ追加していく
・一つ追加する度に、モバイルでも正常動作することを確認していく

CSSトラブル時の対応はプログラミングと同じ

最小構成の単体デモを作成し、動作確認していく
・原因が複数考えられる場合は、(面倒でも)一旦最小構成の単体デモを作成し、そこから動作確認していく方が結局は早く解決する(ことが多いと思われる)

動作しない環境で苦労するよりも
動作する環境を用意し、そこへ追加していく(方が早く解決するかも)

問題と思われる箇所を特定

原因不明だが、問題と思われる箇所を特定(2020/4/2 19:03)
h1タグ内やh2タグ内に改行を入れていると、モバイル表示時に意図しない結果となる

なぜ？
html改行 と 表示 の関係性は？