Bootstrap ナビゲーションバー(Navbar)のカスタマイズ方法といろいろなデザインの実装例

Bootstrap 4のナビゲーションバーのカラーを変更したり、アイテムを整列させたり、レスポンシブのブレークポイントを変更するなどのカスタマイズ方法、ナビゲーションバーのいろいろなデザインの実装例を紹介します。

サイトのキャプチャ

Bootstrap Navbar Guide and Free Navigation Examples
by Nataly Birch

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

ナビゲーションの重要性

優れたユーザエクスペリエンスは、熟考されたナビゲーションから始まります。ビジターの快適なプレゼンスを支えるのはWebサイトの心と魂で、すべてをまとめる接着剤です。そのため、BootstrapのナビゲーションバーはBootstrapコミュニティのベースラインコンポーネントであり、定期的に機能強化が行われています。

ナビゲーションバーはまず、重要なゲートウェイを提供します。どのような状況でも機能すべきです。スマホで使用する場合でも、巨大なモニターで使用する場合でも、混乱や誤解を避けるために動作の一貫性を維持しなければなりません。しかし、この状況はスマホ使用における画面解像度の多様化によって悪化しています。ナビゲーションバーはスクリーンの1/10ほどの小さなコンポーネントにすぎませんが、その役割を完全に果たします。

サイトのキャプチャ

Free Bootstrap Templates and Themes

Bootstrapのテンプレートを探している場合は、このコレクションをご覧ください。

Botostrapのナビゲーションバーとは

Bootstrapのナビゲーションはフレキシブルで、パワフルなツールです。さまざまなユーティリティのclass、1群にサポートされている要素、そしてモバイルファーストのビヘイビアが用意されています。デザイン面も見た目がきれいなだけでなく、一般的なニーズに合わせてライトとダークの2つのテーマが用意されています。

注意点があります。
コンポーネントの利点と可能性を最大限に活用するには、知っておくべきポイントがいくつかあります。

  1. サポートされている要素のみを使用する。
    ロゴ(ブランド)、メニューリンク、折り畳み用トグル、ボタン、ドロップダウン、インラインのフォーム、テキスト。
  2. ナビゲーションバー内でグリッドの行と列を使用しない。
  3. コンポーネントの外観と動作を変更する時は、ユーティリティのclassを使用する。

Bootstrapのナビゲーションと付随する要素は一目瞭然ですが、特に初心者にとっては扱いが難しい場合があります。制作者がつまずきやすい3つの問題の解決方法を紹介します。

Bootstrapのナビゲーションバーのカラーを変更する方法

Bootstrapのナビゲーションバーはデフォルトでは、ライトとダークの2つのテーマが用意されています。この2つでほとんどの場合は十分だと思います。適切なレベルの読みやすさを備えており、ユーザーは残りのコンテンツからメニューへのリンクを確実に選択できます。ただし、独自のカラースキームで特別なデザイン機能を備えたインターフェイスの場合は、十分ではない場合があります。

その場合は、カスタムのclassを作成し、好みのカラーを定義する必要があります。スタイルは次のようになります。

ナビゲーションバーにドロップダウンが必要な場合は、さらに追加のclassも変更する必要があります。

color, background, font-sizeなど、必要なプロパティを加えて使用してください。

ナビゲーションバーのスタイルを簡単に変更したい場合は、TWBColorがお勧めです。このオンラインツールを使用すると、Bootstrapのナビゲーションバーに好きなカラーを簡単に設定できます。

サイトのキャプチャ

TWBSColor

使い方は、簡単です。Bootstrapのバージョンを選択し、デフォルトおよびアクティブな背景とテキストのカラーを設定するだけです。SCSS、SASS、LESSまたはCSSで利用可能なコードが生成されます。あとはコピペするだけです。

Bootstrapのナビゲーションバーのアイテムを整列する方法

要素の整列が思い通りにならないことは誰もが知っています。しかし、Bootstrap 4ではCSSが大幅に改良され、簡単になりました。justify-content-end, justify-content-center, align-items-endの他に、右マージンと左マージン用の新しいユーティリティーclassであるmr-auto, ml-autoも使用できます。

