CSSライブラリを読み込みたい
- 評価
- クリップ 0
- VIEW 285
お世話になります。
Laravelを使用したプロジェクトにCSSライブラリとして
- CSSCO
- Colofilter
などを取り入れたいと考えています。
一例として、CSSCOではhead内へCSSCOを読み込むlinkタグを、そしてbody内のimg要素のclassへクラス属性を指定することがHow toとして示されておりました。
//head内
<link href="path/to/cssco.css" rel="stylesheet" type="text/css">
//body内
<div class="cssco cssco--c1">
<img src="image.png"/>
</div>
CSSライブラリ読み込み手順
そこで以下のような手順で読み込みを行いました。
(1)CSSライブラリ導入予定のlaravelプロジェクト内に「test.blade.php」という動作確認用bladeを作成
(2)LaravelのPublic/imagesディレクトリ内に「avatar.jpg」という画像ファイルを配置
(3)上記に示された通りのコードを記述
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link href="path/to/cssco.css" rel="stylesheet" type="text/css">
<title>@yield('title')</title>
</head>
<body>
<div class="cssco cssco--x1">
<img src="images/avatar.jpg"/>
</div>
</body>
</html>画像は表示されたものの、CSSCOが反映されることはありませんでした。
そこで私は以下のようなことを行いました。
(1)画面ソースの確認
Chromeのブラウザから「ページのソースを確認」を選択し、CSSCOを読み込むlinkタグが表示されていることを確認しました。
しかし、linkタグの
<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">
という部分のリンクをクリックすると、「404 | Not Found」が表示されてしまいました。
(2)CSSライブラリのURLから直接読み込み
CSSCOの公式ドキュメントにはDownloadボタンがあり、そこを押すと以下のような画面が出てきました。
そこで以下のような形でページURLを直接読み込むようにしてみました。
<link href="https://raw.githubusercontent.com/we-are-next/cssco/master/cssco.css" rel="stylesheet" type="text/css">
しかし、これも読み込みができませんでした。ページソースのリンクからは飛ぶことができました。
(3)他のCSSライブラリを試す
先にご紹介したColofilterというCSSライブラリも同様の手順で読み込むことができたため、同様に試した結果、反映しませんでした。
(4)Laravelのsecure_assetを使用してCSSを読み込む
以下のような記述でも読み込めませんでした。
<link href="{{ secure_asset('path/to/colofilter.css') }}" rel="stylesheet">(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 rel="stylesheet" type="text/css" href="csshake.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
との記載がありましたが、下の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が反映されることはありませんでした。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.23%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2019/07/21 07:40
CSSはどこに置いてるんでしょうか。
「読み込めませんでした」が何度もでてきていますが、404にならなかった場合は何を根拠に「読み込めない」と仰っていますか？
起きた現象を具体的に記載してください。