質問編集履歴

4

誤字

2021/02/26 01:59

投稿

YukiTani
YukiTani

スコア19

test CHANGED
File without changes
test CHANGED
@@ -160,7 +160,7 @@
160
160
 
161
161
  ダウンロードして記述を変える必要があるといことが理解できた。
162
162
 
163
-
163
+ 他の方法もあると思うので、今後は色々開拓していきたい。
164
164
 
165
165
 
166
166
 

3

誤字

2021/02/26 01:59

投稿

YukiTani
YukiTani

スコア19

test CHANGED
File without changes
test CHANGED
@@ -146,7 +146,7 @@
146
146
 
147
147
 
148
148
 
149
- Chrome拡張が出しているもののようで、無害なら気にするひつようはないようです。
149
+ Chrome拡張が出しているもののようで、無害なら気にする必要はないようです。
150
150
 
151
151
 
152
152
 

2

変更点、内容が全て保存出来ていなかった。

2021/02/26 01:58

投稿

YukiTani
YukiTani

スコア19

test CHANGED
File without changes
test CHANGED
@@ -74,7 +74,93 @@
74
74
 
75
75
  これをやることで、エラーメッセージが解消されました。
76
76
 
77
- エラーは解消されましたが、表示は変わらずの状況
77
+ エラーは解消されましたが、表示は変わらずの状況→解決
78
+
79
+
80
+
81
+ 解決方法2:
82
+
83
+ bootstrapをダウンロード(Compiled CSS and JS)
84
+
85
+ ダウンロードしたファイルの中の”bootstrap.css”をpublic>css>に保存する。
86
+
87
+ ```php
88
+
89
+ <!DOCTYPE html>
90
+
91
+ <html lang="ja">
92
+
93
+ <head>
94
+
95
+ <meta charset="utf-8">
96
+
97
+ <meta name="viewport" content="width=device-width, initial-scale=1">
98
+
99
+
100
+
101
+ <!-- CSRF Token -->
102
+
103
+ <meta name="csrf-token" content="{{ csrf_token() }}">
104
+
105
+
106
+
107
+ <title>{{ config('app.name', 'Laravel') }}</title>
108
+
109
+
110
+
111
+ <!-- Scripts -->
112
+
113
+ <script src="{{ asset('js/app.js') }}" defer></script>
114
+
115
+
116
+
117
+ <!-- Fonts -->
118
+
119
+ <link rel="dns-prefetch" href="//fonts.gstatic.com">
120
+
121
+ <!-- Styles -->
122
+
123
+ ーーーーーーーーーーーーーーーーーーーーーー↓この記述に変更(<head>内にいれること)
124
+
125
+ <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
126
+
127
+ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
128
+
129
+ </head>
130
+
131
+ ```
132
+
133
+ 参考記事 https://teratail.com/questions/241709
134
+
135
+
136
+
137
+ bootstrapのCSSがしっかり表示されました。
138
+
139
+ ![イメージ説明](54e2c8d94a32709a46bd1310492ea915.png)
140
+
141
+
142
+
143
+ 検証ツールには、
144
+
145
+ DevTools failed to load SourceMap: Could not load content for http://localhost:8000/css/bootstrap.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
146
+
147
+
148
+
149
+ Chrome拡張が出しているもののようで、無害なら気にするひつようはないようです。
150
+
151
+
152
+
153
+ https://teratail.com/questions/269892
154
+
155
+
156
+
157
+ 今回理解できたこと。
158
+
159
+ bootstrap、CSSのフレームワークをLaravelではデフォルトで使用してくれると思っていた。
160
+
161
+ ダウンロードして記述を変える必要があるといことが理解できた。
162
+
163
+
78
164
 
79
165
 
80
166
 

1

変更点、内容が全て保存出来ていなかった。

2021/02/26 01:56

投稿

YukiTani
YukiTani

スコア19

test CHANGED
File without changes
test CHANGED
@@ -40,18 +40,6 @@
40
40
 
41
41
  ```
42
42
 
43
- ```php
44
-
45
- my-laravel-app/resources/css/app.css
46
-
47
- ファイルのみで、記述なし(エラーで言われているファイルを作成)
48
-
49
-
50
-
51
-
52
-
53
- ```
54
-
55
43
 
56
44
 
57
45
  ### 試したこと
@@ -62,15 +50,31 @@
62
50
 
63
51
  my-laravel-app/resources/css/app.css、(cssをつくり、app.cssファイル)作成
64
52
 
65
- エラー解消されず、
53
+ エラー解消さない →削除済
66
-
67
- ![イメージ説明](96af03ff87314e8af8e27df2c20c233f.png)
68
54
 
69
55
 
70
56
 
71
57
  cssが反映されないので、my-laravel-app/resources/views/layouts/app.blade.phpの確認
72
58
 
73
59
  →ミスタイプ、インデント、閉じタグのチェック、
60
+
61
+
62
+
63
+ 解決方法: https://readouble.com/laravel/7.x/ja/mix.html
64
+
65
+ Laravel Mixを使用する。
66
+
67
+ npm install コマンドを実行
68
+
69
+ npmとは、・Node Package Managerの略です。
70
+
71
+ フロントエンドで使用するパッケージの管理をするもの(依存解決、一括インストールなど)
72
+
73
+
74
+
75
+ これをやることで、エラーメッセージが解消されました。
76
+
77
+ エラーは解消されましたが、表示は変わらずの状況
74
78
 
75
79
 
76
80