1. 初期設定をする
完成図を見ると、背景色は白ではなく薄いグレー。 テキストやリンクテキスト色は、黒よりもやや薄めの色になっています。 そこだけ先にcssで設定してしまいましょう。
2.ヘッダーナビゲーションを作る
今回の課題では背景色が半透明、ブラウザの上部に固定されたナビゲーションを作ります。
1.ナビゲーションテンプレートを設置
Bootstrapのサイトに行き、ナビゲーションのテンプレートをコピーしてきます。
ナビゲーションのページの「左にブランド名、右にトグル」のコードををコピーし、HTMLファイルの<header>内に貼りつけましょう。
そのままでは色が違うので、配色に関わるCSSクラスで調整します。
- navに付けられているnavbar-light bg-lightクラスを削除
- navbar-darkクラスを追加
2.ナビバーの文字と色をデザインに合わせる
今回は、ヘッダーが常に上部に固定されるようにしたいです。
Bootstrapサイトのutilities > Positionのページで紹介されているfixed-topというクラスを加えてください。
【HTML】
背景色を半透明にするために独自にnavbarに対して背景色の指定を加えます。
【CSS】
ここまでの設定で表示されるナビバーがこちら。
3.ナビバーの配置を合わせる
ナビバーの配置をデザインと同じになるように設定していきます。 Search部分は使わないので削除してしまいましょう。
【変更点】
- navタグの中身を全て囲うdivを設置
- 上記divに
containerクラスを適用 - ナビゲーションリスト(ul)の直上にあるdivにjustify-content-endクラスを追加
- li要素に余白クラスをつけ、間隔を開ける
- cssでそれぞれの文字色・サイズを指定する。
【HTML】
【CSS】
ブラウザで表示を確認してください。
