写真と重ねてテキストを配置し、スタッフエリアを作ります。
1.大まかにブロックを組む
staff紹介の部分は、フルスクリーン表示部分です。
背景画像として、画面幅いっぱいにスタッフの写真を表示するクラス(staff)を作ります。
その中に、以下2つのdivを入れ子にしていきます。
- containerクラス（max-width:1140px）を適用したdiv
- 半透明のBOXを作成するためdiv
一番内側のdivには、半透明にするためのCSSが書けるよう「staff-description」クラスを新たに指定します。
コードにするとこのような形です。
index.html
2.背景を設定する
新しく作ったstaff、staff-descriptionクラスのCSSを書いていきます。
- staffクラス：背景画像としてスタッフの皆さんが写った写真指定
- staff-descriptionクラス：半透明の白を背景色として指定
style.css
※ .staffをフレックスコンテナ化しているのは、配置がしやすいためです。
これ以外の方法で配置をする場合、flexコンテナ化しなくても構いません。
ここまでcssを書いたら、ブラウザで見てみましょう。
下図のように背景画像・背景色が表示されていればOKです。
3.位置を調整する
staff-descriptionクラスのdivの、サイズと配置を調整します。
幅はブラウザ幅に合わせて柔軟に対応してくれるよう%単位で指定しました。
配置場所はmarginを使って調整しています。
これでスタッフエリア（PCレイアウト）は完成です。