ナビゲーションバーをつくる - Bootstrapのチュートリアル

このレッスンではナビゲーションのリンクに ナビゲーションバーの スタイルを与えてみます。 今ナビゲーションリンクの 基本的なスタイルが２つできているんですけど １つ目は ul 要素の中にリスト、 li 要素で a 要素を囲んでいます。 下の方は nav 要素の中に a 要素を直接置いています。 けれども基本的な nav のスタイルを 与えてありますので どちらも同じような 表示になっています。 これをナビゲーションバーの 形にしたいと思います。 ではまず上の ul 要素の方からいきましょう。 こちらにナビゲーションバーは まず全体を nav 要素で囲みます。 class でここにはまず 基本的な navbar というクラスを与えます。 そして次に div 要素、 これは簡単なものであれば なくても構わないんですけど ナビゲーションバーに いろいろと設定を追加するときに div 要素で全体を囲んであったほうが 作業がしやすいです。 ですので今のうちに加えておきます。 クラスはとりあえずは container でいいでしょう。 container-fluid の方にしておきます。 そしてとりあえず くくってしまいます。 この中に ul 要素、 一旦折りたたみましょうか。 折りたたんだものを選択して そして広げてこの状態で ドラッグで移動します。 インデントを整えておきましょう。 １つ２つと、 こんな感じでしょうか。 そして ul 要素のクラス、こちらは nav ではなくて navbar ですね。 navbar-nav というふうにしておきます。 あまり見た目変わらないですかね。 縦長になりました。 今度は navbar に行くんですけど その前に この active のクラスなんですが ナビゲーションバー、navbar の場合には a 要素ではなくて li 要素ですね。 item の後に 入れておいたほうがいいでしょう。 こちらに移します。 では nav 要素の方ですね。 こちらも２つ、 これを［コピー］して そして［ペースト］します。 やはりまず、くくる方から 先にやっておいて そしてこれは簡単に選べますね。 ドラッグして持っていって インデントを整えます。 そして nav 要素の中に nav 要素になってしまいますので ここは div に置き換えます。 閉じの方も div で、と。 そしてここが navbar-nav というふうになるわけですね。 表示が同じになりました。 さて、これにスタイルを 加えていきます。 上の ul 要素を 使った方で作業していきます。 この全体の nav 要素ですね。 ここで全体の スタイルを整えていきます。 まずは navbar expand という クラスがあるんですが expand というのは 横に広げるということなんですけど 横に広げるのと 縦に伸ばすのと これはデバイスによって 画面の大きさによって変えることができます。 その場合、どの大きさになったら 変えるのかということで 小さい場合に この縦並びにしたいという時には navbar-expand-sm ですね。 これでまずは 横並びなんですけど 縮めると縦になる というふうにできます。 もう少しスタイルを 整えていきましょう。 今度は navbar、 これはカラーが変わるんですけど テキストのカラー、 今はブルーが基調になっていますね。 nabvar-light というのを選ぶと 文字がグレーの基調ということに なってきます。 そしたらこれをコピーして しまえばいいですね。 下の方も同じように したいと思いますので ［コピー］して そして［ペースト］ということで 下の方のナビゲーションバーは もう１つ、a 要素にスタイルを加えます。 マルチカーソルにしますので option/Alt キーを押しながら Shift キーを加えて ドラッグして 複数行にカーソルを入れます。 上の li 要素と同じです。 nav-item ですね、 これを加えます。 ということで スタイルが両方とも同じになりました。 では保存して ブラウザーで確認しましょう。 ファイルを保存します。 上も下も同じスタイルに なっていますね。 active にしてあったのが この Home です。 それから disabled の指定も してありましたので 薄いグレーになっています。 そして幅が広い時、 ウィンドウの幅が広い時には 横並びということなんですが これを縮めてみます。 小さくした時ですから この辺ですね。 この辺で縦になると いうふうに変化します。 このレッスンでは ナビゲーションの基本的なリンクのスタイルを ナビゲーションバーのスタイルに変えました。 基本的な部分というのは この ul 要素、 あるいは元は nav 要素だったんですが この部分ですね。 そこを基本的に維持しつつ 全体を nav 要素と div 要素で囲む。 そしてこちらの方は 元は nav あったものは div にしてあげる ということですね。 その上で nav 要素には 基本 navbar、 それにさらにスタイルを加えて navbar-expand-sm 横並び、縦並びがウィンドウの サイズによって変わります。 あと文字のカラーが変わったんですけど navbar-light そして div 要素の方は container-fluid という設定にしました。 その上で ul 要素、 あるいは元は nav 要素から div 要素に変更したこの要素には クラス navbar-nav を 与えればいいということですね。 そして active は li 要素の方に加えると、 そしてこちらの方では リンクの a 要素に navbar-item を 加えるということでした。