👺

Laravel CSSについて

に公開
Laravel
tech

先々月、Laravelの勉強をしたのですが、忘れてたことも多いので記事にします。
CSSを適用するまでの流れです。

まず、resources/viewsにindex.blade.phpファイルを作成します。
/routes/web.phpに以下を追記します。

Route::get('/index', function () {
    return view('index');
});

そうしたら、htmlファイルの雛形を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel</title>
</head>
<body>
    
</body>
</html>

cssファイルを適用させ、適当に本文を追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ style.css }}"> //link:cssを入力後エンターキー
    <title>Laravel</title>
</head>
<body>
    <h1>Laravel</h1>
</body>
</html>

上記のようにすることでpublic/style.cssが適用されます。{{ }}はblade記法の1つで、悪意のあるコードを無効化してくれます。

cssファイルを編集していきます。cssファイルを以下のディレクトリに作成します。

public/style.css

cssファイルを開き、以下を記述します。

h1 {
    background-color: aqua;
}

indexにアクセスします。

ばっちりですね。

終わりに

laravelには便利な機能がたくさんあるので使いこなしたいです。

Discussion