【Bootstrap】共通ヘッダーをナビバーとしてデザインしよう！

概要

ヘッダーをナビバーとして実装します。
（SpringBootチュートリアルの共通ヘッダーを基に解説していきます）

また、デザインはBootstrapのサンプルを基にしていますので、
そちらも一度参照してみて下さい。

実装

固定されたナビバーを参考に実装します。

ナビバー(固定)に修正

ナビバーを固定で実装したソースコードです。
SpringBootチュートリアルで実装した共通ヘッダーに改修を加える形としており、
headerタグ内が修正箇所です。

header.html

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"

xmlns:sec="http://www.thymeleaf.org/extras/spring-security"

<title th:replace="${title}">title</title>

</head>

<body>

</li>

</li>

</li>

</li>

</ul>

<button class="btn btn-sm btn-outline-light" type="submit">ログアウト</button>

</form>

</div>

</nav>

</header>

</body>

</html>

・navタグ内に、classでfixed-topを指定することで固定することができます。

ナビバーとコンテンツの重なりを解消させる

＜問題＞
fixedで固定した場合、コンテンツが下に隠れてしまうため、
ナビバーに余白を設定することコンテンツと重ならないようにする必要があります。

スタイル適用前
以下では、「ようこそ！」の文字が下に入って隠れてしまっています。

これを解消するために、余白を設定します。

＜解決方法＞
①Bootstrapのクラスを使う場合
　pb-5というクラスを使うことができます。
　詳しくは公式サイトを見て頂くとよいのですが、ざっくり説明すると以下になります。
・p（padding）要素の内側に余白をつくる。
・b（bottom）下部のみを指定する。
・5（$spacer * 3）$spacerのデフォルトは1rem=16px

このクラスをheader.htmlのheaderタグに指定すると、headerタグから下にコンテンツが配置されるようになります。
ただし、コンテンツとナビバーは詰まったような間隔になります。

5（3rem分）の余白ができるのがデフォルトの最大値であるため、間隔を調整するには$spacerの値を変更する設定が必要になります。
この変更は、サイト全体に影響が出ると考えられたので、別の方法を取ることにしました。

②独自のスタイルを定義する
①ではサイト全体に影響が出ると考えられたので、独自のスタイルを定義することで設定できるようにしようと思います。
そうすれば特定の箇所にのみ、指定したスタイルを適用することができます。
そのために、以下のファイル（base.css）を作成します。

配置場所：src/main/resources/static/css/base.css

ソースコード

@charset "UTF-8";

header {padding-bottom:4em;}

説明
・padding-bottomは、要素の内側に余白をつくります。
　「-bottom」は下部のみにpaddingを作るという指定になります。
・em（エム）は文字サイズの高さを基準にした単位です。
・フォントサイズを指定しない場合、デフォルトでは16pxと見なされます。
・4emとしたのは、ヘッダーの高さとコンテンツとの余白には4文字文くらいが妥当だったためです。
・headerタグは共通ヘッダーのため、ここに指定すればすべてに適用されます。（※1）
・ログイン以外の画面は、全てheader.htmlのheadタグで置き換えているため、
　base.cssはheader.htmlのheadタグ内に参照させておけば置き換えている
　全ての画面でスタイルが適用されます。（※1）