【Laravelの使い方】CSSファイル・JSファイル・画像ファイルの読み込み方法

このページではLaravelであなたが用意した、CSSファイルやJSファイル、画像ファイルなどの外部ファイルを読み込む方法について解説します。

外部ファイルの読み込み方法

外部ファイルを読み込むにはヘルパーメソッドのassetを使います。

assetメソッドは、あなたが作ったプロジェクトのpublicディレクトリまでのパスを返してくれる関数なので、publicメソッドにCSSファイルやJSファイルなどを入れておけば、容易に読み込むことができます。

僕のpublicフォルダの構成は次の通りになっているので、以降、このフォルダ構成であることが前提で紹介していきます。

public
  |__ dist
  |    |__ css
  |    |__ js
  |__ img 

CSSファイルを読み込む方法

<!-- CSSの読み込み -->
<link href="{{ asset('/dist/css/app.css') }}" rel="stylesheet" type="text/css">

これにより「public/dist/css」にあるcssファイル「app.css」を読み込みます。

JSファイルの読み込み

<!-- JSファイルの読み込み -->
<script src="{{ asset('/dist/js/app.js') }}"></script>

これにより「public/dist/js」にあるjsファイル「app.js」を読み込みます。

画像ファイルの読み込み

<!-- 画像ファイルの読み込み -->
<img class="p-main__image" src="{{ asset('/img/test.png') }}" alt="トップ画像">

これにより「public/img」にある画像ファイル「test.img」を読み込みます。

あとは画面で確認し、きちんと反映されているか確認しましょう。

おすすめのLaravelの書籍

PHPフレームワークLaravel入門 第２版

created by Rinker

秀和システム

• Amazon
• 楽天市場
• Yahooショッピング
• 紀伊國屋書店

PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング