質問: お世話になります。 Laravelを使用したプロジェクトにCSSライブラリとして * CSSCO * Colofilter などを取り入れたいと考えています。 一例として、CSSCOではhead内へCSSCOを読み込むlinkタグを、そしてbody内のimg要素のclassへクラス属性を指定することがHow toとして示されておりました。 ``` //head内 //body内 ``` ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/10579d9210e01e036aacd9634338f599.png) CSSライブラリ読み込み手順 -------------- そこで以下のような手順で読み込みを行いました。 (1)CSSライブラリ導入予定のlaravelプロジェクト内に「test.blade.php」という動作確認用bladeを作成 (2)LaravelのPublic/imagesディレクトリ内に「avatar.jpg」という画像ファイルを配置 (3)上記に示された通りのコードを記述 ``` @yield('title') ``` 画像は表示されたものの、CSSCOが反映されることはありませんでした。 そこで私は以下のようなことを行いました。 ### (1)画面ソースの確認 Chromeのブラウザから「ページのソースを確認」を選択し、CSSCOを読み込むlinkタグが表示されていることを確認しました。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ee1e9d8a8993cd35da4345b6cf7115cb.png) しかし、linkタグの ``` ``` という部分のリンクをクリックすると、「404 | Not Found」が表示されてしまいました。 ### (2)CSSライブラリのURLから直接読み込み CSSCOの公式ドキュメントにはDownloadボタンがあり、そこを押すと以下のような画面が出てきました。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/231d2f9a02b3f272dbbee11a3398db48.png) そこで以下のような形でページURLを直接読み込むようにしてみました。 ``` ``` しかし、これも読み込みができませんでした。ページソースのリンクからは飛ぶことができました。 ### (3)他のCSSライブラリを試す 先にご紹介したColofilterというCSSライブラリも同様の手順で読み込むことができたため、同様に試した結果、反映しませんでした。 ### (4)Laravelのsecure_assetを使用してCSSを読み込む 以下のような記述でも読み込めませんでした。 ``` ``` ### (5)htmlファイルで試してみる CSSライブラリとLaravelとの相性が悪いのかと思い、test.blade.phpをhtmlファイルに変更し、同様にCSSが反映されるか試しましたが、反映しませんでした。 色々と手は尽くしましたが、CSSライブラリを読み込むことが自分の力ではできませんでした。 また「CSS ライブラリ Laravel 読み込み」などのキーワードをもとに検索しましたが、 CSSフレームワークについての記事や、 別ディレクトリに置かれたCSSファイルが読み込めないという問題に対する解決策しか記載されておらず、 原因の特定に至りませんでした。 もし原因がお分かりの方がいらっしゃいましたら、CSSCOに限らず、CSSライブラリの読み込み方についても教えていただけますと幸いです。 よろしくお願い致します。 現在の環境 ----- 【MacBook Air (13-inch, Early 2015), 8 GB 1600 MHz DDR3, AWS, Laravel5.8.21】 追記 -- 以下の手順で、CSShakeというCSSライブラリを反映させることができました。 (1)Terminalにて「git clone https://github.com/elrumordelaluz/csshake.git」 (2)head内にてCSShakeのlinkタグを貼付 CSShakeのオフィシャルドキュメントには、 ``` ``` との記載がありましたが、下のlinkタグのみ、CSSライブラリが反映されました。 そこでCSSCOも、git cloneをすれば反映される可能性があると考え、上記(1)と同様に、 ``` git clone https://github.com/we-are-next/cssco.git ``` とターミナルから入力した結果、 ``` Cloning into 'cssco'... remote: Enumerating objects: 593, done. remote: Total 593 (delta 0), reused 0 (delta 0), pack-reused 593 Receiving objects: 100% (593/593), 4.66 MiB | 2.76 MiB/s, done. Resolving deltas: 100% (389/389), done. ``` と表示されクローニングが完了しました。 しかし、やはりCSSCOが反映されることはありませんでした。
回答: `path/to/`は「自分で置いたファイルパスに書き換えてね」ということなので、そのURLに置き換えてください。