🐘

Laravel入門３ 静的ファイル

に公開
Laravel
blade
Laravel 11
laravel12
tech

記事一覧

  1. Laravel × Docker 最速環境構築
  2. Laravel 入門１ ページ追加
  3. Laravel入門２ bladeディレクティブ
  4. Laravel入門３ 静的ファイル
  5. Laravel入門４ Request
  6. Laravel入門５ Todoアプリ（データベース）
  7. Laravel入門６ Todoアプリ（認証機能）
  8. Laravel入門７ Todoアプリ（CRUD）

静的ファイル

静的ファイルとは

以下のようなファイルのこと
（今回はCSSと画像のみ紹介）

  • CSSファイル
  • JavaScriptファイル
  • 画像ファイル
  • 動画ファイル
  • フォントファイル

CSS

  1. style.cssを作成
.
├── laravel_app
│   └── public
│       └── css
│           └── style.css # ここに作成
├── docker-compose.yml
└── Dockerfile
  1. style.cssを編集
  • style.css
/* 適当なボタンクラスを作成 */
.button {
  width: fit-content;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  font-weight: bold;
  color: #0000ff;
  background-color: #ddddff
}
  1. top/index.blade.phpを編集
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    {{-- asset関数を用いると、publicディレクトリのファイルを参照できる --}}
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <h1>トップページ</h1>
    <button class="button">ボタン</button>
</body>
</html>

画像

  1. 適当な画像を作成
.
├── laravel_app
│   └── public
│       └── images
│           └── icon.png # ここに作成
├── docker-compose.yml
└── Dockerfile
  1. top/index.blade.phpを編集
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>トップページ</h1>
    <img
        src="{{ asset('images/icon.png') }}"
        alt="アイコン"
        style="width: 100px; height: 100px;"
    >
</body>
</html>

Discussion