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

Webデザイン

カテゴリー: CSS  閲覧数:526 配信日:2020-04-11 08:36


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


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

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

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

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

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

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

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


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

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

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


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

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

週間人気ページランキング / 2-19 → 2-25
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 16
2 「bgcolor」「background-color」「background」の違い | CSS 6
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
3 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
3 RGBの種類 / ビットカラー | RGB(色) 4
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
4 画像縦横比の問題 | 画像 3
4 効果を打ち消すスタイルシート | CSS 3
4 RGB ⇔ Lab | 色変換(色) 3
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
5 ライセンス変更 | 画像著作権(画像) 2
5 HSV / HSB 2
5 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
5 画面キャプチャ 2022 年 | Chrome 拡張機能 2
5 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 2
5 フォントアイコン表示不具合の原因は重複読込+α | フォント 2
5 「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法 2
5 Chrome ブラウザで画像の DataURI を取得 | Google Chrome(ブラウザ) 2
5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 2
5 「レイヤー」+「レイヤー効果」をコピーして新規psdにペースト | Photoshop 2
2026/2/26 5:05 更新
指定期間人気ページランキング / 2020-5-30 → 2026-2-25
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8907
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4612
3 Design 0 4008
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3790
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2776
6 RGBの種類 / ビットカラー | RGB(色) 2744
7 「bgcolor」「background-color」「background」の違い | CSS 2086
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2025
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1975
10 16進数カラーコード / 2進数 1881
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1876
12 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1708
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1695
14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1627
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能(ブラウザ) 1550
16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1531
17 「東京都」のカラーコード取得は難しい | カラーコード(色) 1416
18 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1387
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1236
20 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1218
2026/2/26 5:05 更新