こんにちは、タクローです。
Laravelは、PHPのフレームワークの中でも、知名度の高さは一番と言っていいでしょう。
そんなLaravelを勉強していく上で、今回は絶対に覚えておきたい「CSSファイル（スタイルシート）や画像ファイル」の保存場所について解説していきます。
CSSファイル（スタイルシート）や画像ファイルを保存する場所は？
ウェブサイトやウェブシステムを制作していると、CSSファイル（スタイルシート）や画像ファイルはデザインする際、必ずと言っていいほど利用することでしょう。
CSSファイル（スタイルシート）や画像ファイルの配置する場所がわからないのでは、まともにウェブサイトを制作できないと言っても過言ではありません。
Laravelのフォルダ（ファイル）構成は通常のウェブ制作と違い、混乱しやすく、初心者にとって、まず整理して覚えていかなければならないでしょう。
では、CSSファイル（スタイルシート）や画像ファイルの配置する場所はどこなのか？
ファイルを整理するため、「public」フォルダの中に「css」や「image」などの名称でフォルダを作成し、その中にファイルを置いておくとよいでしょう。
タグを使ってCSSファイル（スタイルシート）を参照する
Laravelでは、ビューを使って、ウェブサイトを表示しますが、その時にテンプレートを作成する方が多いと思います。
テンプレートの詳しい解説は、今回は割愛しますが、テンプレートは「resources」フォルダ内、「views」フォルダの中に配置します。
ここでもファイルを整理するため、「views」フォルダの中に、例えば「template」のような名称のフォルダを作り、そこにテンプレートを新たに作成するとよいでしょう。
例として、ここではテンプレートのファイル名を「template.blade.php」とします。
CSSファイル（スタイルシート）を参照するには、この「template.blade.php」内のタグの中に、タグを記述しましょう。
下の例は、「public」フォルダ内に「css」フォルダを作成し、さらにその中に「sample.css」という名称でCSSファイル（スタイルシート）がある場合の記述例です。
<link rel="stylesheet" type="text/css" href="css/sample.css">
上のタグを、テンプレート「template.blade.php」のheadタグ内に記述しましょう。
ここで重要なことは「template.blade.php」があたかも「public」フォルダの直下にあるものとして、「sample.css」ファイルまでのパスを指定することです。
また、「public」フォルダ内の「image」フォルダの「sample.jpg」というファイルを参照する場合、テンプレート
「template.blade.php」やビューには下記のようにタグを記述しましょう。
<img src="image/sample.jpg" alt="サンプル画像">
ここでも重要なことは、「template.blade.php」やビューのファイルが、あたかも「public」フォルダの直下にあるものとして、「sample.jpg」までのパスを指定していることです。
絶対パスと相対パス
先ほど「相対パス」という言葉が出てきました。
これに相対する言葉に「絶対パス」というものがあります。
この「絶対パス」と「相対パス」について、おさらいしておきましょう。
絶対パスとは？
ルートディレクトリから目的のファイルまでの経路を記述するのが絶対パスです。
起点はルートディレクトリとなります。
例えば下図のようなファイル構造だった場合、「ファイルB」を絶対パスで表すとどうなるでしょうか？
下記のように、「http://www.sample.com」からはじまって、経由するフォルダを「/（スラッシュ）」で区切って目的のファイルまで記述します。
外部のウェブサイトにリンクを張る時は、絶対パスで指定する必要があります。
相対パスとは？
絶対パスに対し、相対パスとは、起点となる対象ファイルから目的のファイルまでの経路を記述するものです。
「起点となる対象ファイル」とは、パスを記述しているまさに今、編集しているファイルと考えればよいでしょう。
例えば下図のようなファイル構造だった場合、ファイルAを起点としてファイルCを相対パスで表すとどうなるでしょうか？
下記のように、ファイルAからはじまって、経由するフォルダを「/（スラッシュ）」で区切って目的のファイルCまでを表します。
./サンプルフォルダ/ファイルC
上の相対パスは、まさにファイルAに記述することになります。
また、上の2つ、同じ意味になります。
「./」は「同じフォルダ階層」を意味します。
ですから、「./サンプルフォルダ/ファイルC」は同じ階層にある「サンプルフォルダ」の中の「ファイルC」という意味です。
今度は、ファイルDを起点としてファイルAを相対パスで表すとどうなるでしょうか？
下のように、「../」を使って目的のファイルAまで記述します。
「../」は一つ上の階層に移動することを意味します。
HTMLの必須知識、「絶対パス」と「相対パス」のおさらいでした。
まとめ
PHPフレームワーク「Laravel」を使う時、CSSファイル（スタイルシート）や画像ファイルは、Laravelプロジェクトの「public」フォルダの中に配置しましょう。
また、ビューでCSSファイル（スタイルシート）や画像ファイルを参照する時は、そのビューがあたかも「public」フォルダにあるかのように、相対パスで記述しましょう。
Laravelの勉強、がんばっていきましょう。
最後までお付き合いくださり、ありがとうございました。
コメント