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

CSSCSSトラブル対応

目次一覧

 状態:-  閲覧数:461  投稿日:2020-04-11  更新日:2020-04-12
問題発生 / どうしても解決できない / 最終的な対応

今回(最終的に)実行した手順 / CSSトラブル時の対応はプログラミングと同じ / 問題と思われる箇所を特定


問題発生 / どうしても解決できない / 最終的な対応

 閲覧数:200 投稿日:2020-04-11 更新日:2020-04-11 

問題発生


既存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を利用して、ループでアニメーションさせているから?

最終的な対応


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

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

今回(最終的に)実行した手順 / CSSトラブル時の対応はプログラミングと同じ / 問題と思われる箇所を特定

 閲覧数:196 投稿日:2020-04-11 更新日:2020-04-12 

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


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

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

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

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

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

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

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


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

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

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


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

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


「position:sticky;」がどうしても効かない → <header>を一旦削除してみる → <header>に「display:inline;」を指定

「正常動作する最小構成単体デモ」と挙動が異なる理由は、<div><div>の処理方法が、htmlの複雑さで異なるから



類似度ページランキング
順位 ページタイトル抜粋
1 「正常動作する最小構成単体デモ」と挙動が異なる理由は、 36
2 CSSがどうしても効かない → 該当CSSの読込可否 → 該当CSSの反映可否 34
3 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 34
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない 33
5 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 31
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 31
7 IE8で、フォームの縦位置がどうしても真ん中にこない場合の、最後の手段(案) 28
8 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 28
9 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 27
10 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 27
11 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 26
12 「兄弟要素の兄要素を選択するCSSセレクタ」は存在しない 26
13 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 26
14 使用していないCSSをチェックする、標準的な方法を知りたい 26
15 Twitter ヘッダー画像は、Fireworks CS3 で作成している 26
16 プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ 26
17 navタグで定義している部分だけCSSが効かない【html5】 25
18 JPEG画像ファイルコピーを繰り返しても画質は劣化しない。画質が劣化するのは上書き保存する場合 25
19 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 25
20 Firefox7 「このサイトのパスワードを保存しますか?」を非表示にする(案) 25
2022/10/04 0:19 更新
週間人気ページランキング / 9-26 → 10-2
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 71
2 16進数カラーコード / 2進数 37
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 19
5 「bgcolor」「background-color」「background」の違い | CSS 16
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 14
7 Design 0 14
8 RGBの種類 / ビットカラー | RGB(色) 12
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 11
10 「属性」「プロパティ」「アトリビュート」の違い | CSS 9
10 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 9
11 rem | 単位(CSS) 8
11 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 8
11 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 8
11 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
12 カラーコード / 色コード | カラーコード(色) 7
13 パッケージ化されてない拡張機能 | Chrome 拡張機能 6
2022/10/3 1:01 更新