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

編集履歴

質問編集履歴

10

ソースコード説明文

2021/12/10 06:53

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
File without changes
body CHANGED
@@ -15,7 +15,7 @@
15
15
  ### 該当のソースコード
16
16
 
17
17
  該当箇所が不明瞭なので、ご指摘いただければ追加・修正いたします。
18
- heroyctで確認していただき、ソースコード自体には不備がないことが分かりました。
18
+ JSFiddleで確認していただき、ソースコード自体には不備がないことが分かりました。
19
19
  どこかで打ち消されているのかもしれません。
20
20
 
21
21
  ```HTML

9

ソースコード

2021/12/10 06:53

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
File without changes
body CHANGED
@@ -20,11 +20,19 @@
20
20
 
21
21
  ```HTML
22
22
  <div class="nav-fix-pos">
23
- <nav id="menubar">
23
+ <nav id="menubar">
24
- <ul>
24
+ <ul>
25
- <li><a href="index.html">例</a></li>
25
+ <li><a href="index.html">メニュー</a></li>
26
+ <li><a href="index.html">メニュー</a></li>
27
+ <li><a href="index.html">メニュー</a></li>
28
+ <li><a href="index.html">メニュー</a></li>
29
+ <li><a href="index.html">メニュー</a></li>
30
+ <li><a href="index.html">メニュー</a></li>
31
+ <li><a href="index.html">メニュー</a></li>
32
+ <li><a href="index.html">メニュー</a></li>
33
+ <li><a href="index.html">メニュー</a></li>
26
- </ul>
34
+ </ul>
27
- </nav>
35
+ </nav>
28
36
  </div>
29
37
  ```
30
38
 

8

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

2021/12/10 06:51

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
File without changes
body CHANGED
@@ -15,7 +15,7 @@
15
15
  ### 該当のソースコード
16
16
 
17
17
  該当箇所が不明瞭なので、ご指摘いただければ追加・修正いたします。
18
- ソースコード自体には不備がないことが分かりました。
18
+ heroyctで確認していただき、ソースコード自体には不備がないことが分かりました。
19
19
  どこかで打ち消されているのかもしれません。
20
20
 
21
21
  ```HTML

7

ソースコード追加

2021/12/10 06:50

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
File without changes
body CHANGED
@@ -33,19 +33,63 @@
33
33
  list-style: none;
34
34
  }
35
35
 
36
-
36
+ /*メインメニュー
37
+ ---------------------------------------------------------------------------*/
38
+ /*メニューブロックの設定*/
39
+ #menubar {
40
+ max-width: 1200px; /*最大幅。#header、.contents、#pagetopと数字を合わせる*/
41
+ position: relative;z-index: 2;
42
+ margin: 0 auto;
43
+ background: #F0C; /*背景色（古いブラウザ用）*/
44
+ background: rgba(255,255,255,0.9); /*背景色。255,255,255は白の事で、最後の0.9は透明度90%の事。*/
45
+ height: 45px; /*メニューブロックの高さ。ここを変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
46
+ padding: 10px 0; /*上下、左右へあける余白。ここの10pxの数字を変更する場合、fixmenu.cssの「body.is-fixed .header」も変更する。*/
47
+ }
48
+ /*トップページのメニューブロックの設定*/
49
+ #top #menubar {
50
+ border-radius: 10px; /*角丸のサイズ*/
51
+ -webkit-box-shadow: 2px 5px 8px rgba(0,0,0,0.2); /*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の0.2は透明度20%の事。*/
52
+ box-shadow: 2px 5px 8px rgba(0,0,0,0.2); /*同上*/
53
+ }
37
54
  /*メニュー１個あたりの設定*/
38
55
  #menubar li {
56
+ float: left;
39
- float: left; /*左に回り込み*/
57
+ /*左に回り込み*/
58
+ width: 11.9%;
40
- width: 11.9%; /*メニュー幅（※8個の場合）*/
59
+ /*メニュー幅（※8個の場合）*/
41
- }
60
+ }
61
+
42
62
  #menubar li a {
43
63
  text-decoration: none;
44
- display: inline-block;
64
+ display: inline-block;
45
- text-align: center;
65
+ text-align: center;
66
+ line-height: 45px;
46
- line-height: 45px; /*行間（高さ）*/
67
+ /*行間（高さ）*/
47
- border-right: 1px dashed #ccc; /*右側の線の幅、線種、色*/
68
+ border-right: 1px dashed #ccc;
69
+ /*右側の線の幅、線種、色*/
48
70
  }
71
+
72
+ /*１個目メニューの設定*/
73
+ #menubar li:first-child {
74
+ margin-left: 2.8%; /*左側にバランスよく余白を入れる*/
75
+ }
76
+ #menubar li:first-child a {
77
+ border-left: 1px dashed #ccc; /*左側の線の幅、線種、色*/
78
+ }
79
+ /*マウスオン時と、現在表示中(current)設定*/
80
+ #menubar li a:hover,
81
+ #menubar li.current a {
82
+ color: #fff; /*文字色*/
83
+ background:#f0c; /*背景色*/
84
+ }
85
+ /*小さい端末用(画面幅800px以下)メニューを表示させない*/
86
+ #menubar-s {
87
+ display: none;
88
+ }
89
+ /*３本バーアイコンを表示させない*/
90
+ #menubar_hdr {
91
+ display: none;
92
+ }
49
93
  ```
50
94
 
51
95
  ### 試したこと

6

試したこと追加

2021/12/10 06:49

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,7 @@
3
3
  ＣSS初心者です。
4
4
  作成した担当者がやめてしまい、聞こうにも連絡が取れないので困っています。
5
5
 
6
- Google Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
6
+ Google Chromeで閲覧する際、縦になっているnavbarの要素を横並びにしたいです。
7
7
 
8
8
  ### 発生している問題・エラーメッセージ
9
9
 
@@ -15,8 +15,9 @@
15
15
  ### 該当のソースコード
16
16
 
17
17
  該当箇所が不明瞭なので、ご指摘いただければ追加・修正いたします。
18
+ ソースコード自体には不備がないことが分かりました。
19
+ どこかで打ち消されているのかもしれません。
18
20
 
19
-
20
21
  ```HTML
21
22
  <div class="nav-fix-pos">
22
23
  <nav id="menubar">
@@ -48,6 +49,7 @@
48
49
  ```
49
50
 
50
51
  ### 試したこと
52
+ ・flexを使用
51
53
  ・floatプロパティ追加
52
54
  ・親要素にnon-wrapを指定
53
55
  ・親要素にdisplay:flexを指定

5

タイトル変更

2021/12/10 06:46

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
@@ -1,1 +1,1 @@
1
- Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたい
1
+ Google Chromeで閲覧した際、縦になってしまうnavbarの要素を横並びにしたい
body CHANGED
@@ -3,14 +3,13 @@
3
3
  ＣSS初心者です。
4
4
  作成した担当者がやめてしまい、聞こうにも連絡が取れないので困っています。
5
5
 
6
- Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
6
+ Google Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
7
7
 
8
8
  ### 発生している問題・エラーメッセージ
9
9
 
10
10
  ```
11
- エッジで確認すると、navbarの要素の横並びができているのですが、
11
+ Microsoft Edgeで確認すると、navbarの要素の横並びができているのですが、
12
- Chromeで確認すると、navbarの要素の横並びができません。
12
+ Google Chromeで確認すると、navbarの要素の横並びができません。
13
-
14
13
  ```
15
14
 
16
15
  ### 該当のソースコード

4

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

2021/12/10 05:08

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
@@ -1,1 +1,1 @@
1
- グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたい
1
+ Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたい
body CHANGED
@@ -3,13 +3,13 @@
3
3
  ＣSS初心者です。
4
4
  作成した担当者がやめてしまい、聞こうにも連絡が取れないので困っています。
5
5
 
6
- グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
6
+ Chromeで閲覧時、縦になっているnavbarの要素を横並びにしたいです。
7
7
 
8
8
  ### 発生している問題・エラーメッセージ
9
9
 
10
10
  ```
11
11
  エッジで確認すると、navbarの要素の横並びができているのですが、
12
- グーグルで確認すると、navbarの要素の横並びができません。
12
+ Chromeで確認すると、navbarの要素の横並びができません。
13
13
 
14
14
  ```
15
15
 

3

試したこと追加

2021/12/10 03:42

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
File without changes
body CHANGED
@@ -49,6 +49,7 @@
49
49
  ```
50
50
 
51
51
  ### 試したこと
52
+ ・floatプロパティ追加
52
53
  ・親要素にnon-wrapを指定
53
54
  ・親要素にdisplay:flexを指定
54
55
  ・display:blockを消す

2

ソースコードの修正

2021/12/10 03:37

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
File without changes
body CHANGED
@@ -23,6 +23,9 @@
23
23
  <nav id="menubar">
24
24
  <ul>
25
25
  <li><a href="index.html">例</a></li>
26
+ </ul>
27
+ </nav>
28
+ </div>
26
29
  ```
27
30
 
28
31
  ```CSS

1

子要素の追加

2021/12/10 03:35

投稿

Ponppp123
Ponppp123

スコア1

title CHANGED
@@ -1,1 +1,1 @@
1
- グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたい。
1
+ グーグルで閲覧時、縦になっているnavbarの要素を横並びにしたい
body CHANGED
@@ -22,13 +22,27 @@
22
22
  <div class="nav-fix-pos">
23
23
  <nav id="menubar">
24
24
  <ul>
25
- <li><a href="index.html">例ジ</a></li>
25
+ <li><a href="index.html">例</a></li>
26
26
  ```
27
27
 
28
28
  ```CSS
29
29
  ul {
30
30
  list-style: none;
31
31
  }
32
+
33
+
34
+ /*メニュー１個あたりの設定*/
35
+ #menubar li {
36
+ float: left; /*左に回り込み*/
37
+ width: 11.9%; /*メニュー幅（※8個の場合）*/
38
+ }
39
+ #menubar li a {
40
+ text-decoration: none;
41
+ display: inline-block;
42
+ text-align: center;
43
+ line-height: 45px; /*行間（高さ）*/
44
+ border-right: 1px dashed #ccc; /*右側の線の幅、線種、色*/
45
+ }
32
46
  ```
33
47
 
34
48
  ### 試したこと