プログラミング その他

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

投稿日:

概要

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

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

 

実装

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

ナビバー(固定)に修正

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

header.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

ソースコード

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

(※1)SpringBootチュートリアルの仕様上

スタイル適用後
ナビバーの内側の下部に4em分の余白があるため、
コンテンツはそこから下の部分に表示されるようになります。
ナビバーとコンテンツの間隔もちょうどいい具合に空いています^^

まとめ

  • ナビバーには画面スクロールに合わせて移動する通常のものと、固定されたものが作れる。
  • Bootstrap標準のスタイルでは不十分な場合、独自のスタイルを加えることでデザインの幅が広がる。

 
最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!
もし内容が良かったらランキング評価を頂けると励みになります(^^)

ランキング評価する

-プログラミング, その他
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

【Java】HashSetの使い方(順序なしSet)

HashSetの使い方をまとめました。 HashSetに関する使い方のサイトは他にもありますが、 それらのサイトには書かれていないメソッドについても書いてあります。 HashSetの基本情報 ・重複す …

困った,男性

開発でハマったらやめる3つのこと

バグにはまったらやめる3つのことについて話します。 私自身がやりがちなので自分への戒めも兼ねて。 必要以上にいじるのをやめる 原因の特定が不十分な状態で、ググった結果の内容をいろいろと反映させてもカオ …

CSV/TSVデータを作成するVBAツールを公開

【追記:2020年8月1日】 UTF-8(BOM無し)に対応しました。 業務でテスト用のCSVファイルを作成することがよくあるので、自分でツールを作成しました。 TSVにも対応しています。 基本仕様 …

no image

【PHP】配列と連想配列と多次元配列の説明と使用例

配列とは? 1つの変数に複数の値を持つものです。 整数型や文字列型は1つの変数に1つの値を持ちますが、配列は同じようなデータの集まりを1つの変数に持つことができるようになっています。 配列には通常の添 …

SpringでNotNullなどのバリデーションが効かないときの対処法

状況 フィールドに入っている値は空文字なのに、 @NotNull, @NotEmpty, @NotBlankでエラーとして検知されない。 (BindingResultでhasErroe=0件となる) …

SpringFramworkの良書

■おすすめ教材
Javaの基本を学んだ人が、次のステップとして読む本(中級者向け)

※SpringはJavaのFrameworkの1つです。
変更のしやすさ、保守性の高さが特徴です。