また、ナビゲーションバーに要素を配置を配置したい時は、Codeply projectが参考になります。

サイトのキャプチャ

Codeply project

Bootstrapのナビゲーションバーのブレークポイントを変更する方法

これは少し上級者向けのテクニックです。ブレークポイントの変更は、思ったほど難しくありません。もちろん、いくつかのデフォルト機能を上書きする必要がありますが、Bootstrapを使えば、すべてが明確になります。

デフォルトではブレークポイントは768pxです。ただし、大きなスクリーンでナビゲーションバーをハンバーガーメニューに変換する場合は、Bootstrap 4ではそれ用のclassが用意されています。navbar-expand-* を加えるだけです。

classにはバリエーションが用意されています。

スマホ用のメニューを使用しない場合は、navbar-expandを加えます。メニューを常にスマホ用にする場合は、このclassを加えます(expandのclassはありません)。

ブレークポイントを正確な数値、例えば1000pxにしたい場合は、メディアクエリを使用して次のように定義します。

Bootstrapのナビゲーションバーのいろいろなデザインの実装例

ここまで紹介してきたテクニックは、日常のプロジェクトに関して多くの時間と意欲を持っている人には救世主となりますが、時間がない人のための回避策もあります。Bootstrapの理念は、素早いプロトタイピングを意味します。正常に機能するだけでなく、プロジェクトに簡単に組み込むことができるナビゲーションバーが用意されています。

サイトのキャプチャ

Navbar designed by Designmodo

Designmodoによってデザインされたナビゲーションバーで、多くのプロジェクトに適した美しいデザインです。ページの中央にメニューが配置され、ブランディングに必要な要素が含まれています。検索フォーム、サインインと登録の2つのボタンがあり、フォントやテキストカラー、背景を自由に変更できます。

サイトのキャプチャ

Bootstrap 4 Navbar with Icon Top

Bootsnippの寄稿者の1人によって作成されたナビゲーションバーで、要素は両端に配置されており、中央分は空になっています。主な機能は、アイコン付きのメニューがあるため、管理パネルやさまざまなオンラインサービスのインターフェースに役立ちます。

サイトのキャプチャ

Transparent Navbar & Hero

Cloudflareにインスパイアされたデザインで、透明なナビゲーションバーは洗練されています。ロゴ、メニュー、SNSのアイコンが含まれており、さまざまなプロジェクトにすぐに利用できます。

サイトのキャプチャ

Bootstrap 4 Mega Dropdown Menu Navbar

ここまでのナビゲーションバーは単一タイプでしたが、これはメガドロップダウンを備えています。 各サブメニューには、いくつかの列を含めることができます。リンク付きの画像を追加して、情報を提供するだけでなく、視覚的に興味をそそることもできます。

サイトのキャプチャ

Bootstrap sticky navbar, affixing navbar after scroll

ページ全体でユーザーをフォローするナビゲーションバーが必要な場合、このソリューションが最適です。

サイトのキャプチャ

Now UI Kit

Now UI Kitは、inVisionによってデザインされ、Creative TimによってコーディングされたBootstrap 4のツールセットです。カラフルなバージョンだけでなく、透明なバージョンもあり、さまざまなオプションも備えています。

サイトのキャプチャ

Material Dashboard

Creative Timによってリリースされたもう1つのナビゲーションバーです。上記のソリューションとは異なり、このソリューションは管理ダッシュボードを備えています。

サイトのキャプチャ

Animated Bootstrap 3 sidebar

スライドのエフェクトを使いたい人には、このナビゲーションバーがお勧めです。美しいデザインと便利な機能を備えているだけでなく、操作が楽しくなるアニメーションも充実しています。

終わりに

Bootstrapのナビゲーションバーは、デザインに不可欠な要素です。優れたユーザーエクスペリエンスはそれに依存するため、適切に処理する必要があります。フレームワークの背後にあるチームは素晴らしい仕事をしますが、望ましい結果に到着する前に克服すべき問題がまだあります。

ここで紹介した慎重に設計されたナビゲーションバーのようなツールを使用すると、多くのトラブルなしでプロジェクトを進めることができます。

sponsors

top of page

©2019 coliss