teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問レフトナビにつきまして...

編集履歴

回答編集履歴

8

修正

2020/04/12 05:40

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -12,13 +12,9 @@
12
12
 
13
13
  上記条件をすべて実現するのは、CSSだけだと難しそうです。2つまでなら同時に適用することができます、
14
14
 
15
- 案3が一番簡単で、現実的かと思います。
15
+
16
-
16
+
17
- 画面幅が小さいときにどれだけ崩れてもいいなら案1です。
17
+ **案1: 画面幅が小さいときにどれだけ崩れてもいい、という場合 (1.と2.のパターン)**
18
-
19
-
20
-
21
- **案1: 1.と2.のパターン**
22
18
 
23
19
  左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従する
24
20
 
@@ -92,7 +88,7 @@
92
88
 
93
89
  ---
94
90
 
95
- **案2: 2.と3.のパターン**
91
+ **案2: ナビゲーションが追従しなくてもいい、という場合 (2.と3.のパターン)**
96
92
 
97
93
  左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従しない
98
94
 
@@ -168,7 +164,7 @@
168
164
 
169
165
  ---
170
166
 
171
- **案3: 1.と3.のパターン**
167
+ **案3: ナビゲーションが左端にくっついてもいい、という場合 (1.と3.のパターン)**
172
168
 
173
169
  左側のサイドバー「div#rc_rightArea」は、左端にくっつくが、追従する
174
170
 

7

修正

2020/04/12 05:40

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -8,11 +8,13 @@
8
8
 
9
9
  3. 画面幅を小さくしたときに崩れない
10
10
 
11
+
12
+
11
- は、CSSだけだと実装できなさそうです。2つまでなら同時に適用することができます、
13
+ 上記条件をすべて実現するのは、CSSだけだと難しそうです。2つまでなら同時に適用することができます、
12
-
13
-
14
-
14
+
15
- 案3が一番簡単かと思います。
15
+ 案3が一番簡単で、現実的かと思います。
16
+
17
+ 画面幅が小さいときにどれだけ崩れてもいいなら案1です。
16
18
 
17
19
 
18
20
 

6

案を3つにし、解説を修正しました。

2020/04/12 05:38

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -2,9 +2,25 @@
2
2
 
3
3
 
4
4
 
5
+ 1. スクロール時にナビゲーションが追従
6
+
7
+ 2. ナビゲーション含めて中央に配置
8
+
9
+ 3. 画面幅を小さくしたときに崩れない
10
+
11
+ は、CSSだけだと実装できなさそうです。2つまでなら同時に適用することができます、
12
+
13
+
14
+
15
+ 案3が一番簡単かと思います。
16
+
17
+
18
+
19
+ **案1: 1.と2.のパターン**
20
+
5
- 案1: 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従する
21
+ 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従する
6
-
22
+
7
- (ただし画面幅を小さくしたときにナビゲーションが左端にはみ出る)
23
+ ただし画面幅を小さくしたときにナビゲーションが左端にはみ出る
8
24
 
9
25
  ```CSS
10
26
 
@@ -12,12 +28,18 @@
12
28
 
13
29
  width: 720px;
14
30
 
31
+
32
+
15
33
  /* display: inline-block; */
16
34
 
17
35
  display: block; /* 追加。中央配置のため必要 */
18
36
 
37
+
38
+
19
39
  font-size: 75%;
20
40
 
41
+
42
+
21
43
  /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
22
44
 
23
45
  padding-left: calc(200px + 20px);
@@ -40,14 +62,20 @@
40
62
 
41
63
  top: 100px;
42
64
 
65
+
66
+
43
67
  /* right: 0px; */
44
68
 
45
69
  left: calc(50vw - 360px - 100px); /* 追加 */
46
70
 
71
+
72
+
47
73
  /* display: inline-block; */
48
74
 
49
75
  display: block; /* 変更 */
50
76
 
77
+
78
+
51
79
  background-color: #ffffff;
52
80
 
53
81
  z-index: 9999;
@@ -62,7 +90,9 @@
62
90
 
63
91
  ---
64
92
 
93
+ **案2: 2.と3.のパターン**
94
+
65
- 案2: 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従しない
95
+ 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従しない
66
96
 
67
97
  ```CSS
68
98
 
@@ -70,16 +100,24 @@
70
100
 
71
101
  width: 720px;
72
102
 
103
+
104
+
73
105
  /* display: inline-block; */
74
106
 
75
107
  display: block; /* 追加。中央配置のため必要 */
76
108
 
109
+
110
+
77
111
  font-size: 75%;
78
112
 
113
+
114
+
79
115
  /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
80
116
 
81
117
  padding-left: calc(200px + 20px);
82
118
 
119
+
120
+
83
121
  margin: 0 auto; /* 追加。中央配置のため必要 */
84
122
 
85
123
  position: relative;
@@ -100,14 +138,20 @@
100
138
 
101
139
  top: 100px;
102
140
 
141
+
142
+
103
143
  /* right: 0px; */
104
144
 
105
145
  left: 0; /* 追加 */
106
146
 
147
+
148
+
107
149
  /* display: inline-block; */
108
150
 
109
151
  display: block; /* 変更 */
110
152
 
153
+
154
+
111
155
  background-color: #ffffff;
112
156
 
113
157
  z-index: 9999;
@@ -122,7 +166,9 @@
122
166
 
123
167
  ---
124
168
 
169
+ **案3: 1.と3.のパターン**
170
+
125
- 案3: 左側のサイドバー「div#rc_rightArea」は、左端にくっつくが、追従する
171
+ 左側のサイドバー「div#rc_rightArea」は、左端にくっつくが、追従する
126
172
 
127
173
  ```CSS
128
174
 
@@ -140,9 +186,13 @@
140
186
 
141
187
  width: 720px;
142
188
 
189
+
190
+
143
- /* display: inline-block; */
191
+ /* display: inline-block; */
144
-
192
+
145
- display: block; /* 追加。中央配置のため必要 */
193
+ display: block; /* 変更。中央配置のため必要 */
194
+
195
+
146
196
 
147
197
  font-size: 75%;
148
198
 
@@ -164,14 +214,20 @@
164
214
 
165
215
  top: 100px;
166
216
 
217
+
218
+
167
219
  /* right: 0px; */
168
220
 
169
221
  left: 0; /* 追加 */
170
222
 
223
+
224
+
171
225
  /* display: inline-block; */
172
226
 
173
227
  display: block; /* 変更 */
174
228
 
229
+
230
+
175
231
  background-color: #ffffff;
176
232
 
177
233
  z-index: 9999;

5

案を追加

2020/04/12 05:36

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
 
5
5
  案1: 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従する
6
+
7
+ (ただし画面幅を小さくしたときにナビゲーションが左端にはみ出る)
6
8
 
7
9
  ```CSS
8
10
 
@@ -10,7 +12,9 @@
10
12
 
11
13
  width: 720px;
12
14
 
13
- display: inline-block;
15
+ /* display: inline-block; */
16
+
17
+ display: block; /* 追加。中央配置のため必要 */
14
18
 
15
19
  font-size: 75%;
16
20
 
@@ -18,9 +22,7 @@
18
22
 
19
23
  padding-left: calc(200px + 20px);
20
24
 
21
- display: block;
22
-
23
- margin: 0 auto;
25
+ margin: 0 auto; /* 追加。中央配置のため必要 */
24
26
 
25
27
  }
26
28
 
@@ -58,6 +60,8 @@
58
60
 
59
61
 
60
62
 
63
+ ---
64
+
61
65
  案2: 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従しない
62
66
 
63
67
  ```CSS
@@ -66,7 +70,9 @@
66
70
 
67
71
  width: 720px;
68
72
 
69
- display: inline-block;
73
+ /* display: inline-block; */
74
+
75
+ display: block; /* 追加。中央配置のため必要 */
70
76
 
71
77
  font-size: 75%;
72
78
 
@@ -74,9 +80,7 @@
74
80
 
75
81
  padding-left: calc(200px + 20px);
76
82
 
77
- display: block;
78
-
79
- margin: 0 auto;
83
+ margin: 0 auto; /* 追加。中央配置のため必要 */
80
84
 
81
85
  position: relative;
82
86
 
@@ -96,9 +100,9 @@
96
100
 
97
101
  top: 100px;
98
102
 
99
- /* right: 0px; */ /* rightは削除 */
103
+ /* right: 0px; */
100
104
 
101
- left: 0; /* leftを追加 */
105
+ left: 0; /* 追加 */
102
106
 
103
107
  /* display: inline-block; */
104
108
 
@@ -113,3 +117,69 @@
113
117
  }
114
118
 
115
119
  ```
120
+
121
+
122
+
123
+ ---
124
+
125
+ 案3: 左側のサイドバー「div#rc_rightArea」は、左端にくっつくが、追従する
126
+
127
+ ```CSS
128
+
129
+ body {
130
+
131
+ padding-left: 200px;
132
+
133
+ }
134
+
135
+ ```
136
+
137
+ ```CSS
138
+
139
+ #div-contents {
140
+
141
+ width: 720px;
142
+
143
+ /* display: inline-block; */
144
+
145
+ display: block; /* 追加。中央配置のため必要 */
146
+
147
+ font-size: 75%;
148
+
149
+ margin: 0 auto; /* 追加。中央配置のため必要 */
150
+
151
+ }
152
+
153
+ ```
154
+
155
+ ```CSS
156
+
157
+ div#rc_rightArea {
158
+
159
+ width: 200px;
160
+
161
+ height: 155px;
162
+
163
+ position: fixed;
164
+
165
+ top: 100px;
166
+
167
+ /* right: 0px; */
168
+
169
+ left: 0; /* 追加 */
170
+
171
+ /* display: inline-block; */
172
+
173
+ display: block; /* 変更 */
174
+
175
+ background-color: #ffffff;
176
+
177
+ z-index: 9999;
178
+
179
+ font-size: 14px;
180
+
181
+ left: 0;
182
+
183
+ }
184
+
185
+ ```

4

修正

2020/04/12 05:29

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -38,9 +38,9 @@
38
38
 
39
39
  top: 100px;
40
40
 
41
+ /* right: 0px; */
42
+
41
43
  left: calc(50vw - 360px - 100px); /* 追加 */
42
-
43
- /* right: 0px; */
44
44
 
45
45
  /* display: inline-block; */
46
46
 
@@ -70,6 +70,8 @@
70
70
 
71
71
  font-size: 75%;
72
72
 
73
+ /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
74
+
73
75
  padding-left: calc(200px + 20px);
74
76
 
75
77
  display: block;
@@ -94,13 +96,13 @@
94
96
 
95
97
  top: 100px;
96
98
 
97
- /* right: 0px; */
99
+ /* right: 0px; */ /* rightは削除 */
98
100
 
99
- left: 0;
101
+ left: 0; /* leftを追加 */
100
102
 
101
103
  /* display: inline-block; */
102
104
 
103
- display: block;
105
+ display: block; /* 変更 */
104
106
 
105
107
  background-color: #ffffff;
106
108
 

3

案を追加しました。

2020/04/12 05:11

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -2,25 +2,25 @@
2
2
 
3
3
 
4
4
 
5
- 案1: 左側のサイドバー「div#rc_rightArea」が追従する
5
+ 案1: 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従する
6
6
 
7
7
  ```CSS
8
8
 
9
9
  #div-contents {
10
10
 
11
- width: 720px;
11
+ width: 720px;
12
12
 
13
- display: inline-block;
13
+ display: inline-block;
14
14
 
15
- font-size: 75%;
15
+ font-size: 75%;
16
16
 
17
- /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
17
+ /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
18
18
 
19
- padding-left: calc(200px + 20px);
19
+ padding-left: calc(200px + 20px);
20
20
 
21
- display: block;
21
+ display: block;
22
22
 
23
- margin: 0 auto;
23
+ margin: 0 auto;
24
24
 
25
25
  }
26
26
 
@@ -30,28 +30,84 @@
30
30
 
31
31
  div#rc_rightArea {
32
32
 
33
- width: 200px;
33
+ width: 200px;
34
34
 
35
- height: 155px;
35
+ height: 155px;
36
36
 
37
- position: fixed;
37
+ position: fixed;
38
38
 
39
- top: 100px;
39
+ top: 100px;
40
40
 
41
- left: calc(50vw - 360px - 100px); /* 追加 */
41
+ left: calc(50vw - 360px - 100px); /* 追加 */
42
42
 
43
- /* right: 0px; */
43
+ /* right: 0px; */
44
44
 
45
- /* display: inline-block; */
45
+ /* display: inline-block; */
46
46
 
47
- display: block; /* 変更 */
47
+ display: block; /* 変更 */
48
48
 
49
- background-color: #ffffff;
49
+ background-color: #ffffff;
50
50
 
51
- z-index: 9999;
51
+ z-index: 9999;
52
52
 
53
- font-size: 14px;
53
+ font-size: 14px;
54
54
 
55
55
  }
56
56
 
57
57
  ```
58
+
59
+
60
+
61
+ 案2: 左側のサイドバー「div#rc_rightArea」が、画面スクロール時に追従しない
62
+
63
+ ```CSS
64
+
65
+ #div-contents {
66
+
67
+ width: 720px;
68
+
69
+ display: inline-block;
70
+
71
+ font-size: 75%;
72
+
73
+ padding-left: calc(200px + 20px);
74
+
75
+ display: block;
76
+
77
+ margin: 0 auto;
78
+
79
+ position: relative;
80
+
81
+ }
82
+
83
+ ```
84
+
85
+ ```CSS
86
+
87
+ div#rc_rightArea {
88
+
89
+ width: 200px;
90
+
91
+ height: 155px;
92
+
93
+ position: absolute;
94
+
95
+ top: 100px;
96
+
97
+ /* right: 0px; */
98
+
99
+ left: 0;
100
+
101
+ /* display: inline-block; */
102
+
103
+ display: block;
104
+
105
+ background-color: #ffffff;
106
+
107
+ z-index: 9999;
108
+
109
+ font-size: 14px;
110
+
111
+ }
112
+
113
+ ```

2

修正しました。左側にナビゲーションを寄せるようにしています。

2020/04/12 05:09

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,34 +1,26 @@
1
1
  こちらで試してみたところ、以下のソースコードで実現できました。
2
-
3
- ↓このイメージですよね?
4
-
5
- ![イメージ説明](0569120168202bb12dbef7a49f134cf3.png)
6
2
 
7
3
 
8
4
 
9
- 案1: 右側のサイドバー「div#rc_rightArea」が追従する
5
+ 案1: 左側のサイドバー「div#rc_rightArea」が追従する
10
6
 
11
7
  ```CSS
12
8
 
13
9
  #div-contents {
14
10
 
15
- width: 720px;
11
+ width: 720px;
16
12
 
17
- /* display: inline-block; */
13
+ display: inline-block;
18
14
 
19
- display: block; /* 変更 */
15
+ font-size: 75%;
20
16
 
21
- font-size: 75%;
17
+ /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
22
18
 
23
- display: block;
19
+ padding-left: calc(200px + 20px);
24
20
 
25
- margin: 0 auto;
21
+ display: block;
26
22
 
27
- 　　
28
-
29
- /* 200px = div#rc_rightAreaのwidth、20px=余白。好きな値にしてください */
30
-
31
- padding-right: calc(200px + 20px); /* 追加 */
23
+ margin: 0 auto;
32
24
 
33
25
  }
34
26
 
@@ -46,11 +38,13 @@
46
38
 
47
39
  top: 100px;
48
40
 
49
- /* right: 0; */
41
+ left: calc(50vw - 360px - 100px); /* 追加 */
50
42
 
51
- right: calc(100vw / 2 - (720px + 200px + 20px) / 2); /* 変更 */
43
+ /* right: 0px; */
52
44
 
53
- display: inline-block;
45
+ /* display: inline-block; */
46
+
47
+ display: block; /* 変更 */
54
48
 
55
49
  background-color: #ffffff;
56
50
 

1

修正

2020/04/12 05:03

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,6 +1,12 @@
1
1
  こちらで試してみたところ、以下のソースコードで実現できました。
2
2
 
3
+ ↓このイメージですよね?
3
4
 
5
+ ![イメージ説明](0569120168202bb12dbef7a49f134cf3.png)
6
+
7
+
8
+
9
+ 案1: 右側のサイドバー「div#rc_rightArea」が追従する
4
10
 
5
11
  ```CSS
6
12