flaskテンプレート

flaskのサンプル集

228 views

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{% block title %}アプリケーション名{% endblock %}</title>
  7. <!-- Bootstrap 5 CSS CDN -->
  8. <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
  9. <style>
  10. /* サイドバーのスタイル */
  11. .sidebar {
  12. height: 100vh; /* サイドバーの高さを画面全体に */
  13. position: fixed; /* サイドバーを固定 */
  14. top: 56px; /* ヘッダーの高さを考慮 */
  15. left: 0;
  16. width: 250px;
  17. background-color: #f8f9fa;
  18. padding: 1rem;
  19. overflow-y: auto; /* スクロール可能にする */
  20. }
  21. /* コンテンツエリアのスタイル */
  22. .content {
  23. margin-left: 250px; /* サイドバーの幅分だけ左に余白を設定 */
  24. padding: 1rem;
  25. margin-top: 56px; /* ヘッダーの高さ分の余白 */
  26. }
  27. .sidebar a {
  28. display: block;
  29. padding: 10px 15px;
  30. margin-bottom: 10px;
  31. color: #333;
  32. text-decoration: none;
  33. border-radius: 5px;
  34. }
  35. .sidebar a:hover {
  36. background-color: #e9ecef;
  37. }
  38. /* フッターのスタイル */
  39. footer {
  40. position: fixed;
  41. bottom: 0;
  42. width: 100%;
  43. height: 50px;
  44. background-color: #f8f9fa;
  45. text-align: center;
  46. line-height: 50px;
  47. }
  48. /* 画面が768px未満の時はサイドバーを非表示にし、メインコンテンツをフル幅に */
  49. @media (max-width: 768px) {
  50. .sidebar {
  51. display: none;
  52. }
  53. .content {
  54. margin-left: 0;
  55. }
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <!-- ヘッダー -->
  61. <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  62. <div class="container-fluid">
  63. <a class="navbar-brand" href="#">アプリケーション名</a>
  64. <!-- ハンバーガーメニュー(画面が小さいときに表示) -->
  65. <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  66. <span class="navbar-toggler-icon"></span>
  67. </button>
  68. <!-- ナビゲーションメニュー(画面が小さいときのみ表示) -->
  69. <div class="collapse navbar-collapse" id="navbarNav">
  70. <ul class="navbar-nav ms-auto d-lg-none"> <!-- このクラスで大きい画面では非表示 -->
  71. <li class="nav-item">
  72. <a class="nav-link" href="/">Home</a>
  73. </li>
  74. <li class="nav-item">
  75. <a class="nav-link" href="/about">About</a>
  76. </li>
  77. <li class="nav-item">
  78. <a class="nav-link" href="/contact">Contact</a>
  79. </li>
  80. </ul>
  81. </div>
  82. </div>
  83. </nav>
  84. <!-- サイドバー -->
  85. <div class="sidebar">
  86. <a href="#" class="active">Home</a>
  87. <a href="{{ url_for('UserController.index') }}">ユーザー管理</a>
  88. <a href="#">プロジェクト管理</a>
  89. <a href="#">データ管理</a>
  90. </div>
  91. <!-- メインコンテンツ -->
  92. <div class="content">
  93. {% block content %}
  94. <!-- ここに各ページのメインコンテンツが挿入される -->
  95. {% endblock %}
  96. </div>
  97. <!-- Bootstrap 5 JSとPopper.jsの読み込み -->
  98. <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
  99. </body>
  100. </html>

{{ url_for('UserController.index') }}は、BluePrintで設定済みの関数。

Page 2 of 2.

前のページ



[添付ファイル]


お問い合わせ

プロフィール

すぺぺぺ

自己紹介

本サイトの作成者。
プログラムは趣味と勉強を兼ねて、のんびり本サイトを作っています。
フレームワークはdjango。
ChatGPTで自動プログラム作成に取り組み中。

サイト/ブログ

https://www.osumoi-stdio.com/novel/

ツイッター

@darkimpact0626