ここでは「BootstrapとPythonでナビゲーションバーを使いこなす」ということで、Bootstrapのナビゲーションバーの使い方を解説します。
この記事を読むことで
Bootstrapを使ったナビゲーションバーの実装方法
Bootstrapを使ったドロップダウンメニューの表示
BootstrapとPythonで動的URLを作成する方法
を学ぶことができます。
したがって
Bootstrapを使ってフロントエンドの学習をしてみたい！
PythonのFlaskでBootstrapを使った装飾をしてみたい！
という方に役立てて頂ければ幸いです。
それでは始めていきましょう！
※この記事では、下記のBootstrap5設置ガイドを参考に改良・改善をしています。
また、動作確認として当サイトで紹介してきた「Flask入門編」の技術を使用しています。
Flask・PythonでWebアプリを起動し動作確認をしているので、ナビゲーションバー学習の前にご覧いただくとより理解を深められると思います。
Bootstrapナビゲーションバーの基礎
まずはBootstrapの基本として、「navbar」の基本的な記述方法とPython・Flaskでのリンクを紐づける方法を紹介していきます。
基本的なナビゲーションバーの文法と使い方
Bootstrap5設置ガイドのプログラムを参考に、ナビゲーションバーを作成してみます。
公式サイトではナビゲーションバーの表示がデフォルトで「縦並び」となっているので、ここでは「横並び」で表示されるように記述を変えています。
HTMLファイルの<body>タグに以下の記述を追加しましょう。
layout.html
<nav class="navbar navbar-expand-md navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-secondary ml-3" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">商品一覧</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">お問い合わせ</a>
</li>
</ul>
</div>
</nav>
HTMLやPythonで動作確認をしてみると
と横並びでナビゲーションバーが表示されているのがわかります。
ナビゲーションバー表示の並べ方を変える方法は
横並び：<nav class=”navbar navbar-expand-md navbar-light bg-light”>
縦並び：<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
とexpand-○○を「md / lg」と変えるだけです。
実際に縦並び表示でプログラムを実行してみると
ちゃんと縦並びで表示されているのがわかります。
このようにBootstrapを使うと簡単にナビゲーションバーを表示させることができるので、しっかりと基礎を覚えておきましょう。
Python・Flaskでリンクを紐づけ
続いて、先ほどBootstrapを使って作成したナビゲーションバーにPython・Flaskを使ってリンクを紐づけていきます。
まずは実演として、紐づけた動作を見てみましょう。
リンクを紐づけしてあるので、URL名も変わっていることが確認できますね！
では実際にプログラムを見ていきます。
リンクの紐づけといっても、変えるのは「href = ” # “」の部分だけになるので、リンク部分を下記のように書き換えます。
layout.html
<li class="nav-item active">
<a class="nav-link text-secondary ml-3" href="{{ url_for('home') }}">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="{{ url_for('product_list') }}">商品一覧</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="{{ url_for('contact_as') }}">お問い合わせ</a>
</li>
ポイントは
という点で、クリックしたときに「かっこの中で指定した関数」が実行されます。
指定する関数はPython側で下記のように記述します。もちろん関数名は同じものを使用しますよ。
app.py
@app.route('/') # メインページ
def home():
return render_template('index.html',\
title='メインページ',\
message='Myページへようこそ！')
@app.route('/productlist') # 商品リストページ
def product_list():
return render_template('list.html', \
title='商品リスト', \
message='こちらの商品はお買い得です。')
@app.route('/contactas') # お問い合わせ
def contact_as():
return render_template('contact.html', \
title='お問い合わせ', \
message='お問い合わせ内容を送信してください。')
プログラムとしては当記事の最初にお話した「Flask入門編」の技術を使って記述しています。
ここではリンクを紐づけするために、別途3つのHTMLファイルを「templates」フォルダ内に作成しており、Python側で指定したURL、タイトル、メッセージへ遷移、表示することができます。
Bootstrapナビゲーションバーの応用
では、Bootstrapナビゲーションバーの応用ということで、ナビゲーションバーの+αの機能を実際に見てみましょう。
検索窓を追加する
検索窓を追加するには以下の記述をHTML側に追加します。
layout.html
<div class="collapse navbar-collapse" id="navbarForm">
<form class="form-inline my-2 ml-3">
<input class="form-control mr-sm-2" type="text" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-dark my-2 my-sm-0">検索</button>
</form>
</div>
HTMLやPythonで実行してみると
と検索窓が表示されているのがわかります。
placeholder=” ○○ ” の部分は、検索窓の初期表示として表示される文字になります。
ここでは、検索窓の初期表示として「検索…」を、ボタンの名前は「検索」としています。
また、検索窓の追加でマージンや余白がナビゲーションバーと一致しないことがあります。
その場合、<form class=” ○○ ”> の部分でマージンや余白を調整しましょう。
当サイトでは、「my-2 ml-3」としてマージンを調整しています。
このとき、先ほど設定したナビゲーションバーの<a class=”nav-link”>のタブにも同様のマージンを設定しています。
（詳しくはBootstrap-Pythonのサンプルプログラム全文で紹介しています。）
ナビゲーションバーの固定
続いて、ナビゲーションバーの固定方法を紹介していきます。
ナビゲーションバーの固定には上部への固定と下部への固定の2種類あり、プログラムも簡単です。
HTMLファイルの<nav class=”navbar ・・・>の部分に「 fixed-top 」の記述を追加しましょう。
layout.html
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<ul class="navbar-nav">
<!-- 省略 -->
</ul>
</nav>
このように記述することで
Bootstrapで作成したnavbar/ナビゲーションバーを上部へ固定することができます。
また「 fixed-bottom 」と記述することで、下図のようにナビゲーションバーを下部へ固定することもできます。
自分はフッター部分を別途作成していましたが（青色のフッター部分）、navbarの下部固定を使えば簡単にフッターを作成することもできますよね！
ではドロップダウンとPythonでの紐づけを紹介する前に「お知らせ」です。
Bootstrapなどを使ってWebアプリケーション開発を学びたい方は「Udemy」のこちらのコースがオススメです。
Webプログラミングをマスターしてフロントエンドエンジニアを目指したい方、Webアプリを開発してみたい方は是非上記リンクからのぞいてみてください。
ドロップダウン表示とPythonでの紐づけ
では、ドロップダウンメニューの表示方法とPythonでの紐づけを紹介していきます。
理解の速い方はもうお気づきかと思いますが、紐づけは別途HTMLファイルを用意し、Python側で関数を準備すれば紐づけができます。
さっそくドロップダウンメニューのプログラムを見てみましょう。
今回は「商品一覧」にドロップダウンメニューを表示するので、先ほど記述した「商品一覧の<li>タグ」を以下のように書き換えます。
layout.html
<li class="nav-item dropdown">
<a class="nav-link text-secondary dropdown-toggle my-2 ml-3" role="button" data-toggle="dropdown" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">商品一覧</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="{{ url_for('windows_list') }}">Windows</a>
<a class="dropdown-item" href="{{ url_for('macOS_list') }}">MacOS</a>
</div><!-- ドロップダウンのメニュー -->
</li>
プログラムとしては「商品一覧」の<a>タグを
「hrefリンク」から「ボタン（role=”button”)」へ役割変更
リンク付きのドロップダウンメニューを組み込む
記述になっています。
各ドロップダウンメニューのリンク先は、Python側で用意した関数を指定しています。
Python側のプログラムは下記の記述を追加します。
app.py
@app.route('/windowslist') # ドロップダウン-windows
def windows_list():
return render_template('windows.html', \
title='Windows', \
message='こちらのWindows10はお買い得です。')
@app.route('/macOSlist') # ドロップダウン-macOS
def macOS_list():
return render_template('macOS.html', \
title='macOS', \
message='こちらのmacOSはお買い得です。')
実際に実行してみると
上図のようにドロップダウンメニューが表示されます。
Windowsのメニューをクリックすると
Windows用の商品ページが表示されます。
このとき、URLやページ名も変わっていることが確認できますね。
続いて、macOSのメニューをクリックしてみると
ちゃんとmacOSの商品一覧ページに進むことが確認できました。
このように
点はPythonおよびBootstrapの強みではないでしょうか。
Bootstrap-Pythonのサンプルプログラム全文
では上記で紹介してきた要素をまとめたプログラム全文を記載しておきます。
UIの関係からナビゲーションバーの固定はしていないのでご注意ください。
また、インポート文や<head>タグなどは「Flask入門編」で紹介している内容と同じなので省略しています。
layout.html
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-secondary my-2 ml-3" href="{{ url_for('home') }}">ホーム</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link text-secondary dropdown-toggle my-2 ml-3" href="{{ url_for('product_list') }}" role="button" data-toggle="dropdown" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">商品一覧</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="{{ url_for('windows_list') }}">Windows</a>
<a class="dropdown-item" href="{{ url_for('macOS_list') }}">MacOS</a>
</div><!-- ドロップダウンのメニュー -->
</li>
<li class="nav-item">
<a class="nav-link text-secondary my-2 ml-3" href="{{ url_for('contact_as') }}">お問い合わせ</a>
</li>
<div class="collapse navbar-collapse" id="navbarForm"><!-- 検索窓 -->
<form class="form-inline my-2 ml-3">
<input class="form-control mr-sm-2" type="text" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-dark my-2 my-sm-0">検索</button>
</form>
</div>
</ul>
</nav>
<div class ="m-3">
<h1 class="display-3 mt-4 mb-4">
{% block headline %}{% endblock %}
</h1>
<div class="m-1">
{% block content %}{% endblock %}
</div>
</div>
</body>
app.py
@app.route('/') # メインページ
def home():
return render_template('index.html',\
title='メインページ',\
message='Myページへようこそ！')
@app.route('/productlist') # 商品リストページ
def product_list():
return render_template('list.html', \
title='商品リスト', \
message='こちらの商品はお買い得です。')
@app.route('/windowslist') # ドロップダウン-windows
def windows_list():
return render_template('windows.html', \
title='Windows', \
message='こちらのWindows10はお買い得です。')
@app.route('/macOSlist') # ドロップダウン-macOS
def macOS_list():
return render_template('macOS.html', \
title='macOS', \
message='こちらのmacOSはお買い得です。')
@app.route('/contactas') # お問い合わせ
def contact_as():
return render_template('contact.html', \
title='お問い合わせ', \
message='お問い合わせ内容を送信してください。')
index、list、windows、macOS、contact .html
<!-- layout.htmlを継承してWebページを作成 -->
{% extends "layout.html" %}
{% block title %}
{{title}}
{% endblock %}
{% block headline %}
{{ title }}
{% endblock %}
{% block content %}
<p>{{ message }}</p>
{% endblock %}
参考にしたサイト（冒頭でも紹介しました。）
以上、BootstrapとPythonでナビゲーションバーを使いこなしたアウトプットでした。(-ω-)/
お疲れ様でした。