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

目次

全体のレイアウト構成

サイト全体のレイアウト構成

解説!

1カラムのシンプルなレイアウトです。
レイアウト構成は下記の通りです。

header
ロゴとグローバルナビを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div(#mainvisual)
メインビジュアルのエリアを囲みます。
section(#about)
Aboutコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#works)
Worksコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#news)
Newsコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#contact)
Contactコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。

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

header

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

コーディングのヒント!

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

div(#mainvisual)

メインビジュアルのレイアウト構成

コーディングのヒント!

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

section(#about)

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

解説!

コーディングのヒント!

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

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

section(#works)

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

コーディングのヒント!

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

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

section(#news)

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

コーディングのヒント!

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

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

section(#contact)

コンタクトエリアのレイアウト構成

コーディングのヒント!

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

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

コーディングのヒント!

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

コーディング練習メニューに戻る

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習