質問編集履歴
5
追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -266,7 +266,7 @@
|
|
|
266
266
|
|
|
267
267
|
```
|
|
268
268
|
|
|
269
|
-
### 試したこ
|
|
269
|
+
### 試したこ
|
|
270
270
|
|
|
271
271
|
|
|
272
272
|
|
|
@@ -277,3 +277,9 @@
|
|
|
277
277
|
ディベロッパーツールでヘッダーのcssを触ったときに画像です。
|
|
278
278
|
|
|
279
279
|
width: 100%;を消したときは768px以内に収まりますが、100%とすると大きくはみ出し、ヘッダーが1000pxとなります。100%だと768pxになると思ったのですがなりません。
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
**この画像のこの状態になっている意味が分かりません。
|
|
284
|
+
|
|
285
|
+
ディベロッパーツールで肌色の余分な部分にカーソルを合わせたときに、htmlのwidthが中身(?)よりも小さくなっています。原因も分かりません。助けてほしいです。**
|
4
質問文全体の改修
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
isaraというLP模写をして学習をしています。
|
|
4
|
-
|
|
4
|
+
|
|
5
|
-
|
|
5
|
+
**そのサイトにスマホ用のレイアウトを実装しようと思いましたができません。**
|
|
6
6
|
|
|
7
7
|
responsive.cssにスマホ用のレイアウトを実装したいです。
|
|
8
8
|
|
|
9
|
-
responsive.cssでhmax-width: 768pxを指定し
|
|
9
|
+
responsive.cssでhmax-width: 768pxを指定しましたが実際には1000pxとヘッダーのみ物凄く大きくなりました。
|
|
10
|
-
|
|
10
|
+
|
|
11
|
-
|
|
11
|
+
**どうすればheaderのwidthが768px以内に収まるか知りたいです。**
|
|
12
12
|
|
|
13
13
|
よろしくお願いします。
|
|
14
14
|
|
|
@@ -18,7 +18,31 @@
|
|
|
18
18
|
|
|
19
19
|
```HTML
|
|
20
20
|
|
|
21
|
+
<!DOCTYPE html>
|
|
22
|
+
|
|
23
|
+
<html lang="en">
|
|
24
|
+
|
|
25
|
+
<head>
|
|
26
|
+
|
|
27
|
+
<meta charset="UTF-8">
|
|
28
|
+
|
|
29
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
30
|
+
|
|
31
|
+
<title>Document</title>
|
|
32
|
+
|
|
33
|
+
<link rel="stylesheet" href="isara.css">
|
|
34
|
+
|
|
35
|
+
<link rel="stylesheet" href="responsive.css">
|
|
36
|
+
|
|
37
|
+
<script src="jquery-3.5.1.min.js"></script>
|
|
38
|
+
|
|
39
|
+
<script src="isara.js"></script>
|
|
40
|
+
|
|
41
|
+
</head>
|
|
42
|
+
|
|
43
|
+
<body>
|
|
44
|
+
|
|
21
|
-
<header>
|
|
45
|
+
<header>
|
|
22
46
|
|
|
23
47
|
<div class="header-in">
|
|
24
48
|
|
|
@@ -34,7 +58,7 @@
|
|
|
34
58
|
|
|
35
59
|
<p>お問い合わせ / 資料請求はこちら</p>
|
|
36
60
|
|
|
37
|
-
</div>
|
|
61
|
+
</div>
|
|
38
62
|
|
|
39
63
|
<div class="header-right-mini">
|
|
40
64
|
|
|
@@ -46,7 +70,9 @@
|
|
|
46
70
|
|
|
47
71
|
</div>
|
|
48
72
|
|
|
49
|
-
</header>
|
|
73
|
+
</header>
|
|
74
|
+
|
|
75
|
+
</body>
|
|
50
76
|
|
|
51
77
|
```
|
|
52
78
|
|
|
@@ -244,12 +270,10 @@
|
|
|
244
270
|
|
|
245
271
|
|
|
246
272
|
|
|
247
|
-
isara.cssのheaderのwidthを消せばヘッダーのサイズが変わることが分かっていますがパソコン用のディスプレイも崩れるため、その後に何をすればよいか分かりませんでした。
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
252
|
-
|
|
253
|
-
|
|
274
|
+
|
|
254
|
-
|
|
275
|
+
|
|
276
|
+
|
|
255
|
-
|
|
277
|
+
ディベロッパーツールでヘッダーのcssを触ったときに画像です。
|
|
278
|
+
|
|
279
|
+
width: 100%;を消したときは768px以内に収まりますが、100%とすると大きくはみ出し、ヘッダーが1000pxとなります。100%だと768pxになると思ったのですがなりません。
|
3
画像の差し替え
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
LPのヘッダースマホサイズのスクリーンで正しく表示したい
|
|
1
|
+
LPのヘッダーをスマホサイズのスクリーンで正しく表示したい
|
test
CHANGED
|
@@ -250,6 +250,6 @@
|
|
|
250
250
|
|
|
251
251
|
### 補足情報（FW/ツールのバージョンなど）
|
|
252
252
|
|
|
253
|
-
|
|
254
254
|
|
|
255
255
|
このような感じにヘッダーが端まで伸びています。
|
2
コードの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -52,6 +52,44 @@
|
|
|
52
52
|
|
|
53
53
|
```isaracss
|
|
54
54
|
|
|
55
|
+
* {
|
|
56
|
+
|
|
57
|
+
padding: 0;
|
|
58
|
+
|
|
59
|
+
margin: 0;
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
body {
|
|
66
|
+
|
|
67
|
+
text-align: center;
|
|
68
|
+
|
|
69
|
+
color: black;
|
|
70
|
+
|
|
71
|
+
background-color: cornsilk;
|
|
72
|
+
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
ul {
|
|
78
|
+
|
|
79
|
+
list-style: none;
|
|
80
|
+
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
.clear {
|
|
86
|
+
|
|
87
|
+
clear: left;
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
55
93
|
header {
|
|
56
94
|
|
|
57
95
|
position: fixed;
|
|
@@ -146,6 +184,14 @@
|
|
|
146
184
|
|
|
147
185
|
}
|
|
148
186
|
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
//ここまでがヘッダーのcssです
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
149
195
|
```
|
|
150
196
|
|
|
151
197
|
```responsivecss
|
1
説明文の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -203,3 +203,7 @@
|
|
|
203
203
|
|
|
204
204
|
|
|
205
205
|
### 補足情報（FW/ツールのバージョンなど）
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
このような感じにヘッダーが端まで伸びています。
|