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

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

### テーマ

- 「HAPPINESS FITNESS CLUB」を紹介するWebサイトである。
- トップページには、イメージとお知らせを掲載する。
- 「施設のご案内」ページでは、施設に関する案内文と施設のイメージ画像を掲載する。
- 「料金プラン」ページでは、会員制の料金プランを一覧表で掲載する。
- 「ご意見・ご要望」ページでは、施設に関するご意見・ご要望を承るフォームを設置する。

### ページ構成

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

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

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

- 「実技用」フォルダー
  - start.html
  - 「material」フォルダー
  - 「site」フォルダー
    - fee.html ★新規作成
    - index.html
    - info.html ★新規作成
    - opinion.html ★新規作成
    - 「css」フォルダー
      - common.css
      - style.css
    - 「images」フォルダー
      - bg_footer.png
      - bg_header.png
      - bnr_info.png
      - bnr_opinion.png
      - graphic.jpg
      - h1.png
      - h2.png
      - logo.png
      - nav1.png
      - nav2.png
      - nav3.png
      - pic.jpg

### 仕様

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

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

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

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

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

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

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

#### 文書型宣言の変更

文書型宣言をHTML 4.01からHTML5に変更する。

#### meta要素の属性の削除と追加

文字コードがあるmeta要素のhttp-equiv属性とcontent属性を削除し、以下の属性を追加する。

charset | utf-8

#### meta要素の削除

以下のmeta要素を削除する。

削除するmeta要素
<meta http-equiv="Content-Style-Type" content="text/css">

#### link要素の属性の削除

link要素のtype属性を削除する。

#### div要素の変更

id属性「header」があるdiv要素をheader要素に変更し、変更後はid属性を削除する。

#### div要素の変更

id属性「nav」があるdiv要素をnav要素に変更し、変更後はid属性を削除する。

#### div要素の変更

id属性「section」があるdiv要素をsection要素に変更し、変更後はid属性を削除する。

#### div要素の変更

id属性「aside」があるdiv要素をaside要素に変更し、変更後はid属性を削除する。

#### div要素の変更

id属性「footer」があるdiv要素をfooter要素に変更し、変更後はid属性を削除する。

#### small要素の設定

以下のテキストをsmall要素でマークアップする。
なお、small要素はp要素の中にマークアップすること。

small要素を設定するテキスト
Copyright 2014 HAPPINESS FITNESS CLUB All rights reserved.

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

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

#### #headerの変更

2箇所ある「#header」を「header」に変更する。

変更するセレクター
#header
#header h1

#### #navの変更

3箇所ある「#nav」を「nav」に変更する。

変更するセレクター
#nav
#nav ul
#nav ul li

#### ロールオーバーの設定

ナビゲーション領域にロールオーバーを設定する。

セレクター | nav ul li a:hover
ボックスの透明度 | 0.7

#### #footerの変更

1箇所ある「#footer」を「footer」に変更する。

変更するセレクター
#footer p

#### コピーライトの設定

フッター領域のコピーライトに文字のサイズを設定する。

セレクター | footer small
文字のサイズ | 100%

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

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

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

- 仕上り見本：「施設のご案内」ページ

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

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

#### ファイルの保存

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

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

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

#### title要素の変更

title要素を以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

title要素のテキスト
施設のご案内 - HAPPINESS FITNESS CLUB

#### リンクの設定

ヘッダー領域のh1要素の画像に対して、トップページに戻るためのリンクを設定する。
なお、リンクはh1要素の中に設定すること。

#### メイン領域の空白の設定

メイン領域の中を空白にする。

#### article要素の設定

メイン領域にarticle要素を挿入する。

#### メイン領域のh1要素の設定

メイン領域のarticle要素の中に、以下のテキストをコピー&ペーストし、h1要素でマークアップする。

h1要素のテキスト
施設のご案内

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

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

#### メイン領域のh1要素の設定

メイン領域のh1要素にスタイルを設定する。

セレクター | #main h1
マージン | 上: 0、 下: 20ピクセル、 左: 0、 右: 0
パディング | 上: 8ピクセル、 下: 3ピクセル、 左: 40ピクセル、 右: 0
背景画像 | h1.png
背景画像の繰り返し | なし
文字のサイズ | 162%

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

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

#### ファイルの保存

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

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

## 問題3 「施設のご案内」ページの作成

仕上り見本を参考に「施設のご案内」ページを作成しなさい。

- 仕上り見本：「施設のご案内」ページ

### 「施設のご案内」ページのHTMLの編集

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

#### p要素の設定

h1要素の次の行に、以下のテキストをコピー&ペーストする。
仕上り見本を参考に、テキストごとにp要素でマークアップし、必要に応じて段落内改行を入れること。

テキスト
当施設は、スタジオやプールのほか、100台ものマシンを所有するフィットネスクラブです。
マシンはフィットネスに合わせた様々な設備が揃い、各専門分野のインストラクターが常に指導できるよう常駐しています。 肩こりや腰痛の改善、ダイエット、体力づくりなど、様々な目的に合わせて専門のインストラクターから的確なアドバイスが受けられる体制を整えています。
スタジオプログラムは多彩なプログラムをご用意し、随時開催しています。定員さえ超えなければ、いくつでもご自由にご参加いただけます。
大浴場は、ジェットバス、シャワー、サウナ、水風呂を完備し、マッサージルームでは運動後の疲れや痛みを残さないよう資格をもったスタッフがマッサージをいたします。
ご興味のある方は、ぜひ無料見学にお越しください。

#### img要素の設定

「当施設は、スタジオや～」の前（テキストを内包するp要素の中）に、「pic.jpg」を挿入する。
なお、img要素には、以下の属性を設定すること。

幅 | 200ピクセル
高さ | 200ピクセル
代替テキスト | ""(空の代替テキスト)

#### クラスの設定

「pic.jpg」に、回り込みを設定するためのクラス「float_right」を設定する。

### 「施設のご案内」ページのCSSの編集

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

#### 画像の設定

画像の回り込みを設定するクラス「float_right」のスタイルを設定する。

セレクター | img.float_right
下マージン | 20ピクセル
左マージン | 20ピクセル
フロート | 右

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

## 問題4 「料金プラン」ページの作成

仕上り見本を参考に「料金プラン」ページを作成しなさい。

- 仕上り見本：「料金プラン」ページ

### 「料金プラン」ページのタイトルに関連するHTMLの編集

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

#### 各テキストの変更

各要素内のテキストを以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

title要素のテキスト
料金プラン - HAPPINESS FITNESS CLUB

メイン領域のh1要素のテキスト
料金プラン

### 「料金プラン」ページのHTMLの編集

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

#### ソースのコピー&ペースト

h1要素の次の行に、以下のソースをコピー&ペーストする。

ソース
<table> <caption><strong>ご利用料金</strong><p>ご利用する時間帯、料金をご確認いただき、ご希望に合った会員プランをお選びください。また、入会金、年会費等は一切かかりませんので、お気軽にご入会ください。</p></caption> <tr> <td>会員プラン</td> <td>利用時間</td> <td>金額</td> </tr> <tr> <td>正会員A(全施設利用)</td> <td>10:00-23:00</td> <td>9,625円/月</td> </tr> <tr> <td>正会員B(プールのみ利用)</td> <td>10:00-23:00</td> <td>3,980円/月</td> </tr> <tr> <td>デイ会員</td> <td>10:00-18:00</td> <td>6,890円/月</td> </tr> <tr> <td>都度会員</td> <td>10:00-23:00</td> <td>ご利用1回ごとに<br>2,030円</td> </tr> </table>

#### セルの変更

一行目のすべてのセルを、見出しセルに変更し、以下の属性を設定する。

scope | col

#### セルの結合

仕上り見本を参考に、テーブルの二列目の「10:00-23:00」のセルを結合し、余計な文字は削除する。

#### 行の追加

仕上り見本を参考に、四行目と五行目（見出し行も含む）の間に行を追加し、以下のテキストをコピー&ペーストする。

テキスト
ナイト会員 | 18:00-23:00 | 7,950円/月

#### クラスの設定

三列目（見出しセルとデータセル）にスタイルを設定するためのクラス「price」を設定する。

### 「料金プラン」ページのCSSの編集

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

#### テーブルの設定

テーブルのスタイルを設定する。

セレクター | table
幅 | 568ピクセル
下マージン | 20ピクセル
border-collapse | collapse

#### キャプションの設定

テーブルのキャプションに行揃えを設定する。

セレクター | table caption
行揃え | 左

#### セルの設定

見出しセルとデータセルの両方に適用するスタイルを設定する。

セレクター | table th, table td
幅 | 190ピクセル
パディング | 10ピクセル
ボーダー | 太さ: 1ピクセル、 スタイル: 実線、 色: #7aa7a2
行揃え | 中央

#### 見出しセルの設定

見出しセルに背景色を設定する。

セレクター | table th
背景色 | #cce8e4

#### 三列目のセルの設定

テーブルの三列目（見出しセルとデータセル）に幅を設定する。

セレクター | table .price
幅 | 125ピクセル

#### 三列目のデータセルの設定

テーブルの三列目（データセルのみ）に行揃えを設定する。

セレクター | table td.price
行揃え | 右

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

## 問題5 「ご意見・ご要望」ページの作成

仕上り見本を参考に「ご意見・ご要望」ページを作成しなさい。

- 仕上り見本：「ご意見・ご要望」ページ

### 「ご意見・ご要望」ページのタイトルに関連するHTMLの編集

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

#### 各テキストの変更

各要素内のテキストを以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

title要素のテキスト
ご意見・ご要望 - HAPPINESS FITNESS CLUB

メイン領域のh1要素のテキスト
ご意見・ご要望

### 「ご意見・ご要望」ページのHTMLの編集

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

#### p要素の設定

h1要素の次の行に、以下のテキストをコピー&ペーストする。
仕上り見本を参考に、テキストをp要素でマークアップし、必要に応じて段落内改行を入れること。

テキスト
サービス改善のため、皆様のお声をお聞かせください。 会員の方はもちろん、ご入会を検討している方のご意見・ご要望もお待ちしております。

#### form要素の設定

p要素の次の行に、form要素を挿入し、以下の属性を設定する。

action | #

#### p要素の設定

仕上り見本を参考に、form要素の中に以下のテキストをコピー&ペーストし、p要素でマークアップする。

テキスト
お名前

#### テキストフィールドの設定

「お名前」の後に段落内改行を入れ、次の行にテキストフィールドを挿入し、以下の属性を設定する。

type | (テキスト形式で設定)
name | name
クラス | textfield

#### label要素の設定

「お名前」からテキストフィールドまでをlabel要素でマークアップする。
なお、label要素はp要素の中に設定すること。

#### p要素の設定

仕上り見本を参考に、form要素の中に以下のテキストをコピー&ペーストし、p要素でマークアップする。

テキスト
ご意見・ご要望

#### テキストエリアの設定

「ご意見・ご要望」の後に段落内改行を入れ、次の行にテキストエリアを挿入し、以下の属性を設定する。

name | comment

#### label要素の設定

「ご意見・ご要望」からテキストエリアまでをlabel要素でマークアップする。
なお、label要素はp要素の中に設定すること。

#### 送信ボタンの設定

仕上り見本を参考に、form要素の中に送信ボタンを挿入し、p要素でマークアップする。

type | submit
value | 確認する

### 「ご意見・ご要望」ページのCSSの編集

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

#### form要素の設定

form要素の余白を設定する。

セレクター | form
上マージン | 30ピクセル

#### 各フォーム部品の設定

テキストフィールドとテキストエリアに罫線を設定する。

セレクター | input.textfield, textarea
ボーダー | 太さ: 1ピクセル、 スタイル: 実線、 色: #d1ccb4

#### テキストフィールドの設定

テキストフィールドの幅を設定する。

セレクター | input.textfield
幅 | 250ピクセル

#### テキストエリアの設定

テキストエリアの幅と高さを設定する。

セレクター | textarea
幅 | 500ピクセル
高さ | 170ピクセル
オーバーフロー(y軸) | スクロールバー

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