Laravel 10 入門トップページ

« 戻る 次へ »

目次

  1. プロジェクトを作成する
  2. データベースファイルを作成する
  3. Visual Studio Code を設定する
  4. .env を編集して初期設定する
  5. タイムゾーンと言語を設定する
  6. Webサーバを起動して終了する
  7. マイグレーションファイルを生成する
  8. テスト用データを設定する
  9. モデルを作成する
  10. コントローラを作成する
  11. ルートを定義する
  12. データベースからデータを取り出す
  13. トップページにリンクを設置する
  14. ビューを使ってレコードを表示する
  15. コメントを個別に表示するページを作成する
  16. コメント投稿機能を実装する
  17. 投稿内容を検証する
  18. 投稿内容を編集する
  19. 投稿コメントを削除する
  20. テストの自動化を実現する
  21. テストカバレッジを計測する
  22. 複数のLinuxコマンドを実行し，履歴からも実行する
  23. ビューをレイアウト化する
  24. Bootstrap を導入する
  25. SQLite を操作する
  26. フェイカでシーダを拡張する
  27. ページネーションを作る
  28. シーダに登録日時と更新日時を追加する
  29. 一覧表示を更新日時の降順にする
  30. フラッシュメッセージを表示する
  31. スタイルシートでデザインを整える

Laravel によるコメント掲示板の開発

スタイルシートでデザインを整える

前のページでフラッシュメッセージを表示できるようになりましたが，メッセージが表示されるだけでデザインが整えられていませんでした．ここでは，スタイルシート (CSS)を作成してそれを読み込み，デザインを整えます．

laravel10-2023-comment-62.png

Laravel では public ディレクトリに設置したファイルへの URL を asset() 関数により生成することができ，それらのファイル公開できます．CSS ファイルを公開したいので，CSS ファイルを設置する mycss フォルダを public フォルダに作成し，その中に style.css を作成します．今回はコマンドでディレクトリとファイルを作成しているので，完了後に VScode でリモートからローカルに同期してください．もちろん VScode でディレクトリとファイルを作成しても構いません． 

vagrant@ubuntu2204 comment_app $ pwd ⏎
/home/vagrant/Documents/laravel/comment_app
vagrant@ubuntu2204 comment_app $ ls ⏎
README.md  bootstrap      config        phpunit.xml  routes   vendor
app        composer.json  database      public       storage  vite.config.js
artisan    composer.lock  package.json  resources    tests
vagrant@ubuntu2204 comment_app $ ls public/ ⏎
favicon.ico  index.php  robots.txt
vagrant@ubuntu2204 comment_app $ mkdir public/mycss ⏎
vagrant@ubuntu2204 comment_app $ touch public/mycss/styles.css ⏎
vagrant@ubuntu2204 comment_app $ ls public/mycss/ ⏎
styles.css
vagrant@ubuntu2204 comment_app $

作成した style.css にフラッシュメッセージのスタイルを記載します．具体的には，flash_message と hidden という2つの class に関するスタイルを記載します．スタイルシートで class にスタイルを適用するには .クラス名 のように先頭にピリオドをつける必要があることに注意してください． 

public/mycss/styles.css.flash_message {
    text-align: center;
    color: blue;
    background: limegreen;
    padding-top: 10px;
    padding-bottom: 10px;
}

.hidden {
    display: none;
}

最後に，共通のレイアウトファイルで style.css ファイルを読み込みます．また，フラッシュメッセージに flash_message クラスを付与し，クリックされたときに hidden クラスが追加されるようにします． 

resources/views/layouts/default.blade.php<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="{{ asset('/mycss/styles.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
    @if (session('flash_message'))
        <div class="flash_message" onclick="this.classList.add('hidden')">
            {{ session('flash_message') }}
        </div>
    @endif
    @yield('content')
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

フラッシュメッセージのデザインを指定することができました．また，メッセージをクリックすると hidden クラスが追加された結果としてメッセージが消去されることも確認してください．

laravel10-2023-comment-64.png

目次に戻る

« 戻る 次へ »