Bootstrap ナビゲーションバー（Navbar）のカスタマイズ方法といろいろなデザインの実装例
Post on:2019年8月20日
sponsors
Bootstrap 4のナビゲーションバーのカラーを変更したり、アイテムを整列させたり、レスポンシブのブレークポイントを変更するなどのカスタマイズ方法、ナビゲーションバーのいろいろなデザインの実装例を紹介します。
Bootstrap Navbar Guide and Free Navigation Examples
by Nataly Birch
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- ナビゲーションの重要性
- Botostrapのナビゲーションバーとは
- Bootstrapのナビゲーションバーのカラーを変更する方法
- Bootstrapのナビゲーションバーのアイテムを整列する方法
- Bootstrapのナビゲーションバーのブレークポイントを変更する方法
- Bootstrapのナビゲーションバーのいろいろなデザインの実装例
- 終わりに
ナビゲーションの重要性
優れたユーザエクスペリエンスは、熟考されたナビゲーションから始まります。ビジターの快適なプレゼンスを支えるのはWebサイトの心と魂で、すべてをまとめる接着剤です。そのため、BootstrapのナビゲーションバーはBootstrapコミュニティのベースラインコンポーネントであり、定期的に機能強化が行われています。
ナビゲーションバーはまず、重要なゲートウェイを提供します。どのような状況でも機能すべきです。スマホで使用する場合でも、巨大なモニターで使用する場合でも、混乱や誤解を避けるために動作の一貫性を維持しなければなりません。しかし、この状況はスマホ使用における画面解像度の多様化によって悪化しています。ナビゲーションバーはスクリーンの1/10ほどの小さなコンポーネントにすぎませんが、その役割を完全に果たします。
Free Bootstrap Templates and Themes
Bootstrapのテンプレートを探している場合は、このコレクションをご覧ください。
Botostrapのナビゲーションバーとは
Bootstrapのナビゲーションはフレキシブルで、パワフルなツールです。さまざまなユーティリティのclass、1群にサポートされている要素、そしてモバイルファーストのビヘイビアが用意されています。デザイン面も見た目がきれいなだけでなく、一般的なニーズに合わせてライトとダークの2つのテーマが用意されています。
注意点があります。
コンポーネントの利点と可能性を最大限に活用するには、知っておくべきポイントがいくつかあります。
- サポートされている要素のみを使用する。
ロゴ（ブランド）、メニューリンク、折り畳み用トグル、ボタン、ドロップダウン、インラインのフォーム、テキスト。 - ナビゲーションバー内でグリッドの行と列を使用しない。
- コンポーネントの外観と動作を変更する時は、ユーティリティのclassを使用する。
Bootstrapのナビゲーションと付随する要素は一目瞭然ですが、特に初心者にとっては扱いが難しい場合があります。制作者がつまずきやすい3つの問題の解決方法を紹介します。
Bootstrapのナビゲーションバーのカラーを変更する方法
Bootstrapのナビゲーションバーはデフォルトでは、ライトとダークの2つのテーマが用意されています。この2つでほとんどの場合は十分だと思います。適切なレベルの読みやすさを備えており、ユーザーは残りのコンテンツからメニューへのリンクを確実に選択できます。ただし、独自のカラースキームで特別なデザイン機能を備えたインターフェイスの場合は、十分ではない場合があります。
その場合は、カスタムのclassを作成し、好みのカラーを定義する必要があります。スタイルは次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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 {} |
ナビゲーションバーにドロップダウンが必要な場合は、さらに追加のclassも変更する必要があります。
|
1 2 |
.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 {} |
color, background, font-sizeなど、必要なプロパティを加えて使用してください。
ナビゲーションバーのスタイルを簡単に変更したい場合は、TWBColorがお勧めです。このオンラインツールを使用すると、Bootstrapのナビゲーションバーに好きなカラーを簡単に設定できます。
使い方は、簡単です。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が参考になります。
Bootstrapのナビゲーションバーのブレークポイントを変更する方法
これは少し上級者向けのテクニックです。ブレークポイントの変更は、思ったほど難しくありません。もちろん、いくつかのデフォルト機能を上書きする必要がありますが、Bootstrapを使えば、すべてが明確になります。
デフォルトではブレークポイントは768pxです。ただし、大きなスクリーンでナビゲーションバーをハンバーガーメニューに変換する場合は、Bootstrap 4ではそれ用のclassが用意されています。navbar-expand-* を加えるだけです。
|
1 |
<nav class="navbar navbar-expand-sm">..</nav> |
classにはバリエーションが用意されています。
|
1 2 3 4 5 6 |
<ul> <li>navbar-expand-sm- mobile menu on screens less than 576px.</li> <li>navbar-expand-md- mobile menu on screens less than 768px.</li> <li>navbar-expand-lg- mobile menu on screens less than 992px.</li> <li>navbar-expand-xl- mobile menu on screens less than 1200px.</li> </ul> |
スマホ用のメニューを使用しない場合は、navbar-expandを加えます。メニューを常にスマホ用にする場合は、このclassを加えます（expandのclassはありません）。
ブレークポイントを正確な数値、例えば1000pxにしたい場合は、メディアクエリを使用して次のように定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@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の理念は、素早いプロトタイピングを意味します。正常に機能するだけでなく、プロジェクトに簡単に組み込むことができるナビゲーションバーが用意されています。
Designmodoによってデザインされたナビゲーションバーで、多くのプロジェクトに適した美しいデザインです。ページの中央にメニューが配置され、ブランディングに必要な要素が含まれています。検索フォーム、サインインと登録の2つのボタンがあり、フォントやテキストカラー、背景を自由に変更できます。
Bootstrap 4 Navbar with Icon Top
Bootsnippの寄稿者の1人によって作成されたナビゲーションバーで、要素は両端に配置されており、中央分は空になっています。主な機能は、アイコン付きのメニューがあるため、管理パネルやさまざまなオンラインサービスのインターフェースに役立ちます。
Cloudflareにインスパイアされたデザインで、透明なナビゲーションバーは洗練されています。ロゴ、メニュー、SNSのアイコンが含まれており、さまざまなプロジェクトにすぐに利用できます。
Bootstrap 4 Mega Dropdown Menu Navbar
ここまでのナビゲーションバーは単一タイプでしたが、これはメガドロップダウンを備えています。 各サブメニューには、いくつかの列を含めることができます。リンク付きの画像を追加して、情報を提供するだけでなく、視覚的に興味をそそることもできます。
Bootstrap sticky navbar, affixing navbar after scroll
ページ全体でユーザーをフォローするナビゲーションバーが必要な場合、このソリューションが最適です。
Now UI Kitは、inVisionによってデザインされ、Creative TimによってコーディングされたBootstrap 4のツールセットです。カラフルなバージョンだけでなく、透明なバージョンもあり、さまざまなオプションも備えています。
Creative Timによってリリースされたもう1つのナビゲーションバーです。上記のソリューションとは異なり、このソリューションは管理ダッシュボードを備えています。
スライドのエフェクトを使いたい人には、このナビゲーションバーがお勧めです。美しいデザインと便利な機能を備えているだけでなく、操作が楽しくなるアニメーションも充実しています。
終わりに
Bootstrapのナビゲーションバーは、デザインに不可欠な要素です。優れたユーザーエクスペリエンスはそれに依存するため、適切に処理する必要があります。フレームワークの背後にあるチームは素晴らしい仕事をしますが、望ましい結果に到着する前に克服すべき問題がまだあります。
ここで紹介した慎重に設計されたナビゲーションバーのようなツールを使用すると、多くのトラブルなしでプロジェクトを進めることができます。
sponsors
