各パーツのレイアウト構成

header

ヘッダーのレイアウト構成

コーディングのヒント!
headerロゴとグローバルナビをFlexboxの両端揃えで横ならびに配置します。ロゴh1タグで記述します。グローバルナビnavタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。

div(#mainvisual)

コーディングのヒント!

画像に高さを指定して高さを固定します。
object-fitを使用することで、固定したエリアの中に画像を表示することができます。

section(#about)

Aboutエリアのレイアウト構成

コーディングのヒント!

エリア全体をsectionタグで囲みます。
プロフィール画像とテキストの外側をdivで囲み、flexboxの中央揃えで横並びに配置します。画像画像にborder-radiusを指定することで丸く切り抜くことができます。widthとheightで円のサイズを調整します。

section(#skills)

コーディングのヒント!

エリア全体をsectionタグで囲みます。画像ul、liタグで記述を行い、CSSのflexboxで横並びに配置します。
各画像の説明用のタイトルをh3タグで記述します。

フッターのレイアウト構成

コーディングのヒント!

フッター全体をfooterタグで囲みます。
コピーライトをpタグで記述します。