WEB クリエイター能力認定試験
上級
模擬問題
◆上級試験内容
試験区分 説明 規定問題 内容 HTML および CSS の基本知識をもとに、問題ごとに簡単な HTML ファイル、 CSS ファイルを作成する。 形式 実技試験 HTML ファイル、CSS ファイルの作成において、メモ帳やワードパッドなどの テキストエディタを使用します。 ※Web ページ作成ソフトの使用は禁止です。 問題数 10 問程度 時間 50 分 自由問題 内容 HTML および CSS の応用知識をもとに、提示されたコンセプト、テーマ、仕 様、素材などから 1 つの Web サイトを作成する。 形式 実技試験 文章ファイルの作成において、メモ帳やワードパッドなどのテキストエディ タ、または Dreamweaver やホームページ・ビルダー等の Web ページ作成ソフ トを使用します。 ※Web ページ作成ソフトを使用する場合、HTML 編集ソフトの機能により問題 解決が困難な箇所や、正しい文法表現とならない事が想定されますが、直接ソ ースコードを修正する能力も試験内容に含まれます。 問題数 1 テーマ 時間 テキストエディタを使用する場合：120 分 Web ページ作成ソフトを使用する場合：90 分◆模擬問題素材ファイルのフォルダ構成
素材フォルダは下記の構成で、合計 3 回分の模擬問題と解答を用意しています。 「WEB クリエイター上級模擬試験」フォルダ ├ 「第 1 回」フォルダ ┬ 「規定問題」フォルダ │ └ 「自由問題」フォルダ ├ 「第 2 回」フォルダ ┬ 「規定問題」フォルダ │ └ 「自由問題」フォルダ ├ 「第 3 回」フォルダ ┬ 「規定問題」フォルダ │ └ 「自由問題」フォルダ └ 「標準解答」フォルダ ┬ 「第 1 回」フォルダ ┬ 「規定問題」フォルダ │ └ 「自由問題」フォルダ ├ 「第 2 回」フォルダ ┬ 「規定問題」フォルダ │ └ 「自由問題」フォルダ └ 「第 3 回」フォルダ ┬ 「規定問題」フォルダ └ 「自由問題」フォルダ ※本問題の完成画像はすべて、Internet Explorer 8 での閲覧を前提としたものである。143
第 1 回模擬試験 規定問題
フ ォ ル ダ 構 成 フ ァ イ ル 構 成
規定問題で使用するデータは、下図のファイル構成となっている。 規定問題で使用するデータのファイル構成 ├─問題 1 フォルダ │ │ index.html │ │ list.html │ ├─css フォルダ │ │ base.css │ └─images フォルダ │ logo.gif ├─問題 2 フォルダ │ │ index.html │ └─images フォルダ │ circle.gif ├─問題 3 フォルダ │ index.html ├─問題 4 フォルダ │ │ cat.html │ │ hammer.html │ │ index.html │ │ kappa.html │ ├─anime フォルダ │ │ title.swf │ └─illust フォルダ │ course.gif ├─問題 5 フォルダ │ index.html ├─問題 6 フォルダ │ index.html ├─問題 7 フォルダ │ index.html ├─問題 8 フォルダ │ index.html └─問題 9 フォルダ base.css index.html jikokuten.html koumokuten.html tamonnten.html zoutyouten.htmlフォルダ「問題 1」の「index.html」「list.html」「base.css」をテキストエディタで開き、以下の指示に従い HTML ファイルおよび CSS ファイルを完成させなさい ＜仕上がりイメージ＞ index.html list.html ① 「index.html」のページのタイトルに受験番号 を半角で表示しなさい。 ※受験番号は「9999」とする。 ② 「list.html」の文字列「ビジネス講座リスト」 「DTP/WEB 講座リスト」「CAD 講座リスト」 「プログラミング講座リスト」にそれぞれ 「business」「dtp-web」「cad」「Programing」 の名前でマーカーを設定しなさい。 ③ 「 index.html 」 の 文 字 列 「 ビ ジ ネ ス 」 「DTP/WEB」「CAD」「プログラミング」に、 ファイル「list.html」のマーカー「business」 「dtp-web」「cad」「programing」へのリンク をそれぞれ設定しなさい。 ④ フォルダ「css」の「base.css」に、ページ本 文のスタイルとして以下の設定を記述しなさ い。 背景は background プロパティを使って一括 指定すること。 プロパティ 設定値 文字色 #FF66CC 背景 色： #ffffff イメージ： フォルダ「images」内の「logo.gif」 イメージの繰り返し：繰り返さない イメージの位置：右下 ⑤ フォルダ「css」の「base.css」に、リンク部 分および擬似クラスのスタイルとして以下の 設定を記述しなさい プロパティ 設定値 リンク部分の文字列の太さ 太字 未アクセスのリンク部分の文字色 #009999 ポイント時のリンク部分の文字色 #ffffff ポイント時のリンク部分の背景色 #ff0099 ポイント時のリンク部分の文字装飾 なし ⑥ 「index.html」と「list.html」に、フォルダ「css」 の「base.css」への参照をそれぞれ設定しな さい。
145
問 題 2
フォルダ「問題 2」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① 文字列「x2+y2=r2」内の「2」をそれぞれ上付 き文字に設定しなさい。 ② style 要素に上付き文字のスタイルとして、以 下の設定を記述しなさい。 プロパティ 設定値 フォントサイズ 70 パーセント ③ style 要素にクラス「point」のスタイルとして 以下の設定を追加しなさい。 文字列の色以外は font プロパティを使って一 括指定すること プロパティ 設定値 フォント 文字列の色： #cc0099 文字列の太さ：太字 フォントサイズ：120％ フォントの種類： “ＭＳ Ｐゴシック",sans-serif ④ 文字列「x2+y2=r2」「三平方の定理」にクラス 「point」を設定しなさい。問 題 3
フォルダ「問題 3」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① 文字列「パソコンパーツの種類」を見出し 1、 文字列「CPU」と「グラフィックカード」を それぞれ見出し 2 に設定しなさい。 ② style 要素に見出し 1 のスタイルとして以下の 設定を記述しなさい。 プロパティ 設定値 フォントサイズ 170 パーセント ③ style 要素に見出し 2 のスタイルとして以下の 設定を記述しなさい。 枠線（左）は border-left プロパティ、枠線（下） は border-bottom プロパティを使って一括指 定すること。 プロパティ 設定値 フォントサイズ 125 パーセント 枠線（左） スタイル：solid（実線） 太さ：15 ピクセル 色：#ff6600 枠線（下） スタイル：solid（実線） 太さ：2 ピクセル 色： #ff6600フォルダ「問題 4」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① <object> タ グ を 追 加 し て 、 イ メ ー ジ 「course.gif」の前に Flash ムービーを配置し なさい。
Flash ファイルは data 属性、MIME タイプは type 属性で設定すること。 属性 設定値 Flash ファイル フォルダ「anime」内の 「title.swf」 MIME タイプ application/x-shockwave-flash 幅 300 ピクセル 高さ 200 ピクセル ② <param>タグを追加して、Flash ムービー実行 時のパラメータを設定しなさい。 Flash ファイルのパラメータの名前は src、繰 り返し再生のパラメータの名前は loop を使用 すること。 パラメータの名前 パラメータの値 Flash ファイル フォルダ「anime」内の 「title.swf」 繰り返し再生 true（繰り返し再生する） ③ ブラウザーが Flash ムービーの表示・再生を サポートしていない場合の代替情報として、 「 Flash フ ァイ ルを 再生 する には 、 Flash Player が必要です。」が表示されるように設定 しなさい。 「Flash Player」の「Flash」と「Player」の 間の半角空白は文字参照「 」を使用す ること。 ④ Flash ムービーの後ろに改行（段落を分けない 改行）を挿入しなさい。 ⑤ <map>タグと<area>タグを追加し、<img>タ グ、<map>タグ、<area>タグの属性を設定し て以下の動作を行うクリッカブルマップを完 成させなさい。 属性 設定値 マップ名 map エリア リンク先 代替文字 金槌の上の三角形 （1,0,100,0,31,200） hammer.html 金槌コース 猫の上の三角形 （171,0,193,200,68,200） cat.html 猫コース 河童の上の三角形 （263,0,298,200,195,200） kappa.html 河童コース
147
問 題 5
フォルダ「問題 5」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① Style 要素に行頭記号付きリストのスタイル として、以下の設定を記述しなさい。 プロパティ 設定値 行頭記号の種類 四角 ② Style 要素に行頭番号付きリストのスタイル として、以下の設定を記述しなさい。 プロパティ 設定値 行頭番号の種類 アルファベット 大文字問 題 6
フォルダ「問題 6」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① ＜仕上がりイメージ＞を参考にして、1 行目 に見出しセルを追加し、文字列を配置しなさ い。 ② ＜仕上がりイメージ＞を参考にして、1 列目 の 2～3 行目と 1 列目の 4～6 行目のセルをそ れぞれ結合しなさい。 ③ style 要素に見出しセルとデータセルのスタイ ルとして以下の設定を記述しなさい。 枠線は、border プロパティを使って一括設定 すること。 プロパティ 設定値 文字色 #0000ff 背景色 ffffff 枠線 スタイル：groove 太さ：3 ピクセル 色：#cccccc 内容と枠線の間隔 3 ピクセル ④ 1 行目の 1 列目、2 列目、3 列目、4 列目の見 出しセルにそれぞれクラス「daiA」「daiB」 「daiC」「daiD」を設定しなさい。フォルダ「問題 7」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① style 要素に見出し 1 のスタイルとして、以下 の設定を記述しなさい。 font プロパティを使って一括設定すること。 プロパティ 設定値 フォント 文字列の太さ：太字 文字列のスタイル：イタリック フォントサイズ：400％ 行間隔：120％ フォントの種類： Impact,sans-serif ② style 要素にクラス「logo」のスタイルとして、 以下の設定を追加しなさい。 プロパティ 設定値 水平方向位置 右 内容と枠線の間隔 30 ピクセル マージン（左） 20 ピクセル 回り込みの指定 右 ③ style 要素に、クラス「logo」が設定されてい る範囲内の段落のスタイルとして、以下の設 定を記述しなさい。 font プロパティを使って一括設定すること。 プロパティ 設定値 フォント 文字列のスタイル：イタリック フォントサイズ：90％ フォントの種類： Impact,sans-serif
問 題 8
フォルダ「問題 8」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① 選択リストに選択項目を以下の設定で追加し なさい。 選択項目 値 ホンダ honda ヤマハ yamaha スズキ suzuki カワサキ kawasaki ② 文字列「400cc～」の前に配置されているラジ オボタンの初期のチェック状態をオンにしな さい。 ③ 文字列「レーサーレプリカ」の前に、チェッ クボックスを以下の設定で配置しなさい。 属性 設定値 名前 shape 値 replica ④ 「クリア」ボタンの左に、「検索」ボタンを以 下の設定で配置しなさい。 属性 設定値 タイプ submit ボタンの表示名 検索149
問 題 9
フォルダ「問題 8」の「base.css」をテキストエディタで開き、以下の指示に従い CSS ファイルを完成させなさ い。 ＜仕上がりイメージ＞ ① ページ本文のスタイルとして、以下の設定を 記述しなさい。 枠線は border プロパティを使って一括指定す ること。 プロパティ 設定値 枠線 スタイル：solid 太さ：1 ピクセル 色： #003366 幅 800 ピクセル ② 行頭記号付きリストのスタイルとして、以下 の設定を記述しなさい。 プロパティ 設定値 行間隔 200％ 行頭記号の種類 四角 ③ クラス「menu」のスタイルとして、以下の設 定を記述しなさい。 枠線は border プロパティを使って一括指定す ること。 プロパティ 設定値 枠線（右） スタイル：solid 太さ：1 ピクセル 色： #003366 回り込みの指定 左 幅 150 ピクセル ④ クラス「contents」のスタイルとして、以下 の設定を記述しなさい。 プロパティ 設定値 内容と枠線の間隔 10 ピクセル 回り込みの指定 右 幅 620 ピクセル ⑤ クラス「foot」のスタイルとして以下の設定を 記述しなさい。 プロパティ 設定値 回り込み解除の指定 両側第 1 回模擬試験 自由問題
問 題
以下の仕様を読み、Web ページを作成しなさい。テ ー マ
「うめだ商店街」の Web サイトである。 全ページ共通に、メニュー部分を配置する。 トップページには、最新のトピックを掲載する。 「お店紹介」ページには、話題のお店を掲載する。 「イベントスケジュール」ページには、当月のイベントを掲載する。 「イベント申し込み」ページでは、イベント申し込みフォームを掲載する。ペ ー ジ 構 成
下図のとおりのページ構成とし、各ページの右側にはメニューを作成し、ページ間を行き来できるようにする。 共通ページ (common.html) トップページ (index.html) base.css 各ページ 共通の スタイルを設定 お店紹介 (shop.html) photo.css イメージの スタイルを設定 イベントスケジュール (schedule.html) table.css 表の スタイルを設定 イベント申し込み (contact.html)151
フ ォ ル ダ 構 成 、 フ ァ イ ル 構 成
自由問題で使用するデータは、下図の左のファイル構成となっている。 「shoutengai」のフォルダ名を「syoutengai○○○（○○○は受験番号の下 3 桁を半角で入力）」と変更し、その フォルダ内に解答を作成しなさい。 ※ここでは受験番号は「9999」としている。 ※なお、「資料」フォルダ内の画像ファイルは、各ページ完成時の状態を画像として保存したものです。 サイト作成時の参考として利用してください。 ├─shoutengai フォルダ │ │ common.html │ │ │ ├─anime フォルダ │ │ view.swf │ │ │ ├─css フォルダ │ │ base.css │ │ photo.css │ │ table.css │ │ │ └─images フォルダ │ logo.gif │ shop1.jpg │ shop2.jpg │ shop3.jpg │ ├─素材フォルダ │ contact.txt │ index.txt │ schedule.txt │ shop.txt │ └─資料フォルダ common.jpg contact.jpg index.jpg schedule.jpg shop.jpg ├─shoutengai999 フォルダ │ │ common.html │ │ contact.html │ │ index.html │ │ schedule.html │ │ shop.html │ │ │ ├─anime フォルダ │ │ view.swf │ │ │ ├─css フォルダ │ │ base.css │ │ photo.css │ │ table.css │ │ │ └─images フォルダ │ logo.gif │ shop1.jpg │ shop2.jpg │ shop3.jpg │ ├─素材フォルダ │ contact.txt │ index.txt │ schedule.txt │ shop.txt │ └─資料フォルダ common.jpg contact.jpg index.jpg schedule.jpg shop.jpg(1)CSS ファイル「base.css」の「/* 全ページ共通のデザイン用 */」に以下のスタイルを記述しなさい。 ① 見出し 1(セレクタ：要素「h1」) フォントサイズ 140 パーセント 内容と枠線の間隔 5 ピクセル マージン 上：3 ピクセル 下：右：左：0 ② 見出し 2(セレクタ：要素「h2」) フォントサイズ 120 パーセント 枠線(左) スタイル：solid(実線) 太さ：12 ピクセル 色：#ff6699 内容と枠線の間隔（左） 3 ピクセル ③ 行頭記号付きリスト(セレクタ：要素「ul」) 文字列の太さ 太字 行頭記号 行頭記号をつけない 位置：リスト項目の内側 マージン 0 ④ リスト項目(セレクタ：要素「li」) 行間隔 220 パーセント 枠線(下) スタイル：dotted(点線) 太さ：1 ピクセル 色：#ff6699 内容と枠線の間隔（左） 3 ピクセル ⑤ ページ先頭のデザイン(セレクタ：クラス「head」) 背景色 #ff6699 マージン(下) 0 ⑥ ページ末尾のデザイン(セレクタ：クラス「foot」) フォントサイズ 80 パーセント 文字列の太さ 太字 水平方向位置 右 枠線(上) スタイル：solid(実線) 太さ：5 ピクセル 色：#ff6699 マージン(上) 0 回り込みの解除 左右両方 (2)CSS ファイル「base.css」の「/* 本文部分のデザイン用 */」に以下のスタイルを記述しなさい。 ① 本文部分のデザイン(セレクタ：クラス「contents」) 枠線(右) スタイル：solid(実線) 太さ：1 ピクセル 色：#ff6699 内容と枠線の間隔 20 ピクセル 幅 60 パーセント 回り込みの指定 左 (3)CSS ファイル「base.css」の「/* メニュー部分のデザイン用 */」に以下のスタイルを記述しなさい。 ① メニュー部分のデザイン(セレクタ：クラス「menu」) 内容と枠線の間隔 20 ピクセル 幅 24 パーセント 回り込みの指定 右
153
(4)CSS ファイル「base.css」の「/* リンク部分のデザイン用 */」に以下のスタイルを記述しなさい。 ① リンク部分(セレクタ：要素「a」) 文字色 #000000 文字装飾 なし 表示形式 ブロックレベル ② リンク部分のポイント時(セレクタ：疑似クラス「a:hover」) 背景色 #ffcccc (5)CSS ファイル「photo.css」の「/* 写真の配置デザイン用 */」に以下のスタイルを記述しなさい。 ① 写真の回り込み(セレクタ：クラス「photo」) マージン(右) 10 ピクセル マージン(下) 20 ピクセル 回り込みの指定 右 ② 写真の回り込みの解除(セレクタ：クラス「photoend」) 回り込みの解除 右 (6)CSS ファイル「table.css」の「/* テーブルのデザイン用 */」に以下のスタイルを記述しなさい。 ① 見出しセル(セレクタ：要素「th」) 文字色 #000000 枠線 スタイル：solid(実線) 太さ：1 ピクセル 色：#ff9999 背景色 #ffcccc 内容と枠線の間隔 10 ピクセル ② セル(セレクタ：要素「td」) 枠線 スタイル：solid(実線) 太さ：1 ピクセル 色：#999999 内容と枠線の間隔 10 ピクセル2 . 共 通 ペ ー ジ の 仕 様
＜図 1＞ (1)「common.html」を開き、以下の設定を行い保存しなさい ① CSS ファイルへの参照を設定 CSS ファイル base.css ② ページへのタイトルを設定 タイトル うめだ商店街 ③ イメージ「logo.gif」を段落に設定A
B
⑤ 文字列「小見出し」を見出し 2 に設定 ⑥ 文字列「詳細説明」を段落に設定 ⑦ 文字列「トップ･･･イベント申し込み」を行頭記号付きリストに設定 文字列「トップ」「お店紹介」「イベントスケジュール」「イベント申し込み」をそれぞれリスト項目に設定 ⑧ 文字列「20010 年 5 月 20 日更新」を段落に設定 ⑨ ③の段落にクラス「head」を設定 ⑧の段落にクラス「foot」を設定 ⑩ ＜図 1＞の A の部分にクラス「contents」を設定 ＜図 1＞の B の部分にクラス「menu」を設定 ⑪ 文字列「トップ」「お店紹介」「イベントスケジュール」「イベント申し込み」にそれぞれリンクを設定 文字列「トップ」のリンク先 index.html 文字列「お店紹介」のリンク先 shop.html 文字列「イベントスケジュール」のリンク先 schedule.html 文字列「イベント申し込み」のリンク先 contact.html
3 . ト ッ プ ペ ー ジ の 仕 様
＜図 2＞ (1)「common.html」を開き、以下の設定を行い、ファイル名「index.html」で保存しなさい ① ページへのタイトルを設定 タイトル うめだ商店街のトップページ ② ＜図 2＞を参考にして、ファイル「index.txt」の、文字列を配置し、見出し 1「大見出し」・見出し 2「小見出 し」・段落「詳細説明」の部分を編集 ・文字列「ようこそうめだ商店街へ」を見出し 1 に設定 ・文字列「お知らせ」を見出し 2 に設定 ・次の文字列をそれぞれ段落に設定 「7 月の「イベントスケジュール」が決まりました。」 「手作り体験「流しそうめんにチャレンジ！」の参加者募集中です。」 「ホテルキタウメダがリニューアルしました。」155
③ ＜図 2＞を参考にして、<object>タグを使って、Flash ムービー「view.swf」を配置し、段落に設定Flash ファイルは data 属性、MIME タイプは type 属性で設定すること。
属性 設定値 Flash ファイル フォルダ「anime」内の「view.swf」 MIME タイプ application/x-shockwave-flash 幅 400 ピクセル 高さ 227 ピクセル ④ <param>タグを使って、Flash ムービー実行時のパラメータを設定 Flash ファイルのパラメータの名前は src、繰り返し再生のパラメータの名前は loop を使用すること パラメータの名前 パラメータの値 Flash ファイル フォルダ「anime」内の「view.swf」 繰り返し再生 true（繰り返し再生する） ⑤ 文字列「トップ」のリンクを解除 ⑥ リスト項目「トップ」にクラス「current」を設定
4 . 「 お 店 紹 介 」 ペ ー ジ の 仕 様
＜図 3＞ (1)「common.html」を開き、以下の設定を行い、ファイル名「shop.html」で保存しなさい ① CSS ファイルへの参照を追加 CSS ファイル photo.css ② ページのタイトルを編集 タイトル うめだ商店街のお店紹介段落「詳細説明」の部分を編集 ・文字列「お店紹介」を見出し 1 に設定 ・次の文字列をそれぞれ見出し 2 に設定 「ホテルキタウメダ（シティホテル）」 「和菓子処 むら川（御進物・御贈答品）」 「グリル加藤（洋食）」 ・次の文字列をそれぞれ段落に設定。 「5 月 1 日に全面リニューアルしました。北梅田駅前にある近代的なホテルです。」 「住所：北梅田町梅田南 1-X-X 電話：043-452-XXXX」 「おもてなしやお土産にぴったりな、季節の和菓子をお届けします。」 「住所：北梅田町梅田東 2-X-X 電話：043-456-XXXX」 「明治から続く秘伝のレシピをぜひご賞味ください。」 「住所：北梅田町梅田西 3-X-X 電話：043-459-XXXX」 必要に応じて改行（段落を分けない改行）を挿入 ④ ＜図 3＞を参考にして、見出し 2「ホテルキタウメダ（シティホテル）」「和菓子処 むら川（御進物・御贈答 品）」「グリル加藤（洋食）」の下に、イメージ「shop1.jpg」「shop2.jpg」「shop3.jpg」をそれぞれ挿入し、段 落に設定 ・イメージ「shop1.jpg」 代替文字 写真 幅 250 ピクセル 高さ 167 ピクセル ・イメージ「shop2.jpg」 代替文字 写真 幅 250 ピクセル 高さ 167 ピクセル ・イメージ「shop3.jpg」 代替文字 写真 幅 250 ピクセル 高さ 167 ピクセル ⑤ ④のイメージ「shop1.jpg」「shop2.jpg」「shop3.jpg」にそれぞれクラス「photo」を設定 ⑥ 見出し 2「和菓子処 むら川（御進物・御贈答品）」と「グリル加藤（洋食）」に、それぞれクラス「photoend」 を設定 ⑦ 文字列「お店紹介」のリンクを解除 ⑧ リスト項目「お店紹介」にクラス「current」を設定
5 . 「 イ ベ ン ト ス ケ ジ ュ ー ル 」 ペ ー ジ の 仕 様
＜図 4＞157
(1)「common.html」を開き、以下の設定を行い、ファイル名「schedule.html」で保存しなさい ① CSS ファイルへの参照を追加 CSS ファイル table.css ② ページのタイトルを編集 タイトル うめだ商店街のイベントスケジュール ③ ＜図 4＞を参考にして、ファイル「schedule.txt」の文字列を配置し、見出し 1「大見出し」・見出し 2「小見 出し」の部分を編集 ・文字列「イベントスケジュール」を見出し 1 に設定 ・文字列「イベントのご案内」を見出し 2 に設定 ④ ＜図 4＞を参考にして、ファイル「schedule.txt」の文字列を配置し、テーブルを作成 ・4 行×3 列のテーブルを作成 ・1 行目を見出しセルに設定 ・2 列目の 2･3 行目のセルを結合 ・テーブルタイトル「7 月のイベント」を設定 ⑤ 文字列「イベントスケジュール」のリンクを解除 ⑥ リスト項目「イベントスケジュール」にクラス「current」を設定6 . 「 イ ベ ン ト 申 し 込 み 」 ペ ー ジ の 仕 様
＜図 5＞ (1)「common.html」を開き、以下の設定を行い、ファイル名「contact.html」で保存しなさい ① ページのタイトルを編集 タイトル うめだ商店街のイベント申し込み ② ＜図 4＞を参考にして、ファイル「contact.txt」の文字列を配置し、見出し 1「大見出し」・見出し 2「小見出 し」・段落「詳細説明」の部分を編集 ・文字列「イベント申し込み」を見出し 1 に設定 ・文字列「申し込みフォーム」を見出し 2 に設定 ・次の文字列をそれぞれ段落に設定 「手作り体験「流しそうめんに･･･、送信してください。」 「代表者お名前」 「参加人数をお選びください。」 「参加希望時間をお選びください。10 時～11 時 14 時～15 時 16 時～17 時」 ③ ＜図 5＞の A の部分をフォームに設定A
ボックスを配置 名前 name サイズ 20 ⑤ ＜図 5＞を参考にして、文字列「参加人数をお選びください。」の後ろに改行（段落を分けない改行）を挿入 し、選択リストを配置 名前 count 選択項目 値 選択状態 1 名様 1 初期に選択済みにする 2 名様 2 ― 3 名様 3 ― 4 名様 4 ― 5 名様 5 ― ⑥ ＜図 5＞を参考にして、文字列「参加希望時間をお選びください。」の後ろに改行（段落を分けない改行）を 挿入し、ラジオボタンを 3 つを配置 ・文字列「10 時～11 時」の前のラジオボタン 名前 time 値 10 ・文字列「14 時～15 時」の前のラジオボタン 名前 time 値 14 ・文字列「16 時～17 時」の前のラジオボタン 名前 time 値 16 ⑦ ＜図 5＞を参考にして、「送信する」ボタンと「リセット」ボタンを配置 ・左側のボタン ボタンのタイプ submit ボタンの表示名 送信する ・右側のボタン ボタンのタイプ reset ボタンの表示名 リセット ⑧ ＜図 5＞を参考にして、「送信する」ボタンと「リセット」ボタンをひとつの段落に設定 「送信する」ボタンと「リセット」ボタンの間に半角空白を入力 ただし、半角空白は文字参照「 」を使うこと。 ⑨ 文字列「イベント申し込み」のリンクを解除 ⑩ リスト項目「イベント申し込み」にクラス「current」を設定
159
第 2 回模擬試験 規定問題
フ ォ ル ダ 構 成 フ ァ イ ル 構 成
規定問題で使用するデータは、下図のファイル構成となっている。 規定問題で使用するデータのファイル構成 ├─問題 1 フォルダ │ │ 110.html │ │ 118.html │ │ 119.html │ │ index.html │ ├─images フォルダ │ │ cars.gif │ └─style フォルダ │ style.css ├─問題 2 フォルダ │ index.html ├─問題 3 フォルダ │ index.html ├─問題 4 フォルダ │ │ index.html │ └─movies フォルダ │ okinawa.swf ├─問題 5 フォルダ │ index.html ├─問題 6 フォルダ │ index.html ├─問題 7 フォルダ │ index.html │ style.css ├─問題 8 フォルダ │ index.html └─問題 9 フォルダ │ 221.html │ 223.html │ 225.html │ base.css │ index.html └─images フォルダ 221.gif 223.gif 225.gifフォルダ「問題 1」の「index.html」「110.html」「119html」「118.html」「style.css」をテキストエディタで開き、 以下の指示に従い HTML ファイルおよび CSS ファイルを完成させなさい ＜仕上がりイメージ＞ index.html 110.html 119.html 118.html ① 「index.html」のページのタイトルに受験番号 を半角で表示しなさい。 ※受験番号は「9999」とする。 ② 「index.html」の文字列「110 番に電話をかけ るとどうなるの？」に「110.html」へのリン クを設定しなさい。 「119 番に電話をかけるとどうなるの？」に 「119.html」へのリンクを設定しなさい。 「118 番に電話をかけるとどうなるの？」に 「118.html」へのリンクを設定し、。 ③ フォルダ「style」の「style.css」に、ページ 本文のスタイルとして以下の設定を記述しな さい。 背景は、background プロパティを使って一括 指定すること。 プロパティ 設定値 文字色 #CC0000 背景 色： #ffffff イメージ： フォルダ「images」内の「cars.gif」 イメージの繰り返し：繰り返さない イメージの位置：中央上 ④ 「index.html」「110.html」「119html」「118.html」 に、フォルダ「style」の「style.css」への参 照をそれぞれ設定しなさい。
161
問 題 2
フォルダ「問題 2」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい ＜仕上がりイメージ＞ ① 文字列「新作!」を下付き文字に設定しなさい。 ② style 要素に下付き文字のスタイルとして、以 下の設定を記述しなさい。 プロパティ 設定値 文字色 #ffffff 文字サイズ x-small 背景色 #ff5500 内容と枠線との間隔 3 ピクセル ③ 以下の文字列の改行や空白がそのまま表示さ れるように設定しなさい。 Cake Shop 「おかしのいえ」 ④ 文字列「ご予約は okashi@house まで」をク リ ッ ク し た と き に 、 メ ー ル ア ド レ ス 「okashi@house」にメールが送られるように 設定しなさい。 ※ただし、メールアドレスは仮想のものです。問 題 3
フォルダ「問題 3」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい ＜仕上がりイメージ＞ ① style 要素に段落のスタイルとして、以下の設 定を記述しなさい。 プロパティ 設定値 行間隔 150％ ② style 要素にクラス「check」のスタイルとし て、以下の設定を記述しなさい。 枠線（下）は、border-bottom プロパティを使 って一括指定すること。 プロパティ 設定値 文字列の太さ 太字 枠線（下） スタイル：double 太さ：5 ピクセル 色：#0000cc ③ 文字列「マークアップ言語である。」「タグを 用いて文書の構造を記述することが出来る。」 「デザインを得ることも出来る。」にそれぞれ クラス「check」を設定しなさい。フォルダ「問題 4」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい ＜仕上がりイメージ＞ ① <object>タグの属性に、以下の設定を記述し なさい。 属性 設定値 幅 360 ピクセル 高さ 200 ピクセル ② <param>タグを追加して、Flash ムービーの実 行時のパラメータを設定しなさい。 パラメータの名前は src を使用すること。 パラメータの名前 パラメータの値 Flash ファイル フ ォ ル ダ 「 movies 」 内 の 「okinawa.swf」 ③ style 要素に行頭記号付きリストのスタイルと して、以下の設定を記述しなさい。 プロパティ 設定値 行間隔 1.5 エム 行頭記号の位置 リスト項目の内側 ④ style 要素にオブジェクトのスタイルとして以 下の設定を記述しなさい。 プロパティ 設定値 マージン（右） 15 ピクセル 回り込みの指定 左
問 題 5
フォルダ「問題 5」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい ＜仕上がりイメージ＞ ① style 要素にクラス「square」のスタイルとし て、以下の設定を記述しなさい。 プロパティ 設定値 行頭記号の位置 リスト項目の内側 行頭記号の種類 四角 ② 行頭記号付きリストにクラス「square」を設 定しなさい。 ③ Style 要素にクラス「decimal」のスタイルと して、以下の設定を記述しなさい。 プロパティ 設定値 行頭記号の位置 リスト項目の内側 行頭記号の種類 アラビア数字 ④ 行頭番号付きリストにクラス「decimal」を設 定しなさい。163
問 題 6
フォルダ「問題 6」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい ＜仕上がりイメージ＞ ① ＜仕上がりイメージ＞を参考にして 1 列目の 1～3 行目と 4～6 行目の見出しセルをそれぞ れ結合しなさい。 ② style 要素に見出しセルのスタイルとして、 右の設定を記述しなさい。 枠線は。border プロパティを使って一括指定 すること。 プロパティ 設定値 垂直方向位置 下 枠線 スタイル：inset 太さ：5 ピクセル 色：#FFCC66 ③ style 要素にクラス「date」のスタイルとして、 以下の設定を記述しなさい。 枠線は。Border プロパティを使って一括指定 すること。 プロパティ 設定値 枠線 スタイル：dashed 太さ：5 ピクセル 色： #FFCC33 ④ 2 列目のセルに、それぞれクラス「rank」を設 定しなさい。 ⑤ 3 列目のセルに、それぞれクラス「date」を設 定しなさい。問 題 7
フォルダ「問題 7」の「index.html」と「style.css」をテキストエディタで開き、以下の指示に従い HTML ファイ ルおよび CSS ファイルを完成させなさい ＜仕上がりイメージ＞ ① 「style.css」にクラス「main」のスタイルと して、以下の設定を記述しなさい。 プロパティ 設定値 幅 50 パーセント 枠線と内容の間隔 5 ピクセル 行間隔 150 パーセント 回り込みの指定 左 ② 「style.css」にクラス「side」のスタイルとし て、以下の設定を記述しなさい。 プロパティ 設定値 幅 40 パーセント 枠線と内容の間隔 5 ピクセル 回り込みの指定 右 ③ 「style.css」にクラス「foot」のスタイルとし て、以下の設定を追記しなさい。 プロパティ 設定値 回り込みの解除 両方 ④ 「index.html」に「style.css」への参照を設定 しなさい。⑤ 「index.html」の style 要素に、クラス「main」 が設定されている範囲内の段落スタイルとし て、以下の設定を記述しなさい。
プロパティ 設定値
フォントサイズ 120％
⑥ 「index.html」の style 要素に、クラス「side」 が設定されている範囲内の段落スタイルとし て、以下の設定を記述しなさい。
プロパティ 設定値
フォルダ「問題 8」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい ＜仕上がりイメージ＞ ① 文字列「お名前」の下に、テキストボックス を以下の設定で配置しなさい。 属性 設定値 名前 name サイズ 30 最大文字数 30 ② 文字列「メールアドレス」の下に、テキスト ボックスを以下の設定で配置しなさい。 属性 設定値 名前 address サイズ 50 最大文字数 50 ③ 文字列「はい」の前にラジオボタンを以下の 設定で配置しなさい。 属性 設定値 名前 news 値 yes 初期のチェック状態 オンにする ④ 文字列「いいえ」の前にラジオボタンを以下 の設定で配置しなさい。 属性 設定値 名前 news 値 no ⑤ 「送信」ボタンの右に、「クリア」ボタンを以 下の設定で配置しなさい。 属性 設定値 タイプ reset ボタンの表示名 クリア
問 題 9
フォルダ「問題 9」の「base.css」をテキストエディタで開き、以下の指示に従い CSS ファイルを完成させなさ い ＜仕上がりイメージ＞ ① 行頭番号付きリストのスタイルとして以下の 設定を記述しなさい。 属性 設定値 余白 0 ② リスト項目のスタイルとして以下の設定を追 加しなさい。 行 頭 記 号 は list-style プロパティ、枠線は border プロパティを使って一括指定すること。 属性 設定値 行頭記号 行頭記号をつけない 位置：リスト項目の外側 枠線 枠線：solid 太さ：1 ピクセル 色： #FFFF99 マージン（下） 10 ピクセル ③ リンク部分のスタイルとして、以下の設定を 追加しなさい。 属性 設定値 文字装飾 なし 表示形式 ブロックレベル ④ クラス「right」のスタイルとして、以下の設 定を記述しなさい。 属性 設定値 回り込みの指定 右 幅 24 パーセント ⑤ クラス「left」のスタイルとして、以下の設定 を記述しなさい。 属性 設定値 回り込みの指定 左 幅 74 パーセント165
第 2 回模擬試験 自由問題
問 題
以下の仕様を読み、Web ページを作成しなさい。テ ー マ
絵を題材とした Web サイトである。 トップページには、タイトルと各ページへのリンクを設定する。 「カラー」のページでは色の名前を知ることが出来る。 「ドローイング」のページでは、マウスで画面上に絵をかくことが出来る。 「アンケート」のページでは、アンケートを送信できる。ペ ー ジ 構 成
下図のとおりのページ構成とし、トップページから各ページへリンクするものとする。 トップページ index.html カラー color.html カラー 紫 color_purple.html カラー 青 color_blue.html カラー 水 color_light_blue.html カラー 緑 color_green.html カラー 黄 color_yellow.html カラー 橙 color_orange.html カラー 赤 color_red.html ドローイング drawing.html アンケート question.html 共通ページ (common.css) style.css 各ページ 共通の スタイルを設定 共通ページを コピーして作成自由問題で使用するデータは、下図の左のファイル構成となっている。 「paint」のフォルダ名を「paint○○○（○○○は受験番号の下 3 桁を半角で入力）」と変更し、そのフォルダ内に 解答を作成しなさい。 ※ここでは受験番号は「9999」としている。 ※なお、「資料」フォルダ内の画像ファイルは、各ページ完成時の状態を画像として保存したものです。 サイト作成時の参考として利用してください。 ├─paint フォルダ │ │ common.html │ │ │ ├─css フォルダ │ │ style.css │ │ │ └─images フォルダ │ paintboard.swf │ paintbrush.jpg │ palette.gif │ palette_blue.gif │ palette_green.gif │ palette_light_blue.gif │ palette_orange.gif │ palette_purple.gif │ palette_red.gif │ palette_yellow.gif │ pencils.jpg │ └─資料フォルダ color.jpg common.jpg drawing.jpg index.jpg quetion.jpg ├─paint999 フォルダ │ │ color.html │ │ color_blue.html │ │ color_green.html │ │ color_light_blue.html │ │ color_orange.html │ │ color_purple.html │ │ color_red.html │ │ color_yellow.html │ │ common.html │ │ drawing.html │ │ index.html │ │ question.html │ │ │ ├─css フォルダ │ │ style.css │ │ │ └─images フォルダ │ paintboard.swf │ paintbrush.jpg │ palette.gif │ palette_blue.gif │ palette_green.gif │ palette_light_blue.gif │ palette_orange.gif │ palette_purple.gif │ palette_red.gif │ palette_yellow.gif │ pencils.jpg │ └─資料フォルダ color.jpg common.jpg drawing.jpg index.jpg quetion.jpg
167
1 . C SS の 仕 様
(1)CSS ファイル「style.css」の「/* 全ページ共通のデザイン用 */」に以下のスタイルを記述しなさい。 ① ページ本文(セレクタ:要素「body」) 文字色 #333333 背景 色：#ffffff イメージ：pencils.jpg イメージの繰り返し：縦方向のみ マージン(上) 30 ピクセル マージン(左) 160 ピクセル ② 見出し 1(セレクタ：要素「h1」) 文字色 # ff6600 フォント 文字列の太さ：太字 フォントサイズ：60 ポイント フォントの種類："Century Gothic","Osaka",sans-serif ③ 段落とテーブル(セレクタ:要素｢p｣と「table」) フォントサイズ 110 パーセント ④ 見出しセル(セレクタ:要素｢th｣) 水平方向位置 右 内容と枠線の間隔 15 ピクセル ⑤ イメージ(セレクタ:要素｢img｣) 枠線の太さ 0 (2)CSS ファイル「style.css」の「/* 配置レイアウト用 */」に以下のスタイルを記述しなさい。 ① 左下に配置するイメージのレイアウト(セレクタ:クラス「paintbrush」) 配置方法 絶対配置 右位置 0 下位置 0 (3) CSS ファイル「style.css」の「/* リンク部分のデザイン用 */」に以下のスタイルを記述しなさい。 ① 未アクセス時のリンク部分(セレクタ:疑似クラス｢a:link｣) 文字色 #9933ff 文字装飾 なし ② アクセス済みのリンク部分(セレクタ:疑似クラス｢a:visited｣) 文字色 #ff6600 文字装飾 なし ③ ポイント時のリンク部分(セレクタ:疑似クラス｢a:hover｣) 文字色 #ffcc00 文字装飾 下線 ④ クリック時のリンク部分(セレクタ:疑似クラス｢a:active｣) 文字色 #ffff00 文字装飾 下線＜図 1＞ (1) 「common.html」を開き、以下の設定を行い保存しなさい。 ① CSS ファイルへの参照を設定 CSS ファイル style.css ② ページのタイトルを設定 タイトル レッツ・ドロウ・ピクチャ ③ <図 1>を参考にして、イメージ「paintbrush.jpg」を配置し、段落に設定 代替文字 絵筆 幅 154 ピクセル 高さ 200 ピクセル ④ ③の段落にクラス「paintbrush」を設定
3 . ト ッ プ ペ ー ジ の 仕 様
＜図 2＞169
(1)「common.html」を開き、以下の設定を行い、ファイル名「index.html」で保存しなさい。
① 文字列「Let’s Draw the Picture」を入力し、見出し 1 に設定 「Let’s」と「Draw」の後ろに改行(段落を分けない改行)を挿入 「the」の後ろの半角空白は、文字参照「 」を使用すること。 ② <図２>を参考にして、文字列「色の名前を覚えよう！」「絵を描いてみよう！」「アンケートにご協力を！」 を入力し、それぞれ段落に設定 ③ 文字列「色の名前を覚えよう！」「絵を描いてみよう！」「アンケートにご協力を！」にそれぞれリンクを設定 文字列「色の名前を覚えよう！」のリンク先 color.html 文字列「絵を描いてみよう！」のリンク先 drawing.html 文字列「アンケートにご協力を！」のリンク先 question.html
4 . 「 カ ラ ー 」 ペ ー ジ の 仕 様
＜図 3＞ (1)「common.html」を開き、以下の設定を行い、ファイル名「color.html」で保存しなさい。 ① <図 3>を参考にして、文字列「COLOR」を入力し、見出し１に設定 ② <図 3>を参考にして、イメージ「palette.gif」を配置し、段落に設定 代替文字 パレット 幅 300 ピクセル 高さ 210 ピクセル ③ イメージ「palette.gif」にクリッカブルマップを作成 マップ名 map エリア リンク先 代替文字 ①の円："50,92,25" color_purple.html この色は？ ②の円："90,57,25" color_blue.html この色は？ ③の円："138,36,25" color_light_blue.html この色は？ ④の円："188,29,25" color_green.html この色は？ ⑤の円："231,54,25" color_yellow.html この色は？ ⑥の円："260,99,25" color_orange.html この色は？ ⑦の円："223,138,25" color_red.html この色は？ ④ <図 3>を参考にして、文字列「絵具をクリックしてください。」を入力し、段落に設定①
②
③
④
⑤
⑥
⑦
＜図 4＞ (1)「common.html」を開き、以下の設定を行い、ファイル名「color_purple.html」で保存しなさい。 ① <図 4>を参考にして、文字列「COLOR」を入力し、見出し 1 に設定 ② <図 4>を参考にして、イメージ「palette_purple.gif」を配置し、段落に設定 代替文字 紫色 幅 300 ピクセル 高さ 210 ピクセル ③ <図 4>を参考にして、文字列「クリックしたのは「紫」」を入力し、段落に設定 ＜図 5＞ (2)「color_purple.html」を開き、以下の設定を行い、ファイル名「color_blue.html」で保存しなさい。 ① <図 5>を参考にして、イメージ「palette_purple.gif」をイメージ「palette_blue.gif」に修正 代替文字 青色 幅 300 ピクセル 高さ 210 ピクセル ② <図 5>を参考にして、文字列文字列「クリックしたのは「紫」」を「クリックしたのは「青」」に修正
171
(2)「color_blue.html」を開き、同様に修正し、それぞれのファイル名で保存しなさい HTML ファイル名 イメージ 代替文字 幅 高さ 文字列 color_light_blue.html palette_light_blue.gif 水色 300 ピクセル 210 ピクセル クリックしたのは「水色」 color_green.html palette_green.gif 緑色 300 ピクセル 210 ピクセル クリックしたのは「緑」 color_yellow.html palette_yellow.gif 黄色 300 ピクセル 210 ピクセル クリックしたのは「黄色」 color_orange.html palette_orange.gif オレンジ色 300 ピクセル 210 ピクセル クリックしたのは「オレンジ色」 color_red.html palette_red.gif 赤色 300 ピクセル 210 ピクセル クリックしたのは「赤」6 . 「 ド ロ ー イ ン グ 」 ペ ー ジ の 仕 様
＜図 6＞ (1)「common.html」を開き、以下の設定を行い、ファイル名「drawing.html」で保存しなさい。 ① <図 6>を参考にして、文字列「DRAWING」を入力し、見出し１に設定 ② <図 6>を参考にして、文字列「キャンバスの中に絵が描けます」を入力し、段落に設定 ③ <図 6>を参考にして、<object>タグを使って、Flash ムービー「paintboard.swf」を配置し、段落に設定 Flash ファイルは data 属性、MIME タイプは type 属性で設定すること属性 設定値 Flash ファイル フォルダ「images」内の「paintboard.swf」 MIME タイプ application/x-shockwave-flash 幅 460 ピクセル 高さ 300 ピクセル ④ <param>タグを使って、Flash ムービー実行時のパラメータを設定 Flash ファイルのパラメータの名前は src を使用すること。 パラメータの名前 パラメータの値 Flash ファイル フォルダ「images」内の「paintboard.swf」
＜図 7＞ ＜図 8＞
a
b
c
d
e
f
(1)「common.html」を開き、以下の設定を行い、ファイル名「question.html」で保存しなさい。 ① <図 7>を参考にして、文字列「QUESTION」を入力し、見出し１に設定 ② <図 7>を参考にして、文字列「アンケートにご協力お願いします」を入力し、段落に設定 ③ <図 7>のＡの部分をフォームに設定 ④ <図 7>と<図 8>を参考にして３行×２列のテーブルを作成 １列目を見出しセルにすること ⑤ <図 7>と<図 8>を参考にしてセル a、c、e に文字列「ご連絡先」「どんな絵を描きたいですか？」「好きな画 家はいますか？」をそれぞれ入力 ⑥ <図 7>と<図 8>を参考にしてセル b にテキストボックスを配置 名前 mail サイズ 50 ⑦ <図 7>と<図 8>を参考にしてセル d にチェックボックス 4 つと、文字列「油絵」「水彩」「水墨画」「その他」 を入力して配置 ・ 文字列「油絵」前のチェックボックス 名前 category 値 oil ・ 文字列「水彩」前のチェックボックス 名前 category 値 water ・ 文字列「水墨画」前のチェックボックス 名前 category 値 sumi ・ 文字列「その他」前のチェックボックス 名前 category 値 otherA
173
⑧ <図 7>と<図 8>を参考にしてセル f にラジオボタン 2 つと、文字列「はい」「いいえ」を入力して配置 ・ 文字列「はい」の前のラジオボタン 名前 artist 値 yes 初期のチェック状態 オンにする ・ 文字列「いいえ」の前のラジオボタン 名前 artist 値 no ⑨ <図 7>を参考にして、テーブルの下に「送信する」ボタンを配置し、段落に設定 ボタンのタイプ submit ボタンの表示名 送信第 3 回模擬試験 規定問題
フ ォ ル ダ 構 成 フ ァ イ ル 構 成
規定問題で使用するデータは、下図のファイル構成となっている。 規定問題で使用するデータのファイル構成 ├─問題 1 フォルダ │ │ index.html │ └─images フォルダ │ back.gif ├─問題 2 フォルダ │ │ index.html │ ├─images フォルダ │ │ back.gif │ ├─style フォルダ │ │ style.css │ └─subpage フォルダ │ feb.html │ jan.html │ mar.html ├─問題 3 フォルダ │ index.html ├─問題 4 フォルダ │ index.html ├─問題 5 フォルダ │ │ index.html │ │ nakid.html │ │ off_road.html │ │ replica.html │ │ vintage.html │ └─images │ top.swf │ zone.gif ├─問題 6 フォルダ │ index.html ├─問題 7 フォルダ │ index.html ├─問題 8 フォルダ │ e.gif │ index.html │ m.gif │ p.gif └─問題 9 フォルダ index.html175
問 題 1
フォルダ「問題 1」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① ページのタイトルに受験番号を半角で表示し なさい。 ※受験番号は「9999」としている。 ② style 要素に html 要素のスタイルとして、以下 の設定を記述しなさい。 プロパティ 設定値 高さ 100% ③ style 要素にページ本文のスタイルとして以下 の設定を記述しなさい。 背景は background プロパティを使って一括 指定すること。 プロパティ 設定値 高さ 100% 背景 イメージ： フォルダ「images」内の「back.gif」 イメージの繰り返し：水平方向のみ イメージの位置：下問 題 2
フォルダ「問題 2」の「index.html」「jan.html」「feb.html」「mar.html」「style.css」をテキストエディタで開き、 以下の指示に従い HTML ファイルおよび CSS ファイルを完成させなさい。 ＜仕上がりイメージ＞ Index.html jan.html feb.html ① 「index.html」の文字列「1 月」「2 月」「3 月」 にフォルダ「subpage」の「jan.html」「feb.html」 「mar.html」へのリンクをそれぞれ設定しな さい。 ② フォルダ「style」の「style.css」にページ本 文のスタイルとして以下の設定を追加しなさ い。 プロパティ 設定値 背景イメージ フォルダ「images」内の「back.gif」 ③ フォルダ「style」の「style.css」に、擬似ク ラスのスタイルとして以下の設定を記述しな さい。 プロパティ 設定値 ポイント時のリンク部分の文字色 #ffffff ポイント時のリンク部分の背景色 #cc3366 ポイント時のリンク部分の文字装飾 なし クリック時のリンク部分の文字色 #333333 クリック時のリンク部分の背景色 透明(transparent) ④ 「 index.html 」 に 、 フ ォ ル ダ 「 style 」 の 「style.css」への参照を設定しなさい。 ⑤ フォルダ「subpage」の「jan.html」「feb.html」 「mar.html」に、フォルダ「style」の「style.css」 への参照を設定しなさい。 mar.htmlフォルダ「問題 3」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① style 要素に見出し 1 のスタイルとして、以下 の設定を記述しなさい。 フォントプロパティを使って一括指定するこ と。 プロパティ 設定値 フォント 文字列のスタイル：イタリック フォントサイズ：35 ピクセル フォントの種類： "Arial black",sans-serif ② style 要素にクラス「down」のスタイルとして 以下の設定を追加しなさい。 プロパティ 設定値 垂直方向位置 下 ③ style 要素にクラス「up」のスタイルとして以 下の設定を追加しなさい。 プロパティ 設定値 垂直方向位置 上
④ 文字列「On your mark!」にクラス「up」を設 定しなさい。 ⑤ 文字列「Go!」にクラス「down」を設定しな さい。
問 題 4
フォルダ「問題 4」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① 文字列「クリームクレンザー･･･真鍮のもの。」 「耐水性･･･水研ぎする」「サンポール･･･中和 が必要。」をそれぞれ段落に設定しなさい。 ② 文字列「クリームクレンザーを使う。」の後ろ に改行（段落を分けない改行）を挿入しなさ い。 ③ style 要素に見出し 2 のスタイルとして、以下 の設定を追加しなさい。 プロパティ 設定値 マージン（下） 5 ピクセル 内容と枠線の間隔（左） 10 ピクセル ④ style 要素に段落のスタイルとして、以下の設 定を記述しなさい。 プロパティ 設定値 マージン（上） 0177
問 題 5
フォルダ「問題 5」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① <img>タグの属性に、以下の設定を記述しな さい。 属性 設定値 代替文字 各ゾーンの説明 幅 440 ピクセル 高さ 300 ピクセル ② <object>タグを追加して、イメージ「zone.gif」 の前に Flash ムービーを配置しなさい。 Flash ファイルは data 属性、MIME タイプは type 属性で設定すること。 属性 設定値 Flash ファイル フォルダ「images」内の「top.swf」 MIME タイプ application/x-shockwave-flash 幅 450 ピクセル 高さ 300 ピクセル ③ <param>タグを追加して、Flash ムービー実行 時のパラメータを設定しなさい。 Flash ファイルのパラメータの名前は src、繰 り返し再生のパラメータの名前は loop を使用 すること。 属性 設定値 Flash ファイル フォルダ「images」内の「top.swf」 繰り返し再生 false（繰り返し再生しない） ④ <map>タグと<area>タグを追加し、<img>タ グ、<map>タグ、<area>タグの属性を設定し て、以下の動作を行うクリッカブルマップを 完成させなさい。 属性 設定値 マップ名 zone エリア リンク先 代替文字「VINTAGE ZONE」周辺の長方形（0,0,250,150） vintage.html ヴィンテージ・ゾーンへ
「NAKID ZONE」周辺の長方形（251,0,440,150） nakid.html ネイキッド・ゾーンへ
「REPLICA ZONE」周辺の長方形（0,151,190,300） replica.html レプリカ・ゾーンへ
「OFF ROAD ZONE」周辺の長方形（191,151,440,300） off_road.html オフロード・ゾーンへ
問 題 6
フォルダ「問題 6」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させな さい。 ＜仕上がりイメージ＞ ① style 要素に、行頭番号付きリストのスタイル として以下の設定を記述しなさい。 プロパティ 設定値 行頭番号の種類 アルファベット 大文字 ② style 要素に、行頭番号付きリストのリスト項目の スタイルとして以下の設定を記述しなさい。 プロパティ 設定値 フォントサイズ 120 パーセント 行間隔 140 パーセント ③ style 要素に、行頭記号付きリストのリスト項目の スタイルとして以下の設定を記述しなさい。 プロパティ 設定値 フォントサイズ 80 パーセント ④ ＜仕上がりイメージ＞の A と B の部分に、そ れぞれクラス「course」を設定しなさい。A
B
問 題 7
フォルダ「問題 7」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させなさい。 ＜仕上がりイメージ＞ ① ＜仕上がりイメージ＞を参考にして、テーブ ルタイトルに「8 月第 1 週」を設定しなさい。 ② style 要素にテーブルタイトルのスタイルとし て、以下の設定を記述しなさい。 プロパティ 設定値 水平方向位置 右 ③ style 要素に見出しセルとデータセルのスタイ ルとして、以下の設定を記述しなさい。 枠線は border プロパティを使って一括指定す ること。 プロパティ 設定値 枠線 スタイル:double 太さ:3 ピクセル 色: #333333 内容と枠線の間隔 10 ピクセル マージン 2 ピクセル ④ ＜仕上がりイメージ＞を参考にしてセルを結 合しなさい。（４か所）問 題 8
フォルダ「問題 8」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させなさい。 ＜仕上がりイメージ＞ ① style 要素にクラス「person」のスタイルとし て、以下の設定を追加しなさい。 プロパティ 設定値 内容と枠線の間隔 20 ピクセル マージン 10 ピクセル 回り込みの指定 左 ② ＜仕上がりイメージ＞の A・B・C の部分に、 それぞれクラス「person」を設定しなさい。問 題 9
フォルダ「問題 9」の「index.html」をテキストエディタで開き、以下の指示に従い HTML ファイルを完成させなさい。 ＜仕上がりイメージ＞ ① 文字列「テレビ・ラジオ」「新聞・雑誌」「イン ターネット」「その他」の前の<input>タグの属性 を設定して、チェックボックスを配置しなさい。 ② 文字列「ご観覧いただいた映画館」の下に、 選択リストを以下の設定で作成しなさい。 属性 設定値 名前 screen 選択項目 値 駅前 station Route170 170 Route171 171 ③ 文字列「良い」と「悪い」の前の<input>タグ の属性を設定して、ラジオボタンを配置しな さい。 ④ 文字列「ご意見・ご感想･･･」の下に、テキス トエリアを以下の設定で配置しなさい。 属性 設定値 名前 opinion 幅 50 高さ 4A
B
C
179
第 3 回模擬試験 自由問題
問 題
以下の仕様を読み、Web ページを作成しなさい。テ ー マ
中古バイク店の Web サイトである。 トップページには、Web サイトの入り口であり、Flash ファイルを配置する。 「おすすめ」のページでは、おすすめの中古バイクを紹介する。 「ガレージと工場」のページでは、ガレージと工場の案内を掲載する。 「お問い合わせ」のページでは、中古バイクの在庫の照会、買取査定のフォームを掲載する。ペ ー ジ 構 成
下図のとおりのページ構成とし、トップページから各ページへリンクするものとする。 トップページ index.html おすすめ recommendation.html ガレージと工場 garage.html お問い合わせ inquiry.html 共通ページ (format.css) style.css サブページ 共通の スタイルを設定 共通ページを コピーして作成 top.css トップページの スタイルを設定 goods.css 商品写真の レイアウトを設定 column.css 2 段組の レイアウトを設定自由問題で使用するデータは、下図の左のファイル構成となっている。 「vintage」のフォルダ名を「vintage○○○（○○○は受験番号の下 3 桁を半角で入力）」と変更し、そのフォルダ 内に解答を作成しなさい。 ※ここでは受験番号は「9999」としている。 ※なお、「資料」フォルダ内の画像ファイルは、各ページ完成時の状態を画像として保存したものです。 サイト作成時の参考として利用してください。 ├─vintage フォルダ │ │ format.html │ │ index.html │ │ │ ├─css フォルダ │ │ column.css │ │ goods.css │ │ style.css │ │ top.css │ │ │ ├─images フォルダ │ │ back.gif │ │ bike1.jpg │ │ bike2.jpg │ │ title.jpg │ │ │ └─movies フォルダ │ topmovie.swf │ ├─素材フォルダ │ garage.txt │ inquiry.txt │ recommendation.txt │ └─資料フォルダ format.jpg garage.jpg index.jpg inquiry.jpg recommendation.jpg ├─vintage999 フォルダ │ │ format.html │ │ garage.html │ │ index.html │ │ inquiry.html │ │ recommendation.html │ │ │ ├─css フォルダ │ │ column.css │ │ goods.css │ │ style.css │ │ top.css │ │ │ ├─images フォルダ │ │ back.gif │ │ bike1.jpg │ │ bike2.jpg │ │ title.jpg │ │ │ └─movies フォルダ │ topmovie.swf │ ├─素材フォルダ │ garage.txt │ inquiry.txt │ recommendation.txt │ └─資料フォルダ format.jpg garage.jpg index.jpg inquiry.jpg recommendation.jpg
