ナビゲーションのスタイルを定める - Bootstrapのチュートリアル

このレッスンではナビゲーションのリンクに スタイルを定めてみます。 今リンクのグループが ２つあるんですけど 上と下ですね。 上の方は ul 要素に li で a 要素を囲っています。 下の方は nav 要素の中に 直接 a 要素が含まれています。 デフォルトではスタイルが違うんですけど どちらも同じように ナビゲーションスタイルに することができます。 まず ul からいきましょう。 ul の方はクラスに nav というスタイルを与えます。 そして li と a 要素それぞれに クラスでスタイルを与えるんですが ではこの li の方から 先にいきますけど マルチカーソルにしますので option/Alt＋Shift を押しながら Dreamweaver の場合ですね、 ドラッグして 複数行にマルチカーソルを入れて class ですね。 そして li 要素の方は nav-item になります。 そして次、a 要素に移って class で nav-link そしてマルチカーソル一旦切って ライブビューを見てみると 横にリンクが並びました。 では nav 要素の方も 同じようにしてみましょう。 nav 要素のほうも こちらはクラスは nav ということで、そして a 要素の方ですね。 ここまたマルチカーソルでいきます。 option/Alt でドラッグをして そして ul の方と同じです。 クラスは nav-link、 マルチカーソルを外して ライブビューをクリックすると 同じスタイルになります。 これからさらにオプションを紹介しますけど ul の方でも nav でも 同じスタイルにできますので、今後は ul の方でスタイルを追加していきます。 まずは ul の方に justify-content-center というふうにしますと リンクのグループが 画面の中央になります。 そして content-end ですね。 そうすると右端 というふうになります。 スタートですと左端ですけど デフォルトですから その場合にはスタイルを 与える必要が通常はないでしょう。 ではさらにいきます。 今度はこれを消してしまって flex-column というふうにすると カラムですから縦並びになります。 またこれを消してしまって nav-tabs というふうにすると…