flaskのサンプル集
228 views
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>{% block title %}アプリケーション名{% endblock %}</title>
- <!-- Bootstrap 5 CSS CDN -->
- <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
- <style>
- /* サイドバーのスタイル */
- .sidebar {
- height: 100vh; /* サイドバーの高さを画面全体に */
- position: fixed; /* サイドバーを固定 */
- top: 56px; /* ヘッダーの高さを考慮 */
- left: 0;
- width: 250px;
- background-color: #f8f9fa;
- padding: 1rem;
- overflow-y: auto; /* スクロール可能にする */
- }
- /* コンテンツエリアのスタイル */
- .content {
- margin-left: 250px; /* サイドバーの幅分だけ左に余白を設定 */
- padding: 1rem;
- margin-top: 56px; /* ヘッダーの高さ分の余白 */
- }
- .sidebar a {
- display: block;
- padding: 10px 15px;
- margin-bottom: 10px;
- color: #333;
- text-decoration: none;
- border-radius: 5px;
- }
- .sidebar a:hover {
- background-color: #e9ecef;
- }
- /* フッターのスタイル */
- footer {
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 50px;
- background-color: #f8f9fa;
- text-align: center;
- line-height: 50px;
- }
- /* 画面が768px未満の時はサイドバーを非表示にし、メインコンテンツをフル幅に */
- @media (max-width: 768px) {
- .sidebar {
- display: none;
- }
- .content {
- margin-left: 0;
- }
- }
- </style>
- </head>
- <body>
- <!-- ヘッダー -->
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">アプリケーション名</a>
- <!-- ハンバーガーメニュー(画面が小さいときに表示) -->
- <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">
- <span class="navbar-toggler-icon"></span>
- </button>
- <!-- ナビゲーションメニュー(画面が小さいときのみ表示) -->
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav ms-auto d-lg-none"> <!-- このクラスで大きい画面では非表示 -->
- <li class="nav-item">
- <a class="nav-link" href="/">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="/about">About</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="/contact">Contact</a>
- </li>
- </ul>
- </div>
- </div>
- </nav>
- <!-- サイドバー -->
- <div class="sidebar">
- <a href="#" class="active">Home</a>
- <a href="{{ url_for('UserController.index') }}">ユーザー管理</a>
- <a href="#">プロジェクト管理</a>
- <a href="#">データ管理</a>
- </div>
- <!-- メインコンテンツ -->
- <div class="content">
- {% block content %}
- <!-- ここに各ページのメインコンテンツが挿入される -->
- {% endblock %}
- </div>
- <!-- Bootstrap 5 JSとPopper.jsの読み込み -->
- <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
- </body>
- </html>
{{ url_for('UserController.index') }}は、BluePrintで設定済みの関数。
Page 2 of 2.
すぺぺぺ
本サイトの作成者。
プログラムは趣味と勉強を兼ねて、のんびり本サイトを作っています。
フレームワークはdjango。
ChatGPTで自動プログラム作成に取り組み中。
https://www.osumoi-stdio.com/novel/