style.me」の中の人。プロダクトのUI/UX改善の企画・ディレクションやSEO対策、コンテンツ編集、トイレ掃除などして生きてます。学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールとカニカマ。座右の銘は「適度にてきとー」。#Laravel勉強ログツイートシェアはてブLINEPocketYasuこにちは、「Tekito+Style.me」を運営しているYasu(@98nasi_nori)です。普段は都内でWebディレクターなどをしています。今年に入り、PHPのフレームワークである「Laravel」を使っての開発の学習を進めてきました。開発を始めた当初はCSSが思うように反映されない時が何度かあり、ちょい焦ることがありました。原因はキャッシュ周りや記述方法など、おおよそ4パターンでした。本記事ではそのCSS反映時に発生する問題の解決策をまとめてご紹介いたします。Laravelでの開発を始めたばかりの初心者の方、これからLaravelを勉強する予定の方はぜひ参考にしてみて下さいね。本記事はあくまでエンジニアではなく、プログラミング初心者のWebディレクターが書いている学習記録です。自分でつくりたいサービスがあったのと、少しでも開発についての理解を深め、普段のディレクションでもエンジニアさんとより密なコミュニケーションを取ることができればと思い、現在開発にもチャレンジしています。内容に突っ込みどころはある場合は、ぜひご指摘してくれると幸いです。ブラウザのキャッシュが残っていないか?Laravelとは関係ないですが、ブラウザ側でCSSのキャッシュが残り、CSSが反映されないケースが結構頻繁にあります。そこを確認してみて下さい。キャッシュをクリアするには、スーパーリロード(フルリロード)を実行します。これによりキャッシュを強制的にクリアすることができます。F5)」を押すことで実行できます。Chrome)でCSSのファイルごとにキャッシュをクリアすることができます。ブラウザでソースコードを開く「command+option+U」で、確認したいページのソースコードを開きます。メニューからでは「表示」→「開発/管理」→「ソースコードを表示」で開けます。更新したCSSのソースコードを開くソースコードを開いたら、更新したCSSのリンクをクリックし、CSSのソースコードを確認します。CSSのコードをリロードするCSSのソースコードを確認すると、キャッシュが残っている場合は更新しているはずのコードの記載がないはずです。そこでリロードすると、更新したコードが反映されます。一度確認したページに戻りデザインを確認してみましょう。ちなみにJavascriptなどのファイルも、修正が反映されない場合は同様の手順でリロードすると更新されます。CSSファイルの配置箇所は正しいか?Laravelでは、CSSファイルは基本的にpublicフォルダ内の「assets/css/」以下に配置します。public以下に配置されているか、改めて確認してみましょう。紛らわしかったのは、resourcesフォルダの配下にもassetsがあること。僕はLaravelを始めた当初、フレームワーク自体も扱うことが初めてだったので、どこに何があるのかかなり迷子になりました......。CSSの配置箇所にも気をつけましょう。Laravel側でキャッシュが残っていないか?先程はブラウザ側のキャッシュが問題でCSSが反映されないケースがあることをお伝えしましたが、Laravel内部でもviewのキャッシュが残り更新したプログラムが反映されないケースがあります。view:clearでviewのキャッシュをクリアしましょう。Laravel専用のコマンドです。artisanが出たら、コマンドを叩いてるディレクトリが違う可能性があります。キャッシュをクリアする際は、ご自身で開発しているプロジェクトのディレクトリ下で実行する必要があります。view:clear」を実行してみましょう。CSSファイルの記述方法は正しいか?LaravelではCSSファイルなど外部ファイルの読み込みは、デフォルトではasset()関数を使用します。asset()関数は「/public」以下を参照します。以下サンプルコードです。ここで僕が上手くいかなかったのは、Laravelで「https」のURLで返す場合にはsecure_asset()関数を使用する点。httpのURLを返すの場合にはasset()を使用するのでOKですが、SSL化をしている場合は気をつけましょう!また上記の記述方法は、Javascriptや画像などのアセットを利用する場合も同様です。まとめここまでLaravelでのCSS変更の反映方法についてまとめてきましたが、いかがでしたか?はじめてのフレームワークだとなかなか戸惑うこともあるかと思います。問題解決の一助になれば幸いです。今後もLaravelはどんどん触ってレベルアップしていきたいと思っているので、初心者の方は一緒に頑張っていきましょう!!では!Laravelの基礎的な内容を学びたい方は、参考書として「PHPフレームワークLaravel入門」がおすすめですよ。Laravelの基礎がおおよそ網羅されているので、ぜひチェックしてみて下さいね。MIKAMI)「Tekito+Style.me」の中の人。サービスの企画・ディレクション、グロースハック、SEO対策、UX設計などしてます。学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールと生ハム、あとカニカマ。style.me」の中の人。プロダクトのUI/UX改善の企画・ディレクションやSEO対策、コンテンツ編集、トイレ掃除などして生きてます。学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールとカニカマ。座右の銘は「適度にてきとー」。style.me都内ITスタートアップに勤めるWebディレクター時々旅人な人による雑記ブログ。