【HTML/CSS コーディング解説】初級：ポートフォリオサイト（前編）

全体の構成

headerやmain、footer、sectionといった大きなブロック単位での分割です。

今回のサイトの場合は、下記のようなブロックにわかれます。

大きくわけてheader、main、footerの３つにわかれ、mainの中にメインビジュアルとAbout、Works、News、Contactセクションが含まれます。

続いて、各パーツの中のレイアウト構成を考えていきましょう。

ヘッダーの構成

まずはheaderのレイアウト構成です。
headerの中は下記のようにわかれます。

ロゴがh1タグ、グローバルナビゲーションがnavタグです。
navタグの中のメニューは、ul、liのリストタグで記述します。

続いてmainの中身です。

メインビジュアルの構成

メインビジュアルは下記の通り、divタグで囲むだけです。

CSSでレイアウト調整を行います。

Aboutセクションの構成

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

中は、タイトルをh2タグ、プロフィールをul、liタグ、pタグで記述します。

Worksセクションの構成

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

タイトルをh2タグ、画像をul、liタグで囲みます。
画像はフレックスボックスで横並びに配置します。

Newsセクションの構成

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

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

Contactセクションの構成

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

タイトルをh2タグ、フォームエリアをformタグで囲みます。
入力フィールドやボタンなど、フォームに関する情報は全てこのformタグ内に記述します。
フォーム内はdlタグを用いて、ラベルをdtタグ、入力フィールドをddタグで記述し、Flexboxで横並びに揃えます。

フッターの構成

最後に、footerです。
footerは、全体をfooterタグで囲むだけです。

以上で、レイアウト構成は終了です。

それでは、いよいよ後編のコーディングに入っていきましょう！