回答編集履歴

5

コードの修正

2019/07/23 14:47

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- 動作デモ → [https://jsfiddle.net/urkqdw6t/](https://jsfiddle.net/urkqdw6t/)
15
+ 動作デモ → [https://jsfiddle.net/0o4kyb21/](https://jsfiddle.net/0o4kyb21/)
16
16
 
17
17
 
18
18
 
@@ -53,3 +53,13 @@
53
53
  }
54
54
 
55
55
  ```
56
+
57
+
58
+
59
+ ※追記
60
+
61
+ 大分時間がたった後に申し訳ありません。
62
+
63
+ リンク先にJavaScriptのコードが入ってしまっていたのですが、それは関係ないです。
64
+
65
+ 元々あったコードを弄ってこの動作デモを作ったので、消し忘れが残ってしまっていました。

4

文章を分かりやすく修正

2019/07/23 14:47

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
@@ -4,11 +4,11 @@
4
4
 
5
5
  `.main-navigation`に、「`width: 100%;`」または「`left: 0;`と`right: 0;`」を追加してみてください。
6
6
 
7
- 今回は親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%で大丈夫です。
8
-
9
7
 
10
8
 
11
9
  下記リンク先の動作デモで、背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
10
+
11
+ デモではそちらの親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%指定でも大丈夫です。
12
12
 
13
13
 
14
14
 

3

コードを修正

2019/07/15 14:46

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- `.main-navigation`に、「`width: 100%;」`または「`left: 0;`と`right: 0;`」を追加してみてください。
5
+ `.main-navigation`に、「`width: 100%;`」または「`left: 0;`と`right: 0;`」を追加してみてください。
6
6
 
7
7
  今回は親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%で大丈夫です。
8
8
 

2

コードを修正

2019/07/15 14:42

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
@@ -2,7 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- `.main-navigation`に、`width: 100vw;`または`left: 0;`と`right: 0;`を追加してみてください。
5
+ `.main-navigation`に、`width: 100%;`または`left: 0;`と`right: 0;`を追加してみてください。
6
+
7
+ 今回は親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%で大丈夫です。
8
+
9
+
6
10
 
7
11
  下記リンク先の動作デモで、背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
8
12
 
@@ -16,7 +20,7 @@
16
20
 
17
21
  .main-navigation {
18
22
 
19
- width: 100vw;  /* ←を追加するか */
23
+ width: 100%;  /* ←を追加するか */
20
24
 
21
25
  position: fixed;
22
26
 

1

句読点の追加

2019/07/15 14:32

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  `.main-navigation`に、`width: 100vw;`または`left: 0;`と`right: 0;`を追加してみてください。
6
6
 
7
- 下記リンク先の動作デモで背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
7
+ 下記リンク先の動作デモで背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
8
8
 
9
9
 
10
10