ヒーローイメージによくあるレイアウトを作る【flexbox版】

CSSレイアウトテクニック

概要

コードを編集し、以下のようなレイアウトを作成してください。

背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。
今回はflexboxを使用してください。

ポジションの場合は以下です。

ヒーローイメージによくあるレイアウトを作る【position版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 ヒント 文字を中央に置こう! 位置指定にはposition:absolute;を利用...

ヒント

  • 文字を中央に置こう!
  • 位置指定にはdisplay:flex;を利用
  • どんなウインドウサイズでも位置を中央にするにはflexboxにおいてはどうする?

目的

ヒーローイメージにおける要素の上下中央揃えをマスターする。

データ

使用ソフト

VisualStudioCode

答え(作業完了後にみてください。)

 

タイトルとURLをコピーしました