はじめに

今回はBootstrapのnavbarについてです。

Webページにナビゲーションバーを作りたいと思い、bootstrapのnavbarを導入してみました。

しかし公式の通りにやってもうまくいかなかったので、同じく悩んでいる方がいたら参考にしてください。

公式のやり方じゃ適用されなかった、、、

Bootstrapをつかったナビゲーションバーの作り方

Bootstrap公式によると、
左寄せと右寄せでulタグを分けて、左寄せの方のulタグのクラスにmr-autoを適用すればいいのだそう。

<div class="collapse navbar-collapse" id="XXX">
    <!-- 左寄せ -->
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
　　<!-- 右寄せ -->
    <ul class="nav navbar-nav">
　　　　<li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
  </div>

Laravelの勉強をララ帳でやっていて、ララ帳でもこのような紹介がされていました。

しかしながら私はこのままではすべて左寄せで表示されてしまいました。

しらべてみると、Bootstrapのバージョン等が問題でmr-autoが効かないというような記事もありました。

Bootstrap4をLaravelに導入をしてみるも左寄せのままでした。

解決策：divタグで無理やり左寄せと右寄せに分ける

<div class="collapse navbar-collapse" id="XXX">
  <!-- 左寄せ -->
  <div class="navbar-left"> <!-- ここを追加（どっちでもいい） -->
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
  </div>
  <!-- 右寄せ -->
  <div class="navbar-right"> <!-- ここを追加 -->
    <ul class="nav navbar-nav">
　　　　<li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
  </div>
</div>

こんな感じにdivタグのクラスにnavbar-rightを追加して、うまく右寄せが適用されました。

ポイント

画像の枚数とアニメーションにかける時間によって実装をしよう！
実装の仕方が少し変わるから気をつけよう！

index.html

    <div class="main-slide">
      <img src="images/pic00.png" alt="">
      <img src="images/pic01.png" alt="">
      <img src="images/pic02.png" alt="">
    </div>

style.css

* {
  padding: 0;
  margin: 0;
}

.main-slide {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.main-slide img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: slide-animation 24s linear infinite 0s;
}

.main-slide img {
  height: auto;
}

.main-slide img:nth-of-type(2){
  animation-delay: 8s;/*2枚目の開始時間*/
}

.main-slide img:nth-of-type(3){
  animation-delay: 16s;/*3枚目の開始時間*/
}

@keyframes slide-animation {
  0% {
    animation-timing-function: ease-in;/*ゆっくり表示される*/
    opacity: 0;
  }
  12% {
    animation-timing-function: ease-out;/*表示された*/
    opacity: 1;
  }
  30% {
    opacity: 1;/*＊表示期間*/
  }
  43% {
    opacity: 0;/*次の画像で消えている*/
  }
  100% {
    opacity: 0;/*表示されていない時間*/
  }
}

実際の動き

何が起きたか

１.opacityで、背景画像を透過させようとした

.card {
  opacity: 0.8;
  border-radius: 1em;
  padding: 1.5rem;
  height: 100%;
  border: none;
}

2.ん？コンテンツの画像も透過してしまっている？

3.opacityを子クラスまで継承してしまっているから、imgだけopacity:1にしよう〜！

.card-img {
  opacity: 1.0;
}

4.ならない！！どうしましょ！

解決策

background-colorのrgbaのalpha値の透明度を変更！

.card {
  /* opacity: 0.8; */
  border-radius: 1em;
  padding: 1.5rem;
  height: 100%;
  border: none;
  background-color: rgba(255, 255, 255, 0.95); /* ←これを追加 */
}

画像が透過されていない！

RGBaとは

CSS3から、RGBa(Red,Green,Blue,Alpha)という色指定のプロパティを使うことにより、色の透明度（alpha値）の指定が可能になりました。これによって、今まではベタ塗りでも透過している背景色などは画像で指定する必要がありましたが、CSSで記述できるようになりました。
RGB各色には0～255までの色の濃さを示す数値を入力し、最後のアルファ値には0～1（小数点で0.8、0.55など）で指定します。
背景色（background-color）の他にも、
・文字（color）
・枠線（border-color）
なども透過可能です。

(参考)http://kawatama.net/web/1108

まとめ

透過方法には、
- rgbaのalpha値を使う
- opacityを使う
方法の2種類があるみたいです！
今回のように、画像などには透明度を適用させたくない場合は、opacityを使えばOKです！

何が起きたか

１.opacityで、背景画像を透過させようとした

.card {
  opacity: 0.8;
  border-radius: 1em;
  padding: 1.5rem;
  height: 100%;
  border: none;
}

2.ん？コンテンツの画像も透過してしまっている？

3.opacityを子クラスまで継承してしまっているから、imgだけopacity:1にしよう〜！

.card-img {
  opacity: 1.0;
}

4.ならない！！どうしましょ！

解決策

background-colorのrgbaのalpha値の透明度を変更！

.card {
  /* opacity: 0.8; */
  border-radius: 1em;
  padding: 1.5rem;
  height: 100%;
  border: none;
  background-color: rgba(255, 255, 255, 0.95); /* ←これを追加 */
}

見事！画像が透過されていない！！

RGBaとは

CSS3から、RGBa(Red,Green,Blue,Alpha)という色指定のプロパティを使うことにより、色の透明度（alpha値）の指定が可能になりました。これによって、今まではベタ塗りでも透過している背景色などは画像で指定する必要がありましたが、CSSで記述できるようになりました。
RGB各色には0～255までの色の濃さを示す数値を入力し、最後のアルファ値には0～1（小数点で0.8、0.55など）で指定します。
背景色（background-color）の他にも、
・文字（color）
・枠線（border-color）
なども透過可能です。

(参考)http://kawatama.net/web/1108

まとめ

透過方法には、

• rgbaのalpha値を使う
• opacityを使う

方法の2種類があるみたいです！
今回のように、画像などには透明度を適用させたくない場合は、rgbaのalpha値を使えば良いと思います！