5th.md

5章：FVセクション

🤔概要

この章では簡易的なFV（1st view)を作成します。

🏁成果物の確認

(z-indexまだ指定できていない。)

↑要素の重なりは上記の順番になります

🎚️難易度・目安時間

• 難易度：レベル1
• 目安時間：30分

✏️手順書

Step1.必要な要素をindex.htmlに記載する

🏁ゴールイメージ

※ background-colorは仮で灰色に設定しています。

💡手順ヒント

1. h2とspanタグを使いましょう。

<br/>

Step2.cssでレイアウトを整える

🏁ゴールイメージ

• この時点では真ん中のフィルターは設置していません。

💡手順ヒント

1. background-imageと親要素のheightを設定。

• h2のフォントサイズを調整し、文字色を変更する。
• h2を上下中央揃えにする
  • 親要素に対してflexboxを設定してみる
  • aligin-itemsやjustify-contentを使ってみましょう

Step3.擬似クラスで背景のオーバレイ加工をする。

🏁ゴールイメージ

💡手順ヒント

1. 擬似クラス（::before）を使用する - contentがない場合はどう表記するか思い出しましょう。 - background-colorで配色をrgbaで指定すると透過できる。 - 画面一杯に表示するためにposition:abusluteを使う。

4.z-indexで重なりの順番を指定

メンタリングの際に確認

---

✅チェック