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

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

### テーマ

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

### ページ構成

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

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

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

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

### 仕様

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

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

## 問題1 基本ページの作成

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

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

### 基本ページのHTMLの編集

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

#### 問題タイトル

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

テキスト
テキストを表示

#### 問題タイトル

#####

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

ソース
ソースを表示

#####

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

ソース
ソースを表示

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

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

#### 問題タイトル

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

#### 問題タイトル

#####

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

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

#####

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

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

### 基本ページを使用した各ページの複製

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

#### 問題タイトル

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

### 各ページのCSSスプライトに関連するHTMLの編集

各HTMLファイルに、以下の設定を行い、保存しなさい。

#### 問題タイトル

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

### 各ページのCSSスプライトに関連するCSSの編集

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

#### 問題タイトル

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

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

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

## 問題2 トップページの作成

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

- 仕上り見本：トップページ
- 仕上り見本：トップページ（レスポンシブWebデザイン）

### トップページのタイトルに関連するHTMLの編集

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

#### 問題タイトル

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

### トップページのJavaScriptに関連するHTMLの編集

「index.html」に、JavaScriptによるスライドの設定を行い、保存しなさい。
なお、スライドの表示はブラウザーで確認すること。

#### 問題タイトル

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

#### 問題タイトル

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

### トップページのメイン領域のHTMLの編集

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

#### 問題タイトル

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

#### 問題タイトル

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

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

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

#### 問題タイトル

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

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

### トップページのレスポンシブWebデザインに関連するHTMLの編集

問題2(3)で保存した「index.html」に、レスポンシブWebデザインの設定を行い、保存しなさい。

- ・レスポンシブWebデザインの表示はブラウザーの幅を縮めて確認すること。
- ・ブラウザーがEdgeの場合はInternet Explorerで開き、レスポンシブWebデザインの表示を確認すること。

#### 問題タイトル

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

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

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

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

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

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

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

#### 問題タイトル

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

#### 問題タイトル

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

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

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

#### 問題タイトル

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

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

#### 問題タイトル

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

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

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

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

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

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

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

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

#### 問題タイトル

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

テキスト
テキストを表示

テキスト
テキストを表示

テキスト
テキストを表示

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

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

#### 問題タイトル

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

ソース
ソースを表示

#### 問題タイトル

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

ソース
ソースを表示

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

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

#### 問題タイトル

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

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

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

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

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

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

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

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

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

#### 問題タイトル

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

テキスト
テキストを表示

テキスト
テキストを表示

テキスト
テキストを表示

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

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

#### 問題タイトル

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

ソース
ソースを表示

#### 問題タイトル

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

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

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

#### 問題タイトル

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

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

#### 問題タイトル

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

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

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

## 問題6 四つ目の下層ページの作成

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

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

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

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

#### 問題タイトル

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

テキスト
テキストを表示

テキスト
テキストを表示

テキスト
テキストを表示

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

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

#### 問題タイトル

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

ソース
ソースを表示

#### 問題タイトル

#####

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

属性 | 属性値を表示

#####

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

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

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

#### 問題タイトル

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

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

#### 問題タイトル

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

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

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