WordPressの使い方・Tips発信サイト

Bootstrap4を導入してナビゲーションを作ってみよう

bootrap navigation作成

今回はTwitterが開発したBootstrapの最新版であるBootstrap4の導入方法と新機能として追加された「navbar-toggler」を活用したナビゲーションのサンプルを紹介します。

Web開発用のデザインフレームワークとして非常に人気の高いBootstrap4は世界中のモダンでおしゃれなWebサイトがフレームワークとして採用しています。

簡単な設定でレスポンシブ対応の魅力的なナビゲーションを作ることができるので、是非参考にしてみてください。

この記事を読んで分かること

  • Bootstrap4の導入方法
  • 新機能「navbar-toggler」の設定例
  • ナビゲーションで書くコード

導入方法

まず公式サイトにアクセスしてBootstrap4をダウンロードします。
トップページ中央にある「Get started」をクリックしてください。

Bootstrap公式サイト

bootstrap公式ページ

次に画面左側にある「Download」をクリックします。

downloadをクリック

Downloadページ中央にある「Compiled CSS and JS」の「Download」をクリックしてBootstrapのZipファイルをダウンロードします。

zipをダウンロード

ダウンロードしたZIPファイルをダブルクリックして解凍します。解凍したファイルはそのまま使用するので適当な名前に変更しておきましょう。

名称変更

次にBootstrap4のDownload画面左側にある「Introduction」をクリックします。

Introductionをクリック

「Introduction」画面を下にスクロールしていくと中央あたりに「Starter template」があります。こちらはBootstrap4の雛形ファイルになりますのでコピーしてお使いのテキストエディタに貼り付けましょう。コピーする際は画面右側の「Copy」をクリックすればOKです。

Copyをクリック

コピーした雛形ファイルをテキストエディタに貼り付けたら、<html lang=”en”>となっているところを<html lang=”ja”>に変更して日本語対応にしておきましょう。

langageをjaに変更

編集が完了したらファイル名を「index.html」に変更してBootstrap4のファイルに入れてください。「css」「js」と「index.html」があればOKです。これでBootstrap4の導入は完了です。

css js index.html

ナビゲーションの作り方

ここからはBootstrap4で追加された新機能でもあるnavbar-togglerを使ったナビゲーションメニューのサンプルを紹介します。navbar-togglerクラスはレスポンシブ対応のナビゲーションを簡単に作成することができる便利な機能なので、是非活用してみてください。

これから作るナビゲーションの完成例
ナビゲーションサンプル

こちらのナビゲーションメニューはPCで表示した際は上画像のように表示されますが、スマホなどの画面サイズの小さなデバイスで表示した場合は下画像のようなハンバーガーメニューになります。ハンバーガーメニューになった際に自動でサイトのロゴが消えるように設定されています。

ロゴなし ハンバガーメニューあり

ハンバーガーメニューをクリックすると下画像のようにメニューがリスト表示されるようになっています。

メニュー展開後

以下のサンプルコードを事前に用意した雛形ファイルの<body>内に貼り付けると同じように表示できるので、お試しください。

続いてハンバーガーメニュー時でもサイトロゴが表示されるタイプのナビゲーションです。
PCで表示した場合は通常のメニューで表示されます。
ロゴあり ハンバガーメニューあり

スマホの画面サイズで表示した際にも先ほどのサイトロゴがハンバーガーメニューの中に入ることなくトップに表示しているのが分かります。今回はハンバーガーメニューを右側にセットしています。

ロゴあり ハンバガーメニューあり

ハンバーガーメニューをクリックするとメニューが一覧で表示されます。サイトロゴはハンバーガーメニューと同じ位置に表示されています。スマホで表示される際もサイトロゴを維持したい方に最適な機能です。

メニュー展開後

こちらもサンプルコードを記載しておきます。ご自由にお使いください。

次はtoggler機能を活用してハンバーガーメニュー内にコンテンツを表示するサンプルです。

こちらはPCでもスマホサイズでもハンバーガーメニューを表示させるようになっています。背景をサイトと合わせればハンバーガーメニューのみで表示することができます。

ハンバガーメニューのみ表示

ハンバーガーメニューをクリックすると折りたたまれていたコンテンツが表示されます。ユーザーが任意で表示を切り替えられるので、長いテキストなどの説明文などを格納しておくのに非常に便利です。

ロゴの下にハンバガーメニューを表示

こちらも、サンプルコードを記載しておきます。

まとめ

Bootstrap4では簡単にレスポンシブ対応のモダンなデザインが作れるようになっています。

Bootstrap3の時とは各種設定の方法が変わっていますので、クラスの書き方などに戸惑う方もいるかもしれませんが、今後はBootstrap4の方が主流になっていくと思いますので、是非慣れてみてください。

ユーザビリティに優れたBootstrap4は、コーディングしやすいのが最大の特徴です。各機能をマスターして魅力的なサイトを効率的に作成できるようになりましょう。