🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

3回答

3707閲覧

LaravelでCSSファイルを参照する際にasset関数が効きません。

hatevexing

総合スコア1

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/12/03 12:57

編集2020/12/03 13:04

現在、LaravelでECサイトをvagrantを用いたローカル環境で作っているのですが、
cssファイルがasset関数を用いた場合、効きません。

現在は、HTMLのまんまの参照をしていた問題なく動いているのですが、
asset()で動かないことがとても疑問で質問させていただきます。
.
.

現在の一応効いているコード

<head> <link rel="stylesheet" href="./css/start.css"> <link rel="stylesheet" href="./css/main.css"> </head>

.
試したが効かなかったコード

<head> <link href="{{ asset('/css/start.css') }}" rel="stylesheet"> <link href="{{ asset('/css/main.css') }}" rel="stylesheet"> </head>

.
.
CSSファイルの場所は、
public > css > main.css
public > css > start.css
です。

細かいことでも、ご質問・お答え、いただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

コメントをしてくださった三名様のおかげで解決できました。
解決方法を書かせていただきます。

原因としては、.envファイルにASSET_URLを追加できていなかったこと、またそこにhttps://~と表記してしまっていたことでした。
これにより、正しいCSSファイルを指定できていませんでした。
Provider/AppServiceProvider内のboost()にて、\URL::forceScheme('https');としていたため、https://~が正しいと思っていましたが、
ASSET_URLhttp://~でhttp://~にすると、CSSが反映されました。

コメントでもご指摘いただいた通り、Laravelというより、ネット通信等に関しての知識・経験不足が仇となりました。

また、これ以降で、httpsに関する、問題が起きそうなので、調べてファイルによって、バラバラにならないよう設定します。

ご回答いただいた皆様、ありがとうございました。

投稿2020/12/04 12:18

hatevexing

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

コメントをしてくださった三名様のおかげで解決できました。
解決方法を書かせていただきます。

原因としては、.envファイルにASSET_URLを追加できていなかったこと、またそこにhttps://~と表記してしまっていたことでした。
これにより、正しいCSSファイルを指定できていませんでした。
Provider/AppServiceProvider内のboost()にて、\URL::forceScheme('https');としていたため、https://~が正しいと思っていましたが、
ASSET_URLhttp://~でhttp://~にすると、CSSが反映されました。

コメントでもご指摘いただいた通り、Laravelというより、ネット通信等に関しての知識・経験不足が仇となりました。

また、これ以降で、httpsに関する、問題が起きそうなので、調べてファイルによって、バラバラにならないよう設定します。

ご回答いただいた皆様、ありがとうございました。

投稿2020/12/04 12:04

hatevexing

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

Laravelのドキュメントには「The asset function generates a URL for an asset using the current scheme of the request (HTTP or HTTPS)」と書いてあるので、asset関数には絶対パスではなく相対パスを渡すものかと思われます。

投稿2020/12/03 13:30

cerfweb

総合スコア1907

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatevexing

2020/12/03 13:45

ご回答ありがとうございます。 相対パスについて、ここで質問させていただく前にも一度試し、またご指摘いただいたので再度試してみました。 相対パスについて調べた上での、僕の認識なのですが、asset関数の部分を asset('./css/start.css') のようにすればいいのでしょうか?これを試したのですが、cssは効きませんでした。 相対パスに対する認識が誤っている場合は、ご指摘お願いいたします。
cerfweb

2020/12/03 14:07

asset('css/start.css') は試されましたか?
kyoya0819

2020/12/03 23:37

.envの設定もご確認ください。
m.ts10806

2020/12/04 00:10

パスを試すとき、ブラウザの「ソースを表示」でパスを確かめるのが定石です。 そこからアクセスできなければパスが間違ってるわけで、PHPコードだけ睨んでても前には進みません。
hatevexing

2020/12/04 04:28

皆様、ご回答ありがとうございます。 cerfweb様、asset('css/start.css')も試しましたが、効かなかったです。 kyoya0819様、.envファイルに、ASSET_URLも追加させましたが、CSSが効きませんでした。 他に、asset関数に関して、追加すべきものがあるのでしょうか? m.ts10806様、chromeのページソースの表示でも確認していますが、そこから表示させたcssファイルは全て、表示されませんでした。 デベロッパーツールでは、試した全てで、「net::ERR_ABORTED 404」のエラーが出ています。
m.ts10806

2020/12/04 05:17

はい。 では「どのパスならブラウザに直打ちでも確認できるか」を確認してください。 もちろんキャッシュクリアは必須ですし、ファイル名の確認、そこに本当にファイルがあるかの確認も必要です。 Laravel、PHP以前のWebの基礎部分です。
hatevexing

2020/12/04 06:49

ご返事ありがとうございます。 cssが反映されるものと、asset関数では反映されないもののURI等見比べながら、.envファイルをいじっていたら、asset関数でもCSSが反映されました。 URIは意識しているつもりでしたが、甘かったようです。ご指摘感謝いたします。 原因としては、,envファイルにASSET_URLを追加できていなかったこと、またそこにhttps://~と表記してしまっていたことでした。 Provider/AppServiceProvider内のboost()にて、\URL::forceScheme('https');としていたため、https://~が正しいと思っていましたが、 ASSET_URLhttp://~でhttp://~にすると、CSSが反映されました。 ご回答いただいた、三名様ありがとうございました。
cerfweb

2020/12/04 07:53

kyoya0819さんのご指摘が合っていたようなので、kyoya0819さんに改めて別回答として提示していただき、そちらをベストアンサーにされてはいかがでしょうか。
hatevexing

2020/12/04 08:26

すみません、今回質問させていただいたのが初めてでして、ご迷惑おかけします。 個人的には、cerfweb様に相対パスの重要性もご指摘いただき、他お二方様のご回答、全て問題解決に、必要であったと感じ、代表して最初にご回答していただいたcerfweb様をベストアンサーに選ばさせていただきました。 cerfweb様が上記の様におっしゃるのであれば、他の方もそのように望まれた場合、回答を改めて別で提示していただければ、そのようにさせていただきます。
kyoya0819

2020/12/04 11:27

私はあくまでも「.envの設定の見直し」を助言しただけで、そこからASSET_URLの設定ミスを発見されたのは質問者さんです。現状のベストアンサーではコメント欄まで読まないと原因が分かりませんので質問者さんが自己解決なさっても良いと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問