質問編集履歴

1

修正・追記

2016/09/15 01:55

投稿

nekomura
nekomura

スコア132

test CHANGED
File without changes
test CHANGED
@@ -34,33 +34,169 @@
34
34
 
35
35
  該当部分のソースは以下です。
36
36
 
37
+ **htmlクラス**
38
+
37
39
  ```ここに言語を入力
38
40
 
39
- <--! htmlクラス -->
40
-
41
-
42
-
43
- <li class="dropdown active">
44
-
45
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><span class="fa fa-bars fa-large" aria-hidden="true"></span></a>
46
-
47
- <ul class="dropdown-menu" role="menu">
48
-
49
- <li><a href="#">menu</a></li>
50
-
51
- <li><a href="#">menu2</a></li>
52
-
53
- <li><a href="#">menu3</a></li>
54
-
55
- </ul>
56
-
57
- </li>
58
-
59
-
60
-
61
-
62
-
63
- <--! cssクラス -->
41
+
42
+
43
+ <!-- top nav -->
44
+
45
+ <nav class="navbar navbar-default navbar-fixed-top">
46
+
47
+
48
+
49
+ <div class="container">
50
+
51
+
52
+
53
+ <div class="navbar-header">
54
+
55
+
56
+
57
+ <!-- logo img -->
58
+
59
+ <a class="navbar-brand" href="">
60
+
61
+ <img src="images/html.png" id="logo-img">
62
+
63
+ </a>
64
+
65
+
66
+
67
+ <!-- toggle -->
68
+
69
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
70
+
71
+ <span class="icon-bar"></span>
72
+
73
+ <span class="icon-bar"></span>
74
+
75
+ <span class="icon-bar"></span>
76
+
77
+ </button>
78
+
79
+
80
+
81
+ </div>
82
+
83
+
84
+
85
+ <!-- top menu -->
86
+
87
+ <div class="collapse navbar-collapse" id="top-nav">
88
+
89
+
90
+
91
+ <!-- main navbar -->
92
+
93
+ <ul class="nav navbar-nav">
94
+
95
+ <li><a href="inquiry.html">お問い合わせ</a></li>
96
+
97
+ </ul>
98
+
99
+
100
+
101
+ <!-- right navbar -->
102
+
103
+ <ul class="nav navbar-nav navbar-right">
104
+
105
+ <li><a href=""><i class="fa fa-sign-in"></i> ログイン</a></li>
106
+
107
+ <li><a href="">製品情報</a></li>
108
+
109
+ <li><a href="">デバイス情報</a></li>
110
+
111
+ <li><a href="">サポート</a></li>
112
+
113
+ <li class="dropdown active">
114
+
115
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><span class="fa fa-bars fa-large" aria-hidden="true"></span></a>
116
+
117
+ <ul class="dropdown-menu" role="menu">
118
+
119
+ <li><a href="#">menu</a></li>
120
+
121
+ <li><a href="#">menu2</a></li>
122
+
123
+ <li><a href="#">menu3</a></li>
124
+
125
+ </ul>
126
+
127
+ </li>
128
+
129
+ </ul>
130
+
131
+ </div>
132
+
133
+ </div>
134
+
135
+ <!-- end container -->
136
+
137
+ </nav>
138
+
139
+ <!-- end nav -->
140
+
141
+
142
+
143
+
144
+
145
+ ```
146
+
147
+ ** cssクラス **(コメント部分もお読みください)
148
+
149
+ ```
150
+
151
+ /*NAVメニュー*/
152
+
153
+ .navbar{
154
+
155
+ border-radius: 0;
156
+
157
+ border: none;
158
+
159
+ background-color: #003355; <--! ここで背景色を設定しており、該当箇所をドロップダウンにする前は3本線のアイコン部分の背景色もこの色でした -->
160
+
161
+ }
162
+
163
+
164
+
165
+ #logo-img{
166
+
167
+ height: 20px;
168
+
169
+ }
170
+
171
+
172
+
173
+ .navbar-default .navbar-nav >li > a{
174
+
175
+ color: #fff;
176
+
177
+ }
178
+
179
+
180
+
181
+ .navbar-default .navbar-nav >li > a:hover{
182
+
183
+ color: #aaa;
184
+
185
+ }
186
+
187
+
188
+
189
+ .google-icon{
190
+
191
+ max-width: 180px;
192
+
193
+ height: auto;
194
+
195
+
196
+
197
+ }
198
+
199
+
64
200
 
65
201
  .dropdown-toggle{ <--! ←出来ない -->
66
202
 
@@ -72,11 +208,13 @@
72
208
 
73
209
 
74
210
 
75
- .fa{ <--! ←アイコンは白くなるのですが、可視性のため実際はコメントアウトしています。 -->
211
+ /*.fa{ <--! ←アイコンは白くなるのですが、現在は背景が白となってしまっているの為、可視性の為に実際はコメントアウトしています。 -->
76
212
 
77
213
  color:white;
78
214
 
79
- }
215
+ }*/
216
+
217
+
80
218
 
81
219
  ```
82
220