teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Google Chromeで閲覧した際、縦になってしまうnavbarの要素を横並びにしたい

編集履歴

質問編集履歴

10

ソースコード説明文

2021/12/10 06:53

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  該当箇所が不明瞭なので、ご指摘いただければ追加・修正いたします。
34
34
 
35
- heroyctで確認していただき、ソースコード自体には不備がないことが分かりました。
35
+ JSFiddleで確認していただき、ソースコード自体には不備がないことが分かりました。
36
36
 
37
37
  どこかで打ち消されているのかもしれません。
38
38
 

9

ソースコード

2021/12/10 06:53

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
File without changes
test CHANGED
@@ -42,15 +42,31 @@
42
42
 
43
43
  <div class="nav-fix-pos">
44
44
 
45
- <nav id="menubar">
45
+ <nav id="menubar">
46
-
46
+
47
- <ul>
47
+ <ul>
48
-
48
+
49
- <li><a href="index.html">例</a></li>
49
+ <li><a href="index.html">メニュー</a></li>
50
+
50
-
51
+ <li><a href="index.html">メニュー</a></li>
52
+
53
+ <li><a href="index.html">メニュー</a></li>
54
+
55
+ <li><a href="index.html">メニュー</a></li>
56
+
57
+ <li><a href="index.html">メニュー</a></li>
58
+
59
+ <li><a href="index.html">メニュー</a></li>
60
+
61
+ <li><a href="index.html">メニュー</a></li>
62
+
63
+ <li><a href="index.html">メニュー</a></li>
64
+
65
+ <li><a href="index.html">メニュー</a></li>
66
+
51
- </ul>
67
+ </ul>
52
-
68
+
53
- </nav>
69
+ </nav>
54
70
 
55
71
  </div>
56
72
 

8

該当のソースコード説明文修正

2021/12/10 06:51

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  該当箇所が不明瞭なので、ご指摘いただければ追加・修正いたします。
34
34
 
35
- ソースコード自体には不備がないことが分かりました。
35
+ heroyctで確認していただき、ソースコード自体には不備がないことが分かりました。
36
36
 
37
37
  どこかで打ち消されているのかもしれません。
38
38
 

7

ソースコード追加

2021/12/10 06:50

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
File without changes
test CHANGED
@@ -68,29 +68,117 @@
68
68
 
69
69
 
70
70
 
71
-
71
+ /*メインメニュー
72
+
73
+ ---------------------------------------------------------------------------*/
74
+
75
+ /*メニューブロックの設定*/
76
+
77
+ #menubar {
78
+
79
+ max-width: 1200px; /*最大幅。#header、.contents、#pagetopと数字を合わせる*/
80
+
81
+ position: relative;z-index: 2;
82
+
83
+ margin: 0 auto;
84
+
85
+ background: #F0C; /*背景色（古いブラウザ用）*/
86
+
87
+ background: rgba(255,255,255,0.9); /*背景色。255,255,255は白の事で、最後の0.9は透明度90%の事。*/
88
+
89
+ height: 45px; /*メニューブロックの高さ。ここを変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
90
+
91
+ padding: 10px 0; /*上下、左右へあける余白。ここの10pxの数字を変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
92
+
93
+ }
94
+
95
+ /*トップページのメニューブロックの設定*/
96
+
97
+ #top #menubar {
98
+
99
+ border-radius: 10px; /*角丸のサイズ*/
100
+
101
+ -webkit-box-shadow: 2px 5px 8px rgba(0,0,0,0.2); /*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の0.2は透明度20%の事。*/
102
+
103
+ box-shadow: 2px 5px 8px rgba(0,0,0,0.2); /*同上*/
104
+
105
+ }
72
106
 
73
107
  /*メニュー１個あたりの設定*/
74
108
 
75
109
  #menubar li {
76
110
 
111
+ float: left;
112
+
77
- float: left; /*左に回り込み*/
113
+ /*左に回り込み*/
114
+
78
-
115
+ width: 11.9%;
116
+
79
- width: 11.9%; /*メニュー幅（※8個の場合）*/
117
+ /*メニュー幅（※8個の場合）*/
80
-
118
+
81
- }
119
+ }
120
+
121
+
82
122
 
83
123
  #menubar li a {
84
124
 
85
125
  text-decoration: none;
86
126
 
87
- display: inline-block;
127
+ display: inline-block;
88
-
128
+
89
- text-align: center;
129
+ text-align: center;
130
+
90
-
131
+ line-height: 45px;
132
+
133
+ /*行間（高さ）*/
134
+
135
+ border-right: 1px dashed #ccc;
136
+
137
+ /*右側の線の幅、線種、色*/
138
+
139
+ }
140
+
141
+
142
+
143
+ /*１個目メニューの設定*/
144
+
145
+ #menubar li:first-child {
146
+
91
- line-height: 45px; /*行間（高さ）*/
147
+ margin-left: 2.8%; /*左側にバランスよく余白を入れる*/
148
+
92
-
149
+ }
150
+
151
+ #menubar li:first-child a {
152
+
93
- border-right: 1px dashed #ccc; /*右側の線の幅、線種、色*/
153
+ border-left: 1px dashed #ccc; /*左側の線の幅、線種、色*/
154
+
155
+ }
156
+
157
+ /*マウスオン時と、現在表示中(current)設定*/
158
+
159
+ #menubar li a:hover,
160
+
161
+ #menubar li.current a {
162
+
163
+ color: #fff; /*文字色*/
164
+
165
+ background:#f0c; /*背景色*/
166
+
167
+ }
168
+
169
+ /*小さい端末用(画面幅800px以下)メニューを表示させない*/
170
+
171
+ #menubar-s {
172
+
173
+ display: none;
174
+
175
+ }
176
+
177
+ /*３本バーアイコンを表示させない*/
178
+
179
+ #menubar_hdr {
180
+
181
+ display: none;
94
182
 
95
183
  }
96
184
 

6

試したこと追加

2021/12/10 06:49

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
 
10
10
 
11
- Google Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
11
+ Google Chromeで閲覧する際、縦になっているnavbarの要素を横並びにしたいです。
12
12
 
13
13
 
14
14
 
@@ -32,7 +32,9 @@
32
32
 
33
33
  該当箇所が不明瞭なので、ご指摘いただければ追加・修正いたします。
34
34
 
35
+ ソースコード自体には不備がないことが分かりました。
35
36
 
37
+ どこかで打ち消されているのかもしれません。
36
38
 
37
39
 
38
40
 
@@ -98,6 +100,8 @@
98
100
 
99
101
  ### 試したこと
100
102
 
103
+ ・flexを使用
104
+
101
105
  ・floatプロパティ追加
102
106
 
103
107
  ・親要素にnon-wrapを指定

5

タイトル変更

2021/12/10 06:46

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
@@ -1 +1 @@
1
- Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたい
1
+ Google Chromeで閲覧した際、縦になってしまうnavbarの要素を横並びにしたい
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
 
10
10
 
11
- Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
11
+ Google Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
12
12
 
13
13
 
14
14
 
@@ -18,11 +18,9 @@
18
18
 
19
19
  ```
20
20
 
21
- エッジで確認すると、navbarの要素の横並びができているのですが、
21
+ Microsoft Edgeで確認すると、navbarの要素の横並びができているのですが、
22
22
 
23
- Chromeで確認すると、navbarの要素の横並びができません。
23
+ Google Chromeで確認すると、navbarの要素の横並びができません。
24
-
25
-
26
24
 
27
25
  ```
28
26
 

4

修正に依頼に基づきグーグル→Chromeに修正

2021/12/10 05:08

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
@@ -1 +1 @@
1
- グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたい
1
+ Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたい
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
 
10
10
 
11
- グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
11
+ Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
12
12
 
13
13
 
14
14
 
@@ -20,7 +20,7 @@
20
20
 
21
21
  エッジで確認すると、navbarの要素の横並びができているのですが、
22
22
 
23
- グーグルで確認すると、navbarの要素の横並びができません。
23
+ Chromeで確認すると、navbarの要素の横並びができません。
24
24
 
25
25
 
26
26
 

3

試したこと追加

2021/12/10 03:42

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
File without changes
test CHANGED
@@ -100,6 +100,8 @@
100
100
 
101
101
  ### 試したこと
102
102
 
103
+ ・floatプロパティ追加
104
+
103
105
  ・親要素にnon-wrapを指定
104
106
 
105
107
  ・親要素にdisplay:flexを指定

2

ソースコードの修正

2021/12/10 03:37

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
File without changes
test CHANGED
@@ -47,6 +47,12 @@
47
47
  <ul>
48
48
 
49
49
  <li><a href="index.html">例</a></li>
50
+
51
+ </ul>
52
+
53
+ </nav>
54
+
55
+ </div>
50
56
 
51
57
  ```
52
58
 

1

子要素の追加

2021/12/10 03:35

投稿

Ponppp123
Ponppp123

スコア1

test CHANGED
@@ -1 +1 @@
1
- グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたい。
1
+ グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたい
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  <ul>
48
48
 
49
- <li><a href="index.html">例ジ</a></li>
49
+ <li><a href="index.html">例</a></li>
50
50
 
51
51
  ```
52
52
 
@@ -57,6 +57,34 @@
57
57
  ul {
58
58
 
59
59
  list-style: none;
60
+
61
+ }
62
+
63
+
64
+
65
+
66
+
67
+ /*メニュー１個あたりの設定*/
68
+
69
+ #menubar li {
70
+
71
+ float: left; /*左に回り込み*/
72
+
73
+ width: 11.9%; /*メニュー幅（※8個の場合）*/
74
+
75
+ }
76
+
77
+ #menubar li a {
78
+
79
+ text-decoration: none;
80
+
81
+ display: inline-block;
82
+
83
+ text-align: center;
84
+
85
+ line-height: 45px; /*行間（高さ）*/
86
+
87
+ border-right: 1px dashed #ccc; /*右側の線の幅、線種、色*/
60
88
 
61
89
  }
62
90