主婦がアプリをリリースするまでの軌跡

自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。

【Bootstrap4】navbarを2段にしてみた。

f:id:song-of-life1352607:20170220105406j:plain

こんにちは、マリンです。

大変おひさしぶりになってしまいました。

いろいろと仕事獲得のために動いてまして・・・

つまり何も進展がなくて書くことがなかっただけです。

今回「既存のHPを自由にレスポンシブしちゃって!」と言うとある課題を頂きましたので、

その時に行った表題の件です。



概要

基本、ホームページのスタイリングにはBootstrap4を使っております。

デフォルトのnavですが、ご存知の通りnavbar-brand含め左寄せです。

f:id:song-of-life1352607:20170603224850j:plain


これを画面の幅に合わせて、

広い時はロゴを上段、ナビを下段。

狭い時はインラインにしたいと思いました。

ついでにナビを中央揃えにします。

f:id:song-of-life1352607:20170603224747j:plain


float: none;じゃ上手くいかない!

いろいろ調べたのですが、Bootstrap3でのやり方ばかりで4の情報がなく、

それでは上手くいかなくて困り果てた挙句、本家のソースを見に行きました。

github.com




問題はこいつです!

  display: flex;




Bootstrap3まではfloatで位置を指定していたので、

float: none;でできたようなのですが、

4からはこのdisplay: flex;を使っているのでこいつが使えないのですね。


display: flex;とは?

CSS3から導入されたレイアウトモードです。

これまでfloatなどを使ってコンテンツをレイアウトしていたものを、

より柔軟に、かつ簡単にレイアウト出来るようになりました。

そしてレスポンシブデザインでも便利そうです。


詳しくはこちらをご覧ください。

www.webcreatorbox.com

まだ対応していないブラウザもあるようなのでご注意ください!


では本題です。


1. クラスを追加する

スタイルの上書きのためのclassを追加します。

追加するのはナビの一番の親に当たる<nav>です。

  <nav class="navbar navbar-toggleable-md navbar-light bg-faded gnav">

最後のgnavがそれです。(名前は任意)


2. スタイルを上書きする

追加したクラスにスタイルをあてます。

.gnav {
  flex-direction: column;
}

flex-direction : カラムをどの方向に並べるかを指定するプロパティです。

column : 文を改行した時に向う方向に並べます。わかりにくですが、通常上から下です。

値については他にもいろいろあるので調べてみてください。


以上です!

長い時間ハマったのが馬鹿みたいなくらい簡単でした・・・


詳しくはこちらをご覧ください。

【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します




無事2段にはできましたが、

このままでは「ロゴが中央なのにナビは左寄せ」

という現象が起きます。(理由は後ほど)

なのでナビを中央揃えにします。


1. ulの幅を100%にする

ナビのリストを囲っているulの幅を100%にしてください。

ul {
  width: 100%;
}

これをやらないとこの後の処理をいくらやっても真ん中に入ってくれません。


2. クラスを追加する

中央寄せにするためのclassを追加します。

        <ul class="navbar-nav navbar-justified">

最後のnavbar-justifiedがそれです。(名前は任意)


3. スタイルを上書きする

追加したクラスにスタイルをあてます。

.navbar-justified {
  justify-content: center;
}

justifiy-content : コンテンツの横方向の位置を指定するプロパティです。

center : 中央揃えにします。

このほかに均等配置にするspace-betweenなどいろいろあります。


詳しくはこちらをご覧ください。

【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します

これで無事に完了です!


ロゴが中央なのにナビは左寄せ

前にお話ししたこれです。

原因は2つあります。


原因1 : navbar-navにはコンテンツの配置指定がない

親の.navbarにはデフォルトでjustifiy-content: space-between;が指定されています。

しかし<ul>についてるクラスのnavbar-navにはついていません。

そのため、<ul>の範囲外のnavbar-brandであるロゴは中央配置になったのですね。


原因2 : ulの幅

原因1に気づいて一生懸命指定しましたが、最初うまくいきませんでした。

そこでデベロッパーツールで見てみると、

<ul>が左に寄って、かつ幅が狭かったのです。

その幅の中で真ん中にはなっているけど、

そもそもの幅が狭かったせいで全体の中央にこなかったのですね。


まとめ

今回は本当に良い勉強になりました!

何よりも、今までちんぷんかんぷんだった本家のソースとか見ちゃってる自分に感動ですw

でもフレームワークを使用する場合、

思ったようにならない時は元のソースを見ることも必要ですね。