1.大枠を作る
ヒーローエリアを作るために、まずmainタグの中にdivを一つ作ります。
CSSクラスは、以下の３つを指定してください。
- viewport 全体に広がる全幅の
container-fluid - 画面の高さいっぱいに表示されるように
min-vh-100 - オリジナルのスタイル指定を追加する
hero（独自クラス）
cssファイルで、heroクラスに対して背景画像の設定を記述します。
background-attachmentプロパティ
background-attachmentプロパティは画面をスクロールする際に、背景画像をスクロールと一緒に動かすか・最初に表示された位置のまま固定しておくかを指定するプロパティ。
プロパティ値をfixedに設定すると背景は固定され、簡単にパララックス風の効果を作ることが出来ます。
設定が完了したらブラウザで表示を確認しましょう。
※現時点ではナビバーとheroの背景が固定されているかは確認きません。
下部のコンテンツ作成を進めていく際に確認してみてください。
2.中央に「I am Morgan Freeman」を表示
ヒーローエリアの中心にテキストを表示させます。 作り方はいくつかありますが、今回はflex関連プロパティを活用します。
【作成手順】
- heroクラスを指定したdivに、
d-flex justify-content-center align-items-centerクラスを追加 - 上記divの中にh1で囲った「I am Morgan Freeman」を追加
- h1タグに
intro-titleというオリジナルクラスを追加 - cssで
intro-titleのフォントサイズなどを設定する
【HTML】
【css】
【ブウラウザで表示を確認】
これでヒーローエリアまでは完成です。