【レイアウト構成】初級編：ポートフォリオサイト／1カラム

コーディングのヒント!

header

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

ロゴ

h1タグで記述します。

グローバルナビ

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

コーディングのヒント!

• ・画像に高さを指定して高さを固定します。
• ・object-fitで、固定したエリアの中に画像を表示することができます。
• ・レスポンシブ時の画像の切り替えは、pictureタグで行います。

解説!

コーディングのヒント!

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

タイトル

h2タグで記述します。

プロフィール

タイトル下のプロフィールはul、liのリストタグで記述します。
一番下のテキスト情報はpタグで記述します。

コーディングのヒント!

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

タイトル

h2タグで記述します。

画像リスト

ul、liタグで記述を行い、flexboxの両端揃えで横並びに配置します。
flex-wrapで折り返しを指定します。
レスポンシブ時は、flex-directionで縦積みにします。

コーディングのヒント!

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

タイトル

h2タグで記述します。

ニュース

ニュースの一覧部分はdl、dt、ddタグで記述します。
日付がdtタグ、ニュース内容がddタグです。
このように「説明したいワード」と「説明内容」とがペアになるようなリストは、dlタグが適しています。
dtタグとddタグはflexboxで横並びに配置します。

コーディングのヒント!

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

タイトル

h2タグで記述します。

フォーム

フォームのエリアはformタグで囲みます。
入力フィールドやボタンなど、フォームに関する情報は全てこのformタグ内に記述します。
フォーム内はdlタグを用いて、ラベルをdtタグ、入力フィールドをddタグで記述します。
dtタグとddタグは、flexboxで横並びに揃えます。
送信ボタンは、CSSの「:hover」で、マウスホバー時の色反転を実装します。

コーディングのヒント!

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