PHP

【Laravel】Bootstrap導入時のCSSやJavaScript/jQueryの置き場所はどこ?

スポンサーリンク

【Laravel】Bootstrap導入時のCSSやJavaScript/jQueryの置き場所はどこ?

 

LaravelでWebサイトやアプリを作成しようと思っているんだけど、CSSやJSが適応されなくて困ってる。置き場所等を教えて欲しい。

 

このような問題を解決できる記事になっています。

 

こんにちは、誠太です。

 

Laravelで開発を行なっていると、通常のコードの書き方では望んだ反応が返ってこない場合があります。

 

今回の話題は、Bootstrapのテーマや自前の外部CSSを読み込む際のコードの書き方と、外部CSS/JSファイルを置く場所についてお伝えしたいと思います。

 

場所さえわかってしまえば何てことないので、この機会に覚えてしまって余計な時間を使ってしまわないようにしましょう!

 

【Laravel】Bootstrap導入時のCSSやJavaScript/jQueryの置き場所はどこ?

【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で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の開発は便利だけどBootstrapとの組み合わせが混乱するかも

 

Laravelは学習コストが低く、習得しやすいPHPフレームワークと言われていますが、初心者が手をつけるとなると新しいルールを覚えなければいけないので、結構混乱する部分や理解できない部分が出てくると思います。

 

しかし、プログラミングは作らなければ覚えないという特徴があるので、ググることやコードを書くことを怠らずに、体得してくことが重要です。

 

書かないと覚えられない真理については、【プログラミング】とりあえず作るの重要性!知ってから作りたい病の克服が上達のカギで解説しているので、あわせてご覧いただけると納得することができると思います。

 

初めてのフレームワークの場合は、ある程度抵抗があるものだと思いますが、わからずとも頑張って手を動かして、体で慣れるのが近道です!

 

オススメ記事【Udemyが強い!】Web制作を独学で学べる講座はひとつあれば事足りそう

オススメ記事プログラミングの本は学習に必要だけど、本だけではキツいというお話【体験談】

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  ブログのSEO対策はいろんな情報があって、何が正しい対策なのかわからない場合が多く困ってしまいませんか?   本記事では、今回紹介するSEO対策を行い上位表示を確認できたことを ...

5

  誠太こんにちは、誠太です!   はてなブログをお使いのあなたにお伝えしなければいけないことがあります。 はてなブログから『はてなブログPro』に移行するのはやめましょう。 &n ...

-PHP
-

Copyright© SEITALITY , 2019 All Rights Reserved.