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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1367閲覧

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

HirakuMorishima

総合スコア29

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/20 22:33

編集2019/07/20 22:55

お世話になります。

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

などを取り入れたいと考えています。

一例として、CSSCOではhead内へCSSCOを読み込むlinkタグを、そしてbody内のimg要素のclassへクラス属性を指定することがHow toとして示されておりました。

php

1//head内 2<link href="path/to/cssco.css" rel="stylesheet" type="text/css"> 3 //body内 4<div class="cssco cssco--c1"> 5<img src="image.png"/> 6</div>

イメージ説明

##CSSライブラリ読み込み手順
そこで以下のような手順で読み込みを行いました。

(1)CSSライブラリ導入予定のlaravelプロジェクト内に「test.blade.php」という動作確認用bladeを作成
(2)LaravelのPublic/imagesディレクトリ内に「avatar.jpg」という画像ファイルを配置
(3)上記に示された通りのコードを記述

php

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <link href="path/to/cssco.css" rel="stylesheet" type="text/css"> 6 <title>@yield('title')</title> 7 </head> 8 <body> 9 <div class="cssco cssco--x1"> 10 <img src="images/avatar.jpg"/> 11 </div> 12 </body> 13</html>

画像は表示されたものの、CSSCOが反映されることはありませんでした。

そこで私は以下のようなことを行いました。
###(1)画面ソースの確認
Chromeのブラウザから「ページのソースを確認」を選択し、CSSCOを読み込むlinkタグが表示されていることを確認しました。
イメージ説明

しかし、linkタグの

php

1<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">

という部分のリンクをクリックすると、「404 | Not Found」が表示されてしまいました。
###(2)CSSライブラリのURLから直接読み込み
CSSCOの公式ドキュメントにはDownloadボタンがあり、そこを押すと以下のような画面が出てきました。
イメージ説明
そこで以下のような形でページURLを直接読み込むようにしてみました。

php

1<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を読み込む
以下のような記述でも読み込めませんでした。

php

1<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のオフィシャルドキュメントには、

php

1<link rel="stylesheet" type="text/css" href="csshake.min.css"> 2<!-- or from surge.sh --> 3<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">

との記載がありましたが、下のlinkタグのみ、CSSライブラリが反映されました。

そこでCSSCOも、git cloneをすれば反映される可能性があると考え、上記(1)と同様に、

php

1git clone https://github.com/we-are-next/cssco.git

とターミナルから入力した結果、

php

1Cloning into 'cssco'... 2remote: Enumerating objects: 593, done. 3remote: Total 593 (delta 0), reused 0 (delta 0), pack-reused 593 4Receiving objects: 100% (593/593), 4.66 MiB | 2.76 MiB/s, done. 5Resolving deltas: 100% (389/389), done.

と表示されクローニングが完了しました。

しかし、やはりCSSCOが反映されることはありませんでした。

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

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

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

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

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

m.ts10806

2019/07/20 22:40

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

回答1

0

ベストアンサー

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

投稿2019/07/22 23:33

kei344

総合スコア69366

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問