サイト名称変更のお知らせ

【レイアウト構成】入門編:フォトサイト2/1カラム

目次

全体のレイアウト構成

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

解説!

レイアウト構成は下記の通りです。

header
ロゴを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div(#mainvisual)
メインビジュアルのエリアを囲みます。
section(#index)
Indexコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
画像エリア
ul、liタグで画像エリアを囲みます。
section(#detail)
Detailコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。

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

header

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

コーディングのヒント!

ヘッダー全体をheaderタグで囲みます。
ロゴをh1タグで記述します。

div(#mainvisual)

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

コーディングのヒント!

メインビジュアル全体をdivタグで囲み、マージンの設定を行います。

section(#index)

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

コーディングのヒント!

エリア全体をsectionタグで囲み、背景をグレーに設定します。

タイトル
h2タグで記述します。
Indexリスト
全体をdivタグで囲み、枠線を引きます。
番号付きのリスト、ol、liタグを使用して目次をコーディングします。
ちなみに、順序性のない箇条書きの場合は、ul、liタグを使用します。

画像エリア

画像エリアのレイアウト構成

コーディングのヒント!

ul、liタグで記述し、Flexboxで横並びに配置します。
画像が2列になるよう、liタグにwidthを設定するのとFlexboxに折り返し設定するのを忘れずに行いましょう。

section(#detail)

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

コーディングのヒント!

エリア全体をsectionタグで囲み、背景をグレーに設定します。

タイトル
h2タグで記述します。
出版情報とテキストエリア
全体をdivタグで囲み、Flexboxで横並びに配置します。
著者、出版社、発行年
dl、dt、ddタグで記述します。
フッターのレイアウト構成

コーディングのヒント!

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

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

関連記事

コーディング練習一覧

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

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

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

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

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