【レイアウト構成】入門編：プロフィールサイト／1カラム

コーディングのヒント!

header

ロゴとグローバルナビをFlexboxの両端揃えで横ならびに配置します。

ロゴ

h1タグで記述します。

グローバルナビ

navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。

コーディングのヒント!

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

※object-fitプロパティの使い方については、「object-fitプロパティの使い方について」で詳しく解説しています。

コーディングのヒント!

エリア全体をsectionタグで囲みます。
プロフィール画像とテキストの外側をdivで囲み、flexboxの中央揃えで横並びに配置します。

画像

画像にborder-radiusを指定することで丸く切り抜くことができます。widthとheightで円のサイズを調整します。

コーディングのヒント!

エリア全体をsectionタグで囲みます。

画像

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

コーディングのヒント!

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