問題1 基本ページの作成
仕上り見本を参考に基本ページを作成しなさい。
基本ページのHTMLの編集
「site」フォルダーにある「base.html」に、以下の設定を行い、保存しなさい。
基本レイアウトのCSSの編集
「css」フォルダーにある「style.css」の「/* 基本レイアウト ここから↓ */」と「/* 基本レイアウト ここまで↑ */」の中に、以下の設定を行い、保存しなさい。
ページ全体のスタイルを設定する。
セレクター |
body |
背景画像 |
bg.jpg |
背景画像の繰り返し |
横方向のみ繰り返し |
背景画像の位置 |
水平方向: 中央、
垂直方向: 上 |
文字色 |
#666666 |
ヘッダー領域、ナビゲーション領域、パンくずリスト領域、コンテンツ領域、フッター領域が左右中央揃えに配置されるようにマージンを設定する。
セレクター |
header, nav, #path, #contents, footer |
幅 |
860ピクセル |
マージン |
上: 0、
下: 0、
左: (各自考える)、
右: (各自考える)
|
ヘッダー領域のh1要素にスタイルを設定する。
セレクター |
header h1 |
マージン |
上: 0、
下: 26ピクセル、
左: 0、
右: 0 |
上パディング |
18ピクセル |
行揃え |
中央 |
メイン領域のh1要素にスタイルを設定する。
セレクター |
#main h1 |
下マージン |
30ピクセル |
パディング |
上: 0、
下: 20ピクセル、
左: 10ピクセル、
右: 40ピクセル |
背景画像(複数指定) |
1枚目: bg_h1_left.png、
2枚目: bg_h1_bottom.gif |
背景画像の繰り返し(複数指定) |
1枚目: なし、
2枚目: 横方向のみ繰り返し |
背景画像の位置(複数指定) |
1枚目の水平方向: 右、
1枚目の垂直方向: 上、
2枚目の水平方向: 左、
2枚目の垂直方向: 下 |
文字のサイズ |
180% |
基本ページを使用した各ページの複製
問題1(1)で保存した「base.html」を複製し、保存しなさい。
各ページのCSSスプライトに関連するHTMLの編集
各HTMLファイルに、以下の設定を行い、保存しなさい。
各ページのCSSスプライトに関連するCSSの編集
「css」フォルダーにある「style.css」の「/* 基本レイアウト ここから↓ */」と「/* 基本レイアウト ここまで↑ */」の中に、以下の設定を行い、保存しなさい。
CSSスプライトを用いて、「about.html」、「guide.html」、「animals.html」、「contact.html」のナビゲーション領域で、現在表示されているページのリンクの背景画像が変わるようにし、各リンクにロールオーバーを設定する。
セレクター |
#about #nav_about a, #guide #nav_guide a, #animals #nav_animals a, #contact #nav_contact a, nav ul li a:hover |
背景画像の位置 |
水平方向: 0、
垂直方向: -60ピクセル |
問題1は終了です。問題2に進んでください。
問題2 トップページの作成
仕上り見本を参考にトップページを作成しなさい。
トップページのタイトルに関連するHTMLの編集
問題1(3)で保存した「index.html」に、以下の設定を行い、保存しなさい。
トップページのJavaScriptに関連するHTMLの編集
「index.html」に、JavaScriptによるスライドの設定を行い、保存しなさい。
なお、スライドの表示はブラウザーで確認すること。
トップページのメイン領域のHTMLの編集
「index.html」のメイン領域に、以下の設定を行い、保存しなさい。
トップページのCSSの編集
「css」フォルダーにある「style.css」の「/* トップページ ここから↓ */」と「/* トップページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。
トップページの「お知らせ」のリストにスタイルを設定する。
セレクター |
#news ul |
リストマーカーの種類 |
なし |
左パディング |
0 |
セレクター |
#news ul li |
パディング |
上: 20ピクセル、
下: 20ピクセル、
左: 160ピクセル、
右: 0 |
下ボーダー |
太さ: 1ピクセル、
スタイル: 点線、
色: #fb484e |
インデント |
-160ピクセル |
トップページのレスポンシブWebデザインに関連するHTMLの編集
問題2(3)で保存した「index.html」に、レスポンシブWebデザインの設定を行い、保存しなさい。
なお、レスポンシブWebデザインの表示はブラウザーの幅を縮めて確認すること。
問題2は終了です。問題3に進んでください。
問題4 「ガイドのご案内」ページの作成
仕上り見本を参考に「ガイドのご案内」ページを作成しなさい。
「ガイドのご案内」ページのタイトルに関連するHTMLの編集
問題1(4)で保存した「guide.html」に、以下の設定を行い、保存しなさい。
「ガイドのご案内」ページのメイン領域のHTMLの編集
「guide.html」のメイン領域に、以下の設定を行い、保存しなさい。
「ガイドのご案内」ページのCSSの編集
「css」フォルダーにある「style.css」の「/* 「ガイドのご案内」ページ ここから↓ */」と「/* 「ガイドのご案内」ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。
問題4は終了です。問題5に進んでください。
問題5 「人気の動物たち」ページの作成
仕上り見本を参考に「人気の動物たち」ページを作成しなさい。
「人気の動物たち」ページのタイトルに関連するHTMLの編集
問題1(4)で保存した「animals.html」に、以下の設定を行い、保存しなさい。
「動物紹介」ページのメイン領域のHTMLの編集
「animals.html」のメイン領域に、以下の設定を行い、保存しなさい。
「人気の動物たち」ページのCSSの編集
「css」フォルダーにある「style.css」の「/* 「人気の動物たち」ページ ここから↓ */」と「/* 「人気の動物たち」ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。
サムネイルを横並びにし、スタイルを設定する。
セレクター |
.animals_area figure |
幅 |
265ピクセル |
マージン |
上: 0、
下: 15ピクセル、
左: 20ピクセル、
右: 0 |
フロート |
左 |
オーバーフロー |
hidden |
問題5は終了です。問題6に進んでください。
問題6 「お問い合わせ」ページの作成
仕上り見本を参考に「お問い合わせ」ページを作成しなさい。
「お問い合わせ」ページのタイトルに関連するHTMLの編集
問題1(4)で保存した「contact.html」に、以下の設定を行い、保存しなさい。
「お問い合わせ」ページのメイン領域のHTMLの編集
「contact.html」のメイン領域に、以下の設定を行い、保存しなさい。
「お問い合わせ」ページのCSSの編集
「css」フォルダーにある「style.css」の「/* 「お問い合わせ」ページ ここから↓ */」と「/* 「お問い合わせ」ページ ここまで↑ */」の中に、以下の設定を行い、保存しなさい。
問題6は終了です。実技問題は以上です。