【Laravel】カレンダーの土日のデザインを変更してみる（Bladeテンプレート：@styleディレクティブ）

今回はLaravelに関して書いていきます。

以前もLaravelに関する記事を書いています（以下リンク）。

miya-moto-memo.hatenablog.com

上記の記事で、簡易的なカレンダーを作成しました。

デザイン的にもかなりシンプルで、月～日の全曜日で同じ見た目です。
もう少しメリハリを付けるために「土曜は青」「日曜は赤」といった感じでデザイン変更してみました。

それでは本題へ。

実行環境
変更内容（画像）
- 変更前
- 変更後
プログラム
- 変更：calendar.css
- 変更：calendar.blade.php
プログラム差分
- calendar.css
- calendar.blade.php
参考リンク
おわりに
関連記事

実行環境

実行環境は、

PHP 8.2.12
Laravel Framework 11.10.0
nesbot/carbon 3.5.0

です。

変更内容（画像）

まずは手っ取り早く、変更前後の画像を載せます。

変更前

変更後

こんな感じです。

月～金：黒
土：青
日：赤

といった感じです。

曜日は背景色として設定して、文字は白にしています。
日付は文字色として設定しています。

プログラム

プログラムは以下の通りです。

変更：calendar.css

.container {
    width: 720px;
    margin: 0 auto;
}
.header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.header > a {
    text-decoration: none;
}
.header > div {
    font-weight: bold;
}
.grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.weekday {
    text-align: center;
    background-color: #111;
    color: #fff;
}
.day {
    text-align: center;
    border: 1px solid #eee;
    padding: 10px;
}
.this-month {
    color: #111;
}
.not-this-month {
    color: #ccc;
}

変更：calendar.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カレンダー</title>
    <link rel="stylesheet" href="{{ asset('/css/calendar.css')  }}" >
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="{{ url()->current() . '?year=' . $previousMonth->format('Y') . '&month=' . $previousMonth->format('m') }}">前月</a>
            <div>{{ $thisMonth->format('Y年m月') }}</div>
            <a href="{{ url()->current() . '?year=' . $nextMonth->format('Y') . '&month=' . $nextMonth->format('m') }}">翌月</a>
        </div>
        <div class="grid">
            {{-- 曜日 --}}
            @foreach($weekdayList as $value)
                <div class="weekday" @style([
                    'background-color: #0e29fe' => $value === '土',
                    'background-color: #e60100' => $value === '日',
                ])>{{ $value }}</div>
            @endforeach
            {{-- 前月の期間 --}}
            @foreach ($previousMonthPeriod as $value)
                <div class="day not-this-month">{{ $value->format('j') }}</div>
            @endforeach
            {{-- 当月の期間 --}}
            @foreach ($thisMonthPeriod as $value)
                <div class="day this-month" @style([
                    'color: #0e29fe' => $value->isSaturday(),
                    'color: #e60100' => $value->isSunday(),
                ])>{{ $value->format('j') }}</div>
            @endforeach
            {{-- 翌月の期間 --}}
            @foreach ($nextMonthPeriod as $value)
                <div class="day not-this-month">{{ $value->format('j') }}</div>
            @endforeach
        </div>
    </div>
</body>
</html>