回答編集履歴
4
スタイルの一部変更等
answer
CHANGED
|
@@ -10,18 +10,18 @@
|
|
|
10
10
|
- [キャッシュとは？IT初心者でも分かるように解説 - サルワカ](https://saruwakakun.com/it/web/cache)
|
|
11
11
|
- [ブラウザのキャッシュクリア方法～ホームページが更新されていない!?～](https://www.kbs-web.com/solution/item/hpinfo/cash.html)
|
|
12
12
|
|
|
13
|
-
---
|
|
14
13
|
|
|
15
|
-
追記（20190829004407）
|
|
16
14
|
|
|
15
|
+
# 追記（20190829004407）
|
|
16
|
+
|
|
17
17
|
cf．
|
|
18
18
|
[kei344](https://teratail.com/users/kei344#reply)さんのデモ
|
|
19
19
|
[https://jsfiddle.net/zLp0v8fq/show/](https://jsfiddle.net/zLp0v8fq/show/)
|
|
20
20
|
|
|
21
|
-
-
|
|
21
|
+
- Firefox Dev Edition:
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
-
|
|
24
|
+
- Firefox:
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
いずれもこちらでは見ためには問題ないですね．．．
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
# 追記（20190901142716）
|
|
40
40
|
|
|
41
|
-
レイアウト確認用のCSS
|
|
41
|
+
レイアウト確認用のCSS（例）
|
|
42
42
|
|
|
43
43
|
```check_layout.css
|
|
44
44
|
*, ::before, ::after{
|
3
レイアウト確認用のCSSを追記
answer
CHANGED
|
@@ -33,4 +33,26 @@
|
|
|
33
33
|
まあ，floatは後処理を忘れがちですし，`display: inline-block;`やflexboxを使うほうが直観的だと思うので，個人的にそちらをお勧めします
|
|
34
34
|
（ちなみに私は，CSSリセットで`display: inline-block;`と`box-sizing: border-box;`は（疑似要素も含めて）必ず入れていました）
|
|
35
35
|
|
|
36
|
-
ヘッダーがはみ出す系は，とりあえず親要素に`overflow:hidden;`するのでも良いですが，余力があればレスポンシヴ・デザインも目指しましょう（Progateのカリキュラムに組み込まれている場合は一旦スルーしてもらって構わないです）
|
|
36
|
+
ヘッダーがはみ出す系は，とりあえず親要素に`overflow:hidden;`するのでも良いですが，余力があればレスポンシヴ・デザインも目指しましょう（Progateのカリキュラムに組み込まれている場合は一旦スルーしてもらって構わないです）
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
# 追記（20190901142716）
|
|
40
|
+
|
|
41
|
+
レイアウト確認用のCSS
|
|
42
|
+
|
|
43
|
+
```check_layout.css
|
|
44
|
+
*, ::before, ::after{
|
|
45
|
+
box-shadow:
|
|
46
|
+
inset 0 2px red,
|
|
47
|
+
inset 0 -2px blue,
|
|
48
|
+
inset 2px 0 yellow,
|
|
49
|
+
inset -2px 0 green;
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
```check_layout.css
|
|
54
|
+
*, ::before, ::after{
|
|
55
|
+
color: yellow;
|
|
56
|
+
background: linear-gradient(45deg, rgba(0,0,0) 0%, rgba(255,255,255,.5) 100%);
|
|
57
|
+
}
|
|
58
|
+
```
|
2
検証/改善案の追記
answer
CHANGED
|
@@ -8,4 +8,29 @@
|
|
|
8
8
|
|
|
9
9
|
cf．
|
|
10
10
|
- [キャッシュとは？IT初心者でも分かるように解説 - サルワカ](https://saruwakakun.com/it/web/cache)
|
|
11
|
-
- [ブラウザのキャッシュクリア方法～ホームページが更新されていない!?～](https://www.kbs-web.com/solution/item/hpinfo/cash.html)
|
|
11
|
+
- [ブラウザのキャッシュクリア方法～ホームページが更新されていない!?～](https://www.kbs-web.com/solution/item/hpinfo/cash.html)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
追記（20190829004407）
|
|
16
|
+
|
|
17
|
+
cf．
|
|
18
|
+
[kei344](https://teratail.com/users/kei344#reply)さんのデモ
|
|
19
|
+
[https://jsfiddle.net/zLp0v8fq/show/](https://jsfiddle.net/zLp0v8fq/show/)
|
|
20
|
+
|
|
21
|
+
- FF Dev Edition:
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
- FF:
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
いずれもこちらでは見ためには問題ないですね．．．
|
|
28
|
+
|
|
29
|
+
と思ったのですが，画面横幅のリサイズや，要素全体の拡大縮小を行ったところ，状況が再現できました．画面の解像度の違いによって誤差が生まれているのかもしれません
|
|
30
|
+
（各要素の状態が分かりやすいように，テキストを選択状態にしています）
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
まあ，floatは後処理を忘れがちですし，`display: inline-block;`やflexboxを使うほうが直観的だと思うので，個人的にそちらをお勧めします
|
|
34
|
+
（ちなみに私は，CSSリセットで`display: inline-block;`と`box-sizing: border-box;`は（疑似要素も含めて）必ず入れていました）
|
|
35
|
+
|
|
36
|
+
ヘッダーがはみ出す系は，とりあえず親要素に`overflow:hidden;`するのでも良いですが，余力があればレスポンシヴ・デザインも目指しましょう（Progateのカリキュラムに組み込まれている場合は一旦スルーしてもらって構わないです）
|
1
環境情報の追記
answer
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
そちらのスクリーンショットを載せていただけませんか？
|
|
2
|
-
こちらでは状況が再現し
|
|
2
|
+
こちら（Firefox Quantum Developer Edition 70）では，状況が再現しませんでした
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
もしかすると，キャッシュのせいかもしれません
|