質問をすることでしか得られない、回答やアドバイスがある。

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

ただいまの
回答率

87.34%

CSSライブラリを読み込みたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 497

お世話になります。

Laravelを使用したプロジェクトにCSSライブラリとして

一例として、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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/07/21 07:40

    CSSはどこに置いてるんでしょうか。
    「読み込めませんでした」が何度もでてきていますが、404にならなかった場合は何を根拠に「読み込めない」と仰っていますか?
    起きた現象を具体的に記載してください。

    キャンセル

回答 1

checkベストアンサー

+1

path/to/は「自分で置いたファイルパスに書き換えてね」ということなので、そのURLに置き換えてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る