回答編集履歴
1
追記
test
CHANGED
|
@@ -43,3 +43,85 @@
|
|
|
43
43
|
|
|
44
44
|
|
|
45
45
|
質問文は編集できるので，詳細が分かれば随時，内容・タイトルを更新してください
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
# 追記(20180905)
|
|
54
|
+
|
|
55
|
+
掲載されたコードをコピペしたものです
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
- 属性値はちゃんと`"`で囲ってください．「閉じ」が抜けています
|
|
60
|
+
|
|
61
|
+
- `body`の`height`二重指定はいらないです．あと`!important`もできるだけ使わない方が良いです
|
|
62
|
+
|
|
63
|
+
- jsもですが，cssのクラス名・id名の先頭に数字は使えないですし，`.`や`#`なしに名前を入れると要素扱いされるので，`.container 1`や`.container 2`は，`.container`クラスの子孫要素の「`<1>`タグ」または「`<2>`タグ」にスタイリングしていることになります（そんなものは当然ない（文法違反である）ので，これは不正なコードとして，処理されません．注釈を入れたいなら`/* こんなふうにコメントアウトしてください */`．あと，セレクタに空白を入れると，子孫要素を指定する記述の意味になるので注意してください）
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
> container 1は、画面幅一杯に表示しているヒーロー画像用のsectionのcontainer
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
- HTMLと矛盾しています．掲載されたHTMLでは`<section>`こそが`.container`のcontainer（入れ物）になっています．（HTMLの`.container`のスタイルの記述が`.container 1`であるというなら意味は通りますが，分かりにくいので，cssの記述はHTMLに合わせてください）
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
> container 2が普通のコンテンツページです。
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
- HTMLに当該の記述が見当たりません．再現できないので，この文章が蛇足であるか，説明の不足・コードの欠落であると推測されます
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
> 必要だと思われる部分を書き出しました
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
「思われる」ではなく，実際に検証したうえで，きちんと確認を**とれた**(過去完了形の方の)コードを掲載してください．確認方法としてliveweave等のオンラインエディタを利用してはどうかという提案はすでにしました．何らかの理由でそれができないのであれば，理由も追記してください
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
そして示されたコードを手直ししたものが以下です
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
（HTMLとCSSの整合性だけを重視している（質問者さんの意図は把握していない）ので，この書き換えが正しいかは分かりませんが，`.container 1`は`.container`に，`.container 2`は`.contents`にして，各要素に背景色を付けています）
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
問題は再現できているでしょうか？
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
最初に挙げられていた
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
> 画面幅を縮めると、display:flexを設定した要素のみ、縮んで右側に余白ができてしまいます。
|
|
108
|
+
|
|
109
|
+
（flexbox自体が左の枠外にはみ出して、少しの親要素と、
|
|
110
|
+
|
|
111
|
+
親要素からはみ出して子要素の右側だけが画面に見えている感じのものと、
|
|
112
|
+
|
|
113
|
+
ただ左端に縮んだものがあります。)
|
|
114
|
+
|
|
115
|
+
スマホサイズにすると、大体画面の2/3は余白になっています。
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
を再現する要素が全くないように感じられます
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
初心者と思わしき方からの質問は大抵，文章主体が多いですが，ここではコードとイラストで説明してください．変わったことをしようとしていない限り，それで十分伝わります．
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
まずは「過去完了形（過去形ではなく過去完了形）で」確認がとれたコードを載せることに努めてください．
|