つまずきやすいBootstrapナビゲーションメニューの基本カスタマイズ方法総まとめ

ウェブサイトにおいて優れたユーザーエクスペリエンスは、よく考えられたナビゲーションメニューから始まると言ってもいいでしょう。ナビゲーションメニューはウェブサイトの要とも言え、訪問するユーザーに対する快適な操作性にもつながります。

ウェブサイトのナビゲーションメニューに必要なすべての要素がまとめれていることから、Bootstrapのナビメニューはカスタマイズ用の基本テンプレートとして活用されています。

この記事では、特にはじめて扱うひとがつまずきやすい、Bootstrapナビゲーションメニューのカスタマイズ方法3つをご紹介します。一緒にまとめた無料ツールを利用すれば、より手軽にナビメニューを拡張することができます。

Bootstrap ナビゲーションメニューについて知っておきたいこと

Bootstrap ナビゲーションメニューは、ウェブサイト制作において柔軟でとても強力なツールです。さまざまなユーティリティクラス、クロスブラウザ対応の多数のコンポーネント、モバイルファーストによる設計が可能です。デザインに関しては、見た目がきれいなのはもちろん、一般的に利用されている2つのテーマ（ダーク|ライト）にも対応できます。

これらのコンポーネントを最大限活用するには、覚えておきたい大切なルールがいくつかあります。

サポートされているコンテンツのみを使用しよう: ロゴ、メニューリンク、折りたたみトグル、ボタン、ドロップダウン、インラインフォーム、文字テキスト
ナビゲーションバーでは、グリッドの利用は避けましょう。
ユーティリティクラスを利用して、コンポーネントの見た目や動作を変更しましょう。

Bootstrap ナビゲーションメニューのカスタマイズ方法

その1: Bootstrapナビメニューの色を変更する方法

初期設定のデフォルトでは、Bootstrapナビメニューには、ダーク（英: Dark）とライト（英: Light）の２つのテーマがあります。どちらのテーマもシンプルな配色で、さまざまな環境に適していると言えます。また、文字テキストの読みやすさも考慮されており、ナビメニューのクリックひとつで他のコンテンツに移動できる利点も。ただし、独自のカラーテーマを利用するには、ちょっとしたカスタマイズが必要になります。

ここでは、以下のようにカスタムコードを作成し、お好みの色を定義する必要があります。

.navbar-custom {}
/* ロゴ（ブランドカラー）と文字テキストの色を変更*/
 
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {}
/* リンクカラーの変更 */
 
.navbar-custom .navbar-nav .nav-link {}
/* activeまたはhoverリンクカラーの変更 */
 
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {}

ナビメニューにドロップダウンが含まれている場合は、以下のコードも追加しておきましょう。

.navbar-custom .navbar-nav .dropdown-menu {} .navbar-custom .navbar-nav .dropdown-menu>li>a {} .navbar-custom .navbar-nav .dropdown-menu>li>a:hover,
.navbar-custom .navbar-nav .dropdown-menu>li>a:focus {}

配色を試しながら決定したいときは、無料ツールTWBSColorを活用してみましょう。このツールを使えば、Bootstrapナビメニューの色を自由にカスタマイズできます。フレームワークのバージョンを選択し、デフォルトカラーや背景、文字テキストの色を選択するだけのお手軽さ。SCSS、SASS、LESS、CSSによるスニペットコードが自動生成されるので、あとはコピー＆ペーストでスタイルシートに貼り付ければ完了です。

その2: Bootstrapナビメニュー要素を揃える方法

Flexboxが登場るするまでは、Bootstrapナビメニュー要素の整列は面倒な作業のひとつであったことを誰もが知っているでしょう。しかし、４代目となるBootstrapでは、整列についても最大限改善されています。「justify-content-end」や「justify-content-center」、「align-items-end」などの新しいクラスの他に、左右揃えには「mr-auto」「ml-auto」というユーティリティクラスも使用できます。

以下のプロジェクトでは、Bootstrapナビメニューのさまざまなコンセプトに対応できる、解決用コードスニペットがまとめられているので、こちらも活用してみると良いでしょう。

その3: Bootstrapナビメニューのブレークポイントを変更する方法

こちらのテクニックは、より高度なカスタマイズを求めるデベロッパー向けとなります。ブレークポイントの変更は、見た目ほど難しいことではなりません。もちろん、いくつかのデフォルト設定を上書きする必要がありますが、Bootstrapフレームワークを利用すれば、より手軽にカスタマイズを行うことができます。

初期設定では、ブレークポイントは768pxとなっています。デスクトップ画面でもハンバーガーメニューを表示したいときは、あらかじめBootstrap 4に用意されている「navbar-expand-*」を使用するだけで、お好みのブレークポイントに調整できます。

<nav class="navbar navbar-expand-sm">..</nav>

用意されているバリエーションから選択可能となっています。

<ul>
   <li>navbar-expand-sm- 576px以下でモバイルメニューをスクリーンに表示</li>
   <li>navbar-expand-md- 768px以下でモバイルメニューをスクリーンに表示</li>
   <li>navbar-expand-lg- 992px以下でモバイルメニューをスクリーンに表示</li>
   <li>navbar-expand-xl- 1200px以下でモバイルメニューをスクリーンに表示</li>
</ul>

モバイル用メニューを全く使用しない場合は、「navbar-expand」を追加しましょう。逆にメニューを常に表示する場合には上記クラスを追加しましょう。（展開用クラスはありません）

1000xpなどブレークポイントを個別に調整したいときは、以下のようなメディアクエリを指定することができます。

@media (min-width: 1000px) {
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .2rem;
        padding-left: .2rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

その他のBootstrapナビメニューカスタマイズ方法まとめ

ここでは、Bootstrapナビゲーションメニューのその他のカスタマイズ方法をまとめています。ウェブサイトのコンセプトや業種などに応じて、お好みのナビメニューをデザインしてみましょう。

Startup by DesignModo

Startupは、オンライン上でBootstrapコンポーネントを使ってHTMLテンプレートを作成できるサービス。スタイリッシュなデザインの中には、検索フォームや複数のボタン配置などにも対応しており、フォントやテキストカラー、背景なども変更することができます。現在20種類のBootstrapナビメニューが提供されています。

Bootstrap 4 Navbar with Icon Top

Bootstrap 4 Navbar with Icon Topは、ナビメニュー用の各リンクにアイコンを表示できるコードスニペット。管理パネルやオンラインサービスのインターフェース制作に最適。

Transparent Navbar & Hero by Allen Pavic

Transparent Navbar & Hero by Allen Pavicは、背景が透けた透明ナビゲーションメニューを作成できるコードスニペットです。洗練されたスタイリッシュな見た目が特長で、ロゴやメインメニュー、ソーシャルメディア用アイコンなどに対応したデザイン。

Navbar by Jacob Lett

Navbar by Jacob Lettは、Bootstrapナビメニューでメガメニューを実現できるコードスニペットです。各サブメニューにはカラムをつかった展開が可能で、画像ファイルを表示することもできます。

Bootstrap sticky navbar by Ondrej

ページのスクロールに応じてナビメニューがページ上部に固定される、Bootstrapナビメニュー用コードスニペット。あらかじめ必要なコンポーネントが揃っており、CSSによるカスタマイズのしやすさもポイントです。

Now UI Kit

Now UI Kitは、カラフルなナビメニューの他に、透明ナビメニューも含む8種類のテンプレートが用意されたコンポーネント集。ドロップダウンメニューやアイコン付リンクなどにも対応しています。

Material Dashboard

Material Dashboardは、上記ツールとは異なり、管理画面やダッシュボードに特化した左固定サイドバーが特長です。

Bootstrap 4 sidebar by Ondrej

Bootstrap 4 sidebar by Ondrejは、左固定サイドバーにスライドエフェクトを加えたコードスニペット。立体的に展開するスタイリングを探しているひとにどうぞ。

See the Pen
Animated Bootstrap 3 sidebar by Ondrej (@ondrejsvestka)
on CodePen.

さいごに、。

Bootstrapナビゲーションメニューは、ウェブデザイン制作に欠かせないコンポーネント要素と言えるでしょう。快適なユーザーエクスペリエンスを実現するには、いくつかの問題や修正点はあります。しかし、今回ご紹介したツールや解決テクニックを使用することで、トラブルなくウェブ制作を進めることができるでしょう。

参照元リンク : Bootstrap Navbar Guide and Free Navigation Examples – DesignModo