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

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

### テーマ

- 結婚式場「HOTEL IMPERIAL RESORT TOKYO」のWebサイトである。
- トップページには、スライドショーとお知らせを掲載する。
- 「結婚式場のコンセプト」ページでは、2つのコンセプトの紹介文を掲載する。
- 「プランのご案内」ページでは、標準的なプランを一覧表で掲載する。
- 「ブライダルフェア」ページでは、結婚式場の様子をサムネイルと紹介文とのセットで掲載する。
- 「お問い合わせ」ページでは、結婚式場に関するお問い合わせフォームを設置する。

### ページ構成

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

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

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

- 「実技用」フォルダー
  - start.html
  - 「material」フォルダー
  - 「site」フォルダー
    - base.html
    - concept.html ★新規作成
    - contact.html ★新規作成
    - fair.html ★新規作成
    - index.html ★新規作成
    - plan.html ★新規作成
    - 「css」フォルダー
      - common.css
      - responsive.css
      - style.css
    - 「js」フォルダー
      - slideshow.js
    - 「images」フォルダー
      - bg_arrow.png
      - bg_footer.png
      - bg_h1_bottom.png
      - bg_h1_head.png
      - bg_h2_bottom.png
      - bg_h2_head.png
      - bnr_contact.png
      - bnr_contact_hover.png
      - bnr_plan.jpg
      - breadcrumb_arrow.png
      - concept_photo1.jpg
      - concept_photo2.jpg
      - gallery_photo1.jpg
      - gallery_photo2.jpg
      - gallery_photo3.jpg
      - gallery_photo4.jpg
      - gallery_photo5.jpg
      - gallery_photo6.jpg
      - logo.png
      - nav1.png
      - nav2.png
      - nav3.png
      - nav4.png
      - slide1.jpg
      - slide2.jpg
      - slide3.jpg

### 仕様

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

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

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

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

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

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

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

#### title要素の設定

meta要素の次の行に、title要素を挿入し、以下のテキストをコピー&ペーストする。

title要素のテキスト
結婚式場のコンセプト - HOTEL IMPERIAL RESORT TOKYO

#### link要素の設定

title要素の次の行に、link要素を挿入し、「css」フォルダーにある「style.css」を設定する。
ただし、type属性は省略すること。

#### ヘッダー領域の設定
（仕上り見本「各領域の名称」を参照）

#####

body要素の中に、header要素を挿入し、ページの先頭に戻るためのid属性「top」を設定する。

#####

header要素の中に、画像「logo.png」を挿入し、以下の代替テキストをコピー&ペーストする。

代替テキスト | HOTEL IMPERIAL RESORT TOKYO
幅 | (属性は省略)
高さ | (属性は省略)

#####

画像「logo.png」に、h1要素をマークアップし、「index.html」へのリンクを設定する。
なお、リンクはh1要素の中に設定すること。

#### ナビゲーション領域の設定
（仕上り見本「各領域の名称」を参照）

#####

header要素の次の行に、nav要素を挿入する。

#####

nav要素の中に、以下のテキストをコピー&ペーストし、箇条書きリストをul要素、li要素でマークアップする。
なお、これらのテキストに、リンクと、それを内包するli要素のid属性を設定すること。

テキスト | 結婚式場のコンセプト
リンク先 | concept.html
li要素のid名 | nav_concept

テキスト | プランのご案内
リンク先 | plan.html
li要素のid名 | nav_plan

テキスト | ブライダルフェア
リンク先 | fair.html
li要素のid名 | nav_fair

テキスト | お問い合わせ
リンク先 | contact.html
li要素のid名 | nav_contact

#### パンくずリスト領域の設定
（仕上り見本「各領域の名称」を参照）

nav要素の次の行に、div要素を挿入し、id属性「breadcrumb」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<ul> <li><a href="index.html">ホーム</a></li> <li>結婚式場のコンセプト</li> </ul>

#### コンテンツ領域の設定
（仕上り見本「各領域の名称」を参照）

div要素（id属性「breadcrumb」）の次の行に、div要素を挿入し、id属性「contents」を設定する。

#### メイン領域の設定
（仕上り見本「各領域の名称」を参照）

div要素（id属性「contents」）の中に、div要素を挿入し、id属性「main」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<article> <h1>結婚式場のコンセプト</h1> </article>

#### サブ領域の設定
（仕上り見本「各領域の名称」を参照）

#####

div要素（id属性「main」）の次の行に、div要素を挿入し、id属性「sub」を設定する。

#####

div要素（id属性「sub」）の中に、aside要素を挿入し、以下のソースをコピー&ペーストする。

ソース
<div class="bnr_inner"> <dl> <dt><img src="images/bnr_plan.jpg" alt="プランのご案内"></dt> <dd>標準のプランをご紹介いたします。</dd> </dl> </div> <div class="bnr_inner"> <a href="contact.html"> <p><img src="images/bnr_contact.png" alt="お問い合わせ"></p> </a> </div>

#####

ソースの中にあるdl要素に、「plan.html」へのリンクを設定する。
なお、リンクはdl要素の外に設定すること。

#### フッター領域の設定
（仕上り見本「各領域の名称」を参照）

div要素（id属性「contents」）の次の行に、footer要素を挿入し、以下のソースをコピー&ペーストする。

ソース
<p id="pagetop"><a href="#top">ページの先頭へ戻る</a></p> <address>東京都千代田区X-X-X 電話 0120-000-XXX 営業時間 11:00～20:00(水曜日定休)</address> <p id="copyright"><small>Copyright 2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.</small></p>

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

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

#### 外部スタイルシートの設定

外部スタイルシート「common.css」を設定する。

#### ページ全体の設定

ページ全体のスタイルを設定する。

セレクター | body
背景色 | #f3f2e9
文字色 | #5f5039

#### 各領域の設定

ヘッダー領域、ナビゲーション領域、パンくずリスト領域、コンテンツ領域、フッター領域が左右中央揃えに配置されるようにマージンを設定する。

セレクター | header, nav, #breadcrumb, #contents, footer
幅 | 840ピクセル
左マージン | (各自考える)
右マージン | (各自考える)

#### ヘッダー領域の設定

ヘッダー領域のh1要素にスタイルを設定する。

セレクター | header h1
マージン | 上: 0、 下: 26ピクセル、 左: 0、 右: 0
上パディング | 28ピクセル
行揃え | 中央

#### ナビゲーション領域の設定

#####

ナビゲーション領域のリストのマーカーの表示を消し、位置を設定する。

セレクター | nav ul
リストマーカーの種類 | なし
マージン | 上: 0、 下: 20ピクセル、 左: 0、 右: 0
左パディング | 0
オーバーフロー | hidden

#####

ナビゲーション領域にある、リストを横並びに設定する。

セレクター | nav ul li
幅 | 210ピクセル
フロート | 左

#####

ナビゲーション領域にある、リンクのスタイルを設定する。
高さを0にし、パディングとオーバーフロー時の処理を設定することで画像置換を行う。

セレクター | nav ul li a
表示形式 | ブロックレベル
高さ | 0
上パディング | 44ピクセル
オーバーフロー | hidden

#####

画像置換によって表示するリンクの画像を設定する。

セレクター | nav ul li#nav_concept a
背景画像 | nav1.png

セレクター | nav ul li#nav_plan a
背景画像 | nav2.png

セレクター | nav ul li#nav_fair a
背景画像 | nav3.png

セレクター | nav ul li#nav_contact a
背景画像 | nav4.png

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

メイン領域のスタイルを設定する。

セレクター | #main
幅 | 570ピクセル
フロート | 左

#### サブ領域の設定

サブ領域のスタイルを設定する。

セレクター | #sub
幅 | 230ピクセル
フロート | 右

#### フッター領域の設定

フッター領域の余白を設定する。

セレクター | footer
上パディング | 70ピクセル

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

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

セレクター | #main h1
マージン | 上: 0、 下: 30ピクセル、 左: 0、 右: 0
パディング | 上: 35ピクセル、 下: 35ピクセル、 左: 65ピクセル、 右: 0
背景画像(複数指定) | 1枚目: bg_h1_head.png、 2枚目: bg_h1_bottom.png
背景画像の繰り返し(複数指定) | 1枚目: なし、 2枚目: なし
背景画像の位置(複数指定) | 1枚目の水平方向: 左、 1枚目の垂直方向: 上、 2枚目の水平方向: 左、 2枚目の垂直方向: 下
文字のサイズ | 156.25%

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

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

#### ファイルの保存

「base.html」を複製し、「index.html」、「concept.html」、「plan.html」、「fair.html」、「contact.html」として保存する。

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

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

#### body要素の設定

以下のファイルのbody要素にid属性を設定する。

ファイル名 | body要素のid名
--- | ---
concept.html | concept
plan.html | plan
fair.html | fair
contact.html | contact

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

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

#### ナビゲーション領域の設定

CSSスプライトを用いて、「concept.html」、「plan.html」、「fair.html」、「contact.html」のナビゲーション領域で、現在表示されているページのリンクの背景画像が変わるようにし、各リンクにロールオーバーを設定する。

セレクター | #concept #nav_concept a, #plan #nav_plan a, #fair #nav_fair a, #contact #nav_contact a, nav ul li a:hover
背景画像の位置 | 水平方向: 0、 垂直方向: -45ピクセル

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

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

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

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

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

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

#### title要素の変更

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

title要素のテキスト
HOTEL IMPERIAL RESORT TOKYO

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

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

#### パンくずリスト領域の変更

パンくずリスト領域のid属性「breadcrumb」をid属性「graphic」に変更する。
また、箇条書きリスト（ul要素、li要素）を削除し、以下のソースをコピー&ペーストすること。

ソース
<ul> <li class="now"><img src="images/slide1.jpg" alt="こだわりの空間で心地よいひとときを" class="image1"></li> <li><img src="images/slide2.jpg" alt="幸福に満ちた神聖なチャペル" class="image2"></li> <li><img src="images/slide3.jpg" alt="「ありがとう」の気持ちが伝わるウェディング" class="image3"></li> </ul>

#### スクリプト要素の設定

フッター領域の次の行に、スクリプト要素を挿入し、「js」フォルダーの中の「slideshow.js」を設定する。
ただし、type属性は省略すること。

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

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

#### article要素の変更

article要素をsection要素に変更し、id属性「news」を設定する。

#### h1要素の変更

h1要素をh2要素に変更し、テキスト「結婚式場のコンセプト」を以下のテキストに変更する。
なお、テキストはコピー&ペーストすること。

h2要素のテキスト
お知らせ

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

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

ソース
<ul> <li>2014年04月25日ランチ・ディナーのテイスティングフェア</li> <li>2014年03月03日春の特別見学会</li> <li>2014年02月20日期間限定の割引プラン</li> <li>2014年02月14日バレンタインフェア</li> </ul>

#### time要素の設定

ソースの中にある日付をtime要素でマークアップし、以下の属性を設定する。

datetime(※1) | (YYYY-MM-DD形式)

(※1) 例：2014年01月01日は、「2014-01-01」。

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

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

#### 「お知らせ」のリストの設定

トップページの「お知らせ」のリストにスタイルを設定する。

セレクター | #news ul
リストマーカーの種類 | なし
左パディング | 0

セレクター | #news ul li
パディング | 上: 20ピクセル、 下: 20ピクセル、 左: 175ピクセル、 右: 0
下ボーダー | 太さ: 1ピクセル、 スタイル: 点線、 色: #6c5f45
文字色 | #342300
インデント | -175ピクセル

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

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

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

#### link要素の設定

link要素の次の行に、続けてlink要素を挿入し、「css」フォルダーの「responsive.css」を設定するとともに、以下の属性を設定する。
ただし、type属性は省略すること。

メディアクエリー | screen and (max-width: 480px)

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

## 問題3 「結婚式場のコンセプト」ページの作成

仕上り見本を参考に「結婚式場のコンセプト」ページを作成しなさい。

- 仕上り見本：「結婚式場のコンセプト」ページ

### 「結婚式場のコンセプト」ページのメイン領域のHTMLの編集

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

#### section要素の設定

h1要素の次の行に、section要素を挿入し、クラス「concept_box」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<h2>すべてのお客様のご満足のために</h2> <p><img src="images/concept_photo1.jpg" alt="" class="image_right">豊富な経験に基づき、お客様のどのようなご要望にもご満足いただけるプランニングを行っております。</p> <p>500人までご招待いただける広大なガーデンから、10人ほどでささやかなお祝いができる素敵なお部屋まで、ご要望に応じたぴったりの会場をお選びいただけます。<br>また、妊婦様のためのマタニティプラン、お子様とご一緒のファミリープランなど、多様なニーズにお応えいたします。</p> <p>お気に入りの会場を見つけていただくため、見学会やフェアを随時行っております。クリスマスやバレンタインなどには素敵なイベントを行っておりますので、お気軽にご来場ください。</p>

#### section要素の設定

section要素の次の行に、続けてsection要素を挿入し、クラス「concept_box」を設定するとともに、以下のソースをコピー&ペーストする。

ソース
<h2>料理へのこだわり</h2> <p><img src="images/concept_photo2.jpg" alt="" class="image_left">富士山麓の山で汲みあげた天然水を使い、有機農法で作られた体にやさしい野菜を使用しております。</p> <p>また、新郎新婦の思い出の品を模したケーキなど、世界に1つだけのオリジナルスイーツをおつくりいたします。</p>

### 「結婚式場のコンセプト」ページのCSSの編集

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

#### クラス「concept_box」の設定

section要素の余白を空けるためにクラス「concept_box」のスタイルを設定する。

セレクター | .concept_box
下マージン | 30ピクセル
オーバーフロー | hidden

#### クラス「concept_box」の設定

メイン領域をトップページの余白と合わせるためにクラス「concept_box」のスタイルを設定する。

セレクター | .concept_box:last-child
下マージン | 0

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

## 問題4 「プランのご案内」ページの作成

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

- 仕上り見本：「プランのご案内」ページ

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

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

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

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

title要素のテキスト
プランのご案内 - HOTEL IMPERIAL RESORT TOKYO

パンくずリスト領域のli要素のテキスト「結婚式場のコンセプト」
プランのご案内

メイン領域のh1要素のテキスト
プランのご案内

### 「プランのご案内」ページのメイン領域のHTMLの編集

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

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

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

ソース
<table> <tr><th scope="col">項目</th><th scope="col">説明</th></tr> <tr><th scope="row">挙式会場</th><td>アルカンジュ（チャペル）</td></tr> <tr><th scope="row">披露宴</th><td>お料理、お飲み物、花嫁衣裳（2種類）、花婿衣裳（2種類）、招待状、ブーケ、引き出物、写真撮影など</td></tr> <tr><th scope="row">オプション</th><td>オリジナルスイーツ、お子様用お料理、キャンドルサービス</td></tr> <tr><th scope="row">費用</th><td>計40名様…1,852,381円<br>計60名様…2,743,290円</td></tr> </table>

#### caption要素の設定

table要素の中にcaption要素を挿入し、以下のソースをコピー&ペーストする。

ソース
<strong>標準的なプラン例</strong><p>標準的な内容のプランをご紹介いたします。実際のプランはお客様に合わせてご提案いたしますので、お気軽にお問い合わせください。</p>

#### thead要素の設定

テーブルの一行目をthead要素でマークアップする。

#### tbody要素の設定

テーブルの二行目～五行目を一つの括りとして、tbody要素でマークアップする。

### 「プランのご案内」ページのCSSの編集

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

#### テーブルの設定

テーブルに交互の背景色を設定する。

セレクター | table thead tr th
背景色 | #eee8cc

セレクター | table tbody tr:nth-child(奇数のアルファベット値を設定)
背景色 | #ffffff

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

## 問題5 「ブライダルフェア」ページの作成

仕上り見本を参考に「ブライダルフェア」ページを作成しなさい。

- 仕上り見本：「ブライダルフェア」ページ

### 「ブライダルフェア」ページのタイトルに関連するHTMLの編集

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

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

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

title要素のテキスト
ブライダルフェア - HOTEL IMPERIAL RESORT TOKYO

パンくずリスト領域のli要素のテキスト「結婚式場のコンセプト」
ブライダルフェア

メイン領域のh1要素のテキスト
ブライダルフェア

### 「ブライダルフェア」ページのメイン領域のHTMLの編集

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

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

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

ソース
<p>各会場の様子やお料理、ドレスをはじめ、弊社プランナーがおふたりのウェディングをご提案させていただきます。</p> <div class="gallery_box"> <img src="images/gallery_photo1.jpg"> 思い出の曲をピアノで弾く演出が人気です。 <img src="images/gallery_photo2.jpg"> 様々なデザインのドレスをご用意しております。 <img src="images/gallery_photo3.jpg"> こだわりのヒレ肉を使った和牛ローストビーフです。 </div> <div class="gallery_box"> <img src="images/gallery_photo4.jpg"> 優れた採光が人気の会場、アルカンジュです。 <img src="images/gallery_photo5.jpg"> 深紅のカーペットには純白のドレスがよく似合います。 <img src="images/gallery_photo6.jpg"> 真鯛を使った贅沢なカルパッチョです。 </div>

#### figure要素の設定

img要素とimg要素の直下にあるテキストをfigure要素で6箇所にマークアップする。

#### figcaption要素の設定

figure要素の中にあるテキストをfigcaption要素で6箇所にマークアップする。

### 「ブライダルフェア」ページのCSSの編集

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

#### サムネイルの設定

サムネイルを横並びにし、スタイルを設定する。

セレクター | .gallery_box figure
幅 | 180ピクセル
マージン | 上: 0、 下: 15ピクセル、 左: 15ピクセル、 右: 0
フロート | 左

#### サムネイルの設定

サムネイルの三列目がカラム落ちしないように、マージンを設定する。

セレクター | .gallery_box figure:first-child
左マージン | 0

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

## 問題6 「お問い合わせ」ページの作成

仕上り見本を参考に「お問い合わせ」ページを作成しなさい。

- 仕上り見本：「お問い合わせ」ページ

### 「お問い合わせ」ページのタイトルに関連するHTMLの編集

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

#### 各テキストの設定

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

title要素のテキスト
お問い合わせ - HOTEL IMPERIAL RESORT TOKYO

パンくずリスト領域のli要素のテキスト「結婚式場のコンセプト」
お問い合わせ

メイン領域のh1要素のテキスト
お問い合わせ

### 「お問い合わせ」ページのメイン領域のHTMLの編集

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

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

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

ソース
<p>会場やプランについてのお問い合わせは、下記フォームよりお気軽にお寄せください。</p> <ul> <li>必要事項を記入し、「確認する」をクリックしてください。</li> <li>ご登録いただいた個人情報は、お問い合わせ内容の確認以外には使用いたしません。</li> </ul> <form action="#"> <p>お名前（必須）</p> <p>メールアドレス（必須）</p> <p>お問い合わせ種類<br> 事前のご相談　その他</p> <p>内容</p> </form>

#### 「お名前」欄の設定

#####

テキスト「お名前（必須）」の後に、段落内改行を挿入し、続けて名前を入力するためのテキストフィールドを挿入するとともに、以下の属性を設定する。

type | (テキスト形式を設定）
name | name
必須 | (属性名のみ設定)

#####

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

#### 「メールアドレス」欄の設定

#####

テキスト「メールアドレス（必須）」の後に、段落内改行を挿入し、続けてメールアドレスを入力するためのテキストフィールドを挿入するとともに、以下の属性を設定する。

type | (メールアドレス形式を設定)
name | mail
必須 | (属性名のみ設定)

#####

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

#### 「お問い合わせ種類」欄の設定

#####

テキスト「事前のご相談」の前に、一つ目のラジオボタンを挿入し、以下の属性を設定する。

type | (ラジオボタンを設定)
name | kind
value | 0

#####

一つ目のラジオボタンからテキスト「事前のご相談」までをlabel要素でマークアップする。

#####

テキスト「その他」の前に、二つ目のラジオボタンを挿入し、以下の属性を設定する。

type | (ラジオボタンを設定)
name | kind
value | 1

#####

二つ目のラジオボタンからテキスト「その他」までをlabel要素でマークアップする。

#### 「内容」欄の設定

#####

テキスト「内容」の後に、段落内改行を挿入し、続けて内容を入力するためのテキストエリアを挿入するとともに、以下の属性を設定する。

name | comment

#####

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

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

テキストエリアを内包しているp要素の次の行に、送信ボタンを挿入し、p要素でマークアップする。
なお、送信ボタンには、以下の属性を設定すること。

type | submit
value | 確認する

### 「お問い合わせ」ページのCSSの編集

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

#### 「お名前」欄の設定

「お名前」のテキストフィールドの幅を設定する。

セレクター | input[(type属性を設定)]
幅 | 200ピクセル

#### 「メールアドレス」欄の設定

「メールアドレス」のテキストフィールドの幅を設定する。

セレクター | input[(type属性を設定)]
幅 | 300ピクセル

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