Laravel でユーザ認証とマルチ認証を実現する

ユーザ認証を備えたコメント掲示板の開発

コメント一覧の Tailwind CSS によるスタイリング

コメント一覧の表示は現時点で次のようになっています． <ul> タグによる箇条書きを指定しましたが，行頭の箇条書き記号が表示されていないことにも注意してください．Tailwind ではほとんどの要素のスタイルがリセットされていて，自身で様々なスタイルを適用していくことになります．なお，Tailwind のスタイルはここで検索すると良いでしょう．

resources/views/comments/index.blade.php<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Comments') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <ul>
                        @foreach ($comments as $comment)
                            <li>{{ $comment->title }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

箇条書きをやめて <div> タグで囲った上で，my-2 というクラスを適用します．この my-2 は y 軸方向（つまり上下）に 2 単位（8px）の margin（余白）をとることを意味しています．この詳細はやはり Tailwind CSS Cheat Sheet で確認してください．

resources/views/comments/index.blade.php<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Comments') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    @foreach ($comments as $comment)
                        <div class="my-2">
                            {{ $comment->title }}
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

しかしながら，ブラウザで再読み込みしても結果は変わりません．

Tailwind CSS では新たなクラスを利用する時には必ずコンパイルが必要です．コンパイルによって css ファイル等が生成されます．よって，以降もスタイルを適用したらその都度次のコマンドでコンパイルしてください．徐々に CSS ファイルのサイズが大きくなっていく（今回の 30.80 kB から次のページでは 30.85 kBになる）ことも確認できます．さらに css のファイル名も変化していることも確認できます．

vagrant@ubuntu2204 laravelAuth $ npm run build ⏎

> build
> vite build

vite v4.5.0 building for production...
✓ 47 modules transformed.
public/build/manifest.json             0.26 kB │ gzip:  0.13 kB
public/build/assets/app-083d42d7.css  30.80 kB │ gzip:  5.97 kB
public/build/assets/app-63bb58ea.js   72.12 kB │ gzip: 26.78 kB
✓ built in 1.74s
vagrant@ubuntu2204 laravelAuth $

コンパイル後にブラウザで再び表示すると，コメントタイトルの上下にマージンが設定されました．

あとは色々スタイルを当てて美しくしていきます．枠線 (border) を追加して，その色を薄いグレー (border-gray-300) にします．

resources/views/comments/index.blade.php（抜粋）<div class="p-6 text-gray-900">
    @foreach ($comments as $comment)
        <div class="my-2 border border-gray-300">
            {{ $comment->title }}
        </div>
    @endforeach
</div>

コンパイル前には変化がなく，コンパイルすると枠線がグレーで表示されるはずです．

さらにスタイルを適用します．外の枠線は角を丸く (rounded-md)，パディング (p-3) を設定します．パディングを設定することで枠線とその中のコンテンツとの間隔をとることができます．またタイトルはグレー (800) のセミボールドにします．本文も小さなフォント (text-sm) で表示して，タイトルよりも僅かに薄いグレー (700) にします．

resources/views/comments/index.blade.php（抜粋）<div class="p-6 text-gray-900">
    @foreach ($comments as $comment)
        <div class="my-2 border border-gray-300 rounded-md p-3">
            <div class="font-semibold text-gray-800">{{ $comment->title }}</div>
            <div class="text-sm text-gray-700">{{ $comment->body }}</div>
        </div>
    @endforeach
</div>

npm run build コマンドでコンパイルした後，表示を確認します．

美しい表示になりました．次はコメントの詳細表示ページを作成します．

目次に戻る

« 戻る次へ »