このような問題を解決します。
こんにちは、セイタです。
Laravelで開発を行なっていると、通常のコードの書き方では望んだ反応が返ってこない場合があります。
今回の話題は、Bootstrapのテーマや自前の外部CSSを読み込む際のコードの書き方と、外部CSS/JSファイルを置く場所についてお伝えしたいと思います。
場所さえわかってしまえば何てことないので、この機会に覚えてしまって余計な時間を使ってしまわないようにしましょう！
【Laravel】Bootstrap導入時のCSSやJavaScript/jQueryの置き場所はどこ？
LaravelはいつもHTMLやPHPで書いているコードでは、適応することができない仕様となっています。
では、どのようにして反映させるのか。
答えは、Laravelインストール時に沢山作成されるディレクトリの中の『public』フォルダの中にあります。
答えはLaravelインストール時に作られるpublicフォルダが答え
Laravelのpublicフォルダの中には、あらかじめCSSやIMG、JSなどを入れるためのフォルダが作成されています。
あらかじめHTMLや通常のPHPファイルで使用していた、CSSファイルをそのフォルダの中に入れてしまえばOKです。
ただ入れるだけだと、読み込まれないという事態になってしまうので、hrefの書き方に関しては次に解説したいと思います。
index.blade.phpでのCSSやJSの書き方
通常HTMLやPHPでhrefを書くときはディレクトリのパスを記述すると思うのですが、Laravelの場合はそうはいきません。
CSSやJSのパスを書くときはこのように記述することによって、作成中のblade.phpに反映させることができます。
<link href="{{asset('css/style.min.css')}}" rel="stylesheet">
このように、いつも書いているパスを{{ asset('パス') }}とすることでCSSファイルやJavaScript/jQueryを読み込むことができます。
内容はどうなっているのかというと、このようになっています。
<link href="{{asset('(public/)css/style.min.css')}}" rel="stylesheet">
assetを使用することによって、publicフォルダの中身を自動的に判別してくれるという仕組みになっているので、直接表現はされていないのですが、public→css→style.min.cssというパスになっています。
何回も使用するコードになってくると思うので、Laravelの基本知識として覚えておきましょう！
LaravelでBootstrapのテーマを入れる際には注意が必要
さて、基本的なLaravelでのCSSファイルの読み込み方法は確認することができました。
例えば、ここでメインのフロントエンド部分をBootstrapを使用して開発するとなったらどうでしょうか。
単純に自分で用意したスクリプトファイルであれば、ここまでの内容で戸惑うことなくできると思います。
しかし、Bootstrapのテーマを使用する場合はスクリプトファイルが多くあるので、混乱してしまうでしょう。
ここからは、併せてBootstrapのテーマをLaravelに導入する際に注意したいポイントについて、解説します。
独自のフォントが設定されているテーマだと反映できないかも
例えば、Bootstrapのテーマを導入して開発しようとすると、CSSとJSファイル意外にも、Font指定用のファイルが準備されている場合があります。
Fontファイルについては、恐らくCSSやJSと同じくpublicフォルダの中に入れて使用するのだと思うのですが、調べても情報が出てきませんでした。
特にこだわりがなければ、CSSで指定すれば良いのですが、そのままテーマを使用したい人もいるでしょう。
そのため、Fontファイルについては導入するのに少し調査に苦労する場合があるので、注意が必要です。
CSSやJSが多く準備されている場合がほとんど
Bootstrapのテーマを使用して開発すると、先ほども少し触れましたが、沢山のスクリプトファイルが使用されています。
CSSだけでも複数ありますし、どのCSSがどの部分を担当しているのかもわからない場合もあるでしょう。
しかし、ここは先ほどの方法を直で受け入れて、assetを使用してそのままCSSフォルダに入っているCSSをpublicフォルダの中のCSSフォルダに入れてパスを書き換えればOKです。
そうすることで、大体のCSSレイアウトに関しては実現可能となっているので、イメージが違う部分が出てきたらデベロッパーツールの検証でどのCSSが適応されていないのかを確認して対処しましょう。
Laravelの開発は便利だけどBootstrapとの組み合わせが混乱するかも
Laravelは学習コストが低く、習得しやすいPHPフレームワークと言われていますが、初心者が手をつけるとなると新しいルールを覚えなければいけないので、結構混乱する部分や理解できない部分が出てくると思います。
しかし、プログラミングは作らなければ覚えないという特徴があるので、ググることやコードを書くことを怠らずに、体得してくことが重要です。
書かないと覚えられない真理については、【プログラミング】とりあえず作るの重要性！知ってから作りたい病の克服が上達のカギで解説しているので、あわせてご覧いただけると納得することができると思います。
初めてのフレームワークの場合は、ある程度抵抗があるものだと思いますが、わからずとも頑張って手を動かして、体で慣れるのが近道です！