## Webサイトの概要・仕様

以下の「テーマ」「ページ構成」「フォルダーおよびファイル構成」「仕様」に従い、Webサイトを完成させなさい。

### テーマ

- 実技問題操作練習のWebサイトである。
- このページは操作練習です。ここには、トップページの概要が掲載されます。
- このページは操作練習です。ここには、一つ目の下層ページの概要が掲載されます。
- このページは操作練習です。ここには、二つ目の下層ページの概要が掲載されます。
- このページは操作練習です。ここには、三つ目の下層ページの概要が掲載されます。

### ページ構成

下図の通りのページ構成とし、トップページと各ページは相互にリンクさせること。

### フォルダーおよびファイル構成

- 「site」フォルダー内に必要なファイルを作成・修正し、Webサイトを完成させること。
- 問題で使用する画像ファイルは、「images」フォルダー内のファイルを使用すること。
- 問題で使用するCSSファイルは、「css」フォルダー内のファイルを使用すること。
- 「material」フォルダーには、「start_rensyu.html」に関連するファイルが格納されている。関連するファイルの閲覧は「start_rensyu.html」からWebブラウザーで開き、確認すること。

- 「実技用」フォルダー
  - start_rensyu.html
  - 「material」フォルダー
  - 「site」フォルダー
    - index.html
    - ○○○.html ★新規作成
    - ○○○.html ★新規作成
    - ○○○.html ★新規作成
    - 「css」フォルダー
      - common.css
      - style.css
    - 「images」フォルダー
      - ○○○.png
      - ○○○.gif
      - ○○○.jpg

### 仕様

以下の仕様で記述すること。

- マークアップ言語：HTML5
- スタイルシート：CSS 2.1およびCSS3
- 文字コード：UTF-8（BOM付推奨）
- 改行コード：CR+LF

## 問題1 トップページと基本レイアウトの作成

仕上り見本を参考に基本ページを作成しなさい。

- 仕上り見本：各領域の名称
- 仕上り見本：トップページ

### トップページのHTMLの編集

「site」フォルダーにある「index.html」に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示

### 基本レイアウトのCSSの編集

「css」フォルダーにある「style.css」の「/* 基本レイアウト ここから↓ */」と「/* 基本レイアウト ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

変更するセレクター
セレクター名を表示

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター | セレクター名を表示
プロパティ | プロパティ値を表示

問題1は終了です。問題2に進んでください。

## 問題2 各ページのフォーマットの複製

仕上り見本を参考にフォーマットを作成しなさい。

- 仕上り見本：一つ目の下層ページ

### ページのフォーマットの複製

問題1(1)で保存した「index.html」を複製し、保存しなさい。

#### 問題タイトル

「index.html」を複製し、「○○○.html」として保存する。

### フォーマットのHTMLの編集

「○○○.html」に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

### 基本レイアウトのCSSの編集

「css」フォルダーにある「style.css」の「/* 基本レイアウト ここから↓ */」と「/* 基本レイアウト ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター | セレクター名を表示
プロパティ | プロパティ値を表示

### フォーマットを使用した各ページの複製

問題2(2)で保存した「○○○.html」を複製し、保存しなさい。

#### 問題タイトル

「○○○.html」を複製し、「○○○.html」、「○○○.html」として保存する。

問題2は終了です。問題3に進んでください。

## 問題3 一つ目の下層ページの作成

仕上り見本を参考に一つ目の下層ページを作成しなさい。

- 仕上り見本：一つ目の下層ページ

### 一つ目の下層ページのメイン領域のHTMLの編集

問題2(2)で保存した「○○○.html」のメイン領域に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

### 一つ目の下層ページのCSSの編集

「css」フォルダーにある「style.css」の「/* 一つ目の下層ページ ここから↓ */」と「/* 一つ目の下層ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター | セレクター名を表示
プロパティ | プロパティ値を表示

問題3は終了です。問題4に進んでください。

## 問題4 二つ目の下層ページの作成

仕上り見本を参考に二つ目の下層ページを作成しなさい。

- 仕上り見本：二つ目の下層ページ

### 二つ目の下層ページのタイトルに関連するHTMLの編集

問題2(4)で保存した「○○○.html」に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示

テキスト
テキストを表示

### 二つ目の下層ページのメイン領域のHTMLの編集

「○○○.html」のメイン領域に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

ソース
ソースを表示

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

### 二つ目の下層ページのCSSの編集

「css」フォルダーにある「style.css」の「/* 二つ目の下層ページ ここから↓ */」と「/* 二つ目の下層ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター | セレクター名を表示
プロパティ | プロパティ値を表示

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター | セレクター名を表示
プロパティ | プロパティ値を表示

問題4は終了です。問題5に進んでください。

## 問題5 三つ目の下層ページの作成

仕上り見本を参考に三つ目の下層ページを作成しなさい。

- 仕上り見本：三つ目の下層ページ

### 三つ目の下層ページのタイトルに関連するHTMLの編集

問題2(4)で保存した「○○○.html」に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示

テキスト
テキストを表示

### 三つ目の下層ページのメイン領域のHTMLの編集

「○○○.html」のメイン領域に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

### 三つ目の下層ページのCSSの編集

「css」フォルダーにある「style.css」の「/* 三つ目の下層ページ ここから↓ */」と「/* 三つ目の下層ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター | セレクター名を表示
プロパティ | プロパティ値を表示

#### 問題タイトル

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター | セレクター名を表示
プロパティ | プロパティ値を表示

問題5は終了です。実技問題は以上です。