teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Railsアプリケーションの本番環境とローカル環境でヘッダーのビューが違う。

編集履歴

質問編集履歴

5

関係のない写真の削除

2021/03/12 08:01

投稿

TTTTaison
TTTTaison

スコア6

title CHANGED
File without changes
body CHANGED
@@ -220,8 +220,6 @@
220
220
  Font Awesome
221
221
  を導入しています。
222
222
 
223
- 本番環境のログ
224
- ![イメージ説明](d736fbb699ca8643a8521beb11ebaf54.jpeg)
225
223
 
226
224
  コンソールのエラー一覧
227
225
  ![イメージ説明](d5372af0dd05a9493771dab666e75b41.png)

4

エラー発見

2021/03/12 08:01

投稿

TTTTaison
TTTTaison

スコア6

title CHANGED
File without changes
body CHANGED
@@ -221,4 +221,9 @@
221
221
  を導入しています。
222
222
 
223
223
  本番環境のログ
224
- ![イメージ説明](d736fbb699ca8643a8521beb11ebaf54.jpeg)
224
+ ![イメージ説明](d736fbb699ca8643a8521beb11ebaf54.jpeg)
225
+
226
+ コンソールのエラー一覧
227
+ ![イメージ説明](d5372af0dd05a9493771dab666e75b41.png)
228
+
229
+ コンソールでみたところおそらくリセットCSSが読み込まれていないのと、リスト表示する際に出てくる黒丸が出てきているのだとわかりました。

3

本番環境のログの追記

2021/03/12 07:52

投稿

TTTTaison
TTTTaison

スコア6

title CHANGED
File without changes
body CHANGED
@@ -218,4 +218,7 @@
218
218
  rails 6.0.0
219
219
  bootstrap4
220
220
  Font Awesome
221
- を導入しています。
221
+ を導入しています。
222
+
223
+ 本番環境のログ
224
+ ![イメージ説明](d736fbb699ca8643a8521beb11ebaf54.jpeg)

2

情報の訂正です

2021/03/12 07:37

投稿

TTTTaison
TTTTaison

スコア6

title CHANGED
File without changes
body CHANGED
@@ -94,113 +94,117 @@
94
94
  ```
95
95
 
96
96
  ```css
97
-
98
- body {
97
+ .header{
98
+ width: 100vw;
99
+ background-color: #006669;
100
+ height: 100px;
99
- font-size: .875rem;
101
+ position: absolute;
102
+ display: flex;
103
+ justify-content: space-between;
104
+ margin-bottom: 5px;
100
105
  }
101
-
102
- .feather {
106
+ .logo-block {
103
- width: 16px;
104
- height: 16px;
107
+ height: 60px;
108
+ width: 200px;
109
+ margin: 20px 0px 20px 20px;
110
+ padding: 15px;
105
- vertical-align: text-bottom;
111
+ position: relative;
106
112
  }
107
-
108
- /*
109
- * Sidebar
110
- */
111
-
112
- .sidebar {
113
+ .logo {
114
+ margin-left: 20px;
113
- position: fixed;
115
+ font-size: 20px;
114
- top: 0;
115
- /* rtl:raw:
116
- right: 0;
117
- */
118
- bottom: 0;
119
- /* rtl:remove */
120
- left: 0;
121
- z-index: 100; /* Behind the navbar */
122
- padding: 48px 0 0; /* Height of navbar */
123
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
124
116
  }
125
117
 
126
- @media (max-width: 767.98px) {
127
- .sidebar {
118
+ h2 {
128
- top: 5rem;
119
+ color: #fff;
129
- }
130
120
  }
131
-
132
- .sidebar-sticky {
121
+ .mypage-block {
133
- position: relative;
134
- top: 0;
135
- height: calc(100vh - 48px);
122
+ height: 60px;
123
+ width: 500px;
124
+ margin: 20px 20px 20px 20px;
125
+ display: flex;
126
+ justify-content: flex-end;
136
- padding-top: .5rem;
127
+ padding-top: 15px;
137
- overflow-x: hidden;
138
- overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
139
128
  }
140
-
141
- .sidebar .nav-link {
129
+ .header-list{
142
- font-weight: 500;
130
+ margin-left: 0.5em;
143
- color: #333;
144
131
  }
145
132
 
146
- .sidebar .nav-link .feather {
133
+ .search{
147
- margin-right: 4px;
134
+ margin-right: 0.5em;
148
- color: #727272;
149
135
  }
150
136
 
137
+ .img-circle {
138
+ border-radius: 50%;
139
+ background-position: left top;
151
- .sidebar .nav-link.active {
140
+ border: 3px solid #00cc00;
152
- color: #007bff;
153
141
  }
154
142
 
155
- .sidebar .nav-link:hover .feather,
156
- .sidebar .nav-link.active .feather {
143
+ dl.searchbox{
144
+ width: 250px;
157
- color: inherit;
145
+ position:relative;
146
+ background-color:#fff;
147
+ border:1px solid #aaa;
148
+ border-radius:6px;
158
149
  }
159
-
160
- .sidebar-heading {
150
+ dl.searchbox dt{
161
- font-size: .75rem;
151
+ padding:3px;
162
- text-transform: uppercase;
163
152
  }
164
-
165
- /*
166
- * Navbar
167
- */
168
-
169
- .navbar-brand {
153
+ dl.searchbox dt input{
154
+ width:70%;
170
- padding-top: .75rem;
155
+ height:30px;
171
- padding-bottom: .75rem;
172
- font-size: 1rem;
156
+ line-height:30px;
173
- background-color: rgba(0, 0, 0, .25);
157
+ background:none;
174
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
158
+ border:none;
175
159
  }
176
-
177
- .navbar .navbar-toggler {
160
+ dl.searchbox dd{
161
+ position:absolute;
178
- top: .25rem;
162
+ top:1px;
179
- right: 1rem;
163
+ right:1px;
164
+ width:30%;
180
165
  }
166
+ .search-btn{
167
+ display:block;
168
+ background:#5fad35;
169
+ width:100%;
170
+ height:36px;
171
+ line-height:36px;
172
+ border:none;
173
+ border-radius: 0 6px 6px 0;
174
+ color:#FFF;
175
+ }
181
176
 
182
- .navbar .form-control {
177
+ .search-btn:hover {
183
- padding: .75rem 1rem;
184
- border-width: 0;
185
- border-radius: 0;
178
+ background:#228B22;
186
179
  }
187
180
 
181
+ .create-btn{
182
+ margin-top: 2px;
188
- .form-control-dark {
183
+ background-color: #5fad35;
184
+ height: 36px;
185
+ border: none;
186
+ border-radius: 6px;
189
- color: #fff;
187
+ color: #FFF;
190
- background-color: rgba(255, 255, 255, .1);
191
- border-color: rgba(255, 255, 255, .1);
192
188
  }
193
189
 
194
- .form-control-dark:focus {
190
+ .create-btn:hover {
195
- border-color: transparent;
191
+ background: #228b22;
196
- box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
197
192
  }
198
193
 
199
- .pagination{
194
+ .n-circle {
195
+ position: absolute;
200
- margin-left: 27em;
196
+ padding-left: 1rem;
197
+ padding-top: 0rem;
198
+ color: #efa04c;
201
199
  }
200
+ .fa-bell{
201
+ color: #FFF;
202
+ margin-top: 5px;
203
+ }
202
204
 
203
205
 
206
+
207
+
204
208
  ```
205
209
 
206
210
  ### 試したこと

1

情報の追記

2021/03/12 07:13

投稿

TTTTaison
TTTTaison

スコア6

title CHANGED
File without changes
body CHANGED
@@ -205,8 +205,10 @@
205
205
 
206
206
  ### 試したこと
207
207
 
208
- webpackerとcssがごっちゃのディレクトリ構造になっているからエラーが出ているのかと思い、Webpackerへの移行を試みましたが、難しくてできませんでした。
208
+ webpackerとcssがごっちゃのディレクトリ構造になっているからエラーが出ているのかと思い、Webpackerへの移行を試みましたが、難しくてできませんでした。ファイルはこのような構造になっています。
209
209
 
210
+ ![ディレクトリ構造](8bc929fc071c8a62beff45e881fe7af1.png)
211
+
210
212
  ### 補足情報（FW/ツールのバージョンなど）
211
213
 
212
214
  rails 6.0.0