第 1 回模擬試験規定問題 フォルダ構成ファイル構成 規定問題で使用するデータは 下図のファイル構成となっている 規定問題で使用するデータのファイル構成 問題 1 フォルダ index.html list.html css フォルダ base.css images フォルダ logo.gif 問題

Transcription

1 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 での閲覧を前提としたものである 142

2 第 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 143

3 問題 1 フォルダ 問題 1 の index.html list.html base.css をテキストエディタで開き 以下の指示に従い HTML ファイルおよび CSS ファイルを完成させなさい < 仕上がりイメージ> index.html 1 index.html のページのタイトルに受験番号を半角で表示しなさい 受験番号は 9999 とする 2 list.html の文字列 ビジネス講座リスト DTP/WEB 講座リスト CAD 講座リスト プログラミング講座リスト にそれぞれ business dtp-web cad Programing の名前でマーカーを設定しなさい 3 index.html の文字列 ビジネス DTP/WEB CAD プログラミング に ファイル list.html のマーカー business dtp-web cad programing へのリンクをそれぞれ設定しなさい 4 フォルダ css の base.css に ページ本文のスタイルとして以下の設定を記述しなさ list.html い 背景は background を使って一括指定すること 文字色 背景 5 #FF66CC 色 : #ffffff イメージ : フォルダ images 内の logo.gif イメージの繰り返し : 繰り返さないイメージの位置 : 右下 フォルダ css の base.css に リンク部分および擬似クラスのスタイルとして以下の設定を記述しなさい リンク部分の文字列の太さ 太字 未アクセスのリンク部分の文字色 # ポイント時のリンク部分の文字色 ポイント時のリンク部分の背景色 ポイント時のリンク部分の文字装飾 #ffffff #ff0099 なし 6 index.html と list.html に フォルダ css の base.css への参照をそれぞれ設定しなさい 144

4 問題 2 フォルダ 問題 2 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 文字列 x2+y2=r2 内の 2 をそれぞれ上付き文字に設定しなさい 2 style 要素に上付き文字のスタイルとして 以下の設定を記述しなさい フォントサイズ 3 70 パーセント style 要素にクラス point のスタイルとして以下の設定を追加しなさい 文字列の色以外は font を使って一括指定すること フォント 4 文字列の色 : #cc0099 文字列の太さ : 太字フォントサイズ :120% フォントの種類 : MS P ゴシック ",sans-serif 文字列 x2+y2=r2 三平方の定理 にクラス point を設定しなさい 問題 3 フォルダ 問題 3 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 文字列 パソコンパーツの種類 を見出し 1 文字列 CPU と グラフィックカード をそれぞれ見出し 2 に設定しなさい 2 style 要素に見出し 1 のスタイルとして以下の設定を記述しなさい フォントサイズ パーセント style 要素に見出し 2 のスタイルとして以下の設定を記述しなさい 枠線 ( 左 ) は border-left 枠線 ( 下 ) は border-bottom を使って一括指定すること フォントサイズ 125 パーセント 枠線 ( 左 ) スタイル :solid( 実線 ) 太さ :15 ピクセル色 :#ff6600 枠線 ( 下 ) スタイル :solid( 実線 ) 太さ :2 ピクセル色 : #ff

5 問題 4 フォルダ 問題 4 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 <object> タグを追加して イメージ course.gif の前に Flash ムービーを配置しなさい Flash ファイルは data 属性 MIME タイプは type 属性で設定すること 属性 Flash ファイル MIME タイプ 幅 高さ 2 フォルダ anime 内の title.swf 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 エリア リンク先 代替文字 金槌の上の三角形 hammer.html 金槌コース (1,0,100,0,31,200) 猫の上の三角形 (171,0,193,200,68,200) 河童の上の三角形 (263,0,298,200,195,200) cat.html kappa.html 猫コース 河童コース 146

6 問題 5 フォルダ 問題 5 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 Style 要素に行頭記号付きリストのスタイルとして 以下の設定を記述しなさい 行頭記号の種類 2 四角 Style 要素に行頭番号付きリストのスタイルとして 以下の設定を記述しなさい 行頭番号の種類 アルファベット大文字 問題 6 フォルダ 問題 6 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 < 仕上がりイメージ>を参考にして 1 行目に見出しセルを追加し 文字列を配置しなさい 2 < 仕上がりイメージ>を参考にして 1 列目の 2~3 行目と 1 列目の 4~6 行目のセルをそれぞれ結合しなさい 3 style 要素に見出しセルとデータセルのスタイルとして以下の設定を記述しなさい 枠線は border を使って一括設定すること 文字色 背景色 枠線 内容と枠線の間隔 4 #0000ff ffffff スタイル :groove 太さ :3 ピクセル色 :#cccccc 3 ピクセル 1 行目の 1 列目 2 列目 3 列目 4 列目の見出しセルにそれぞれクラス daia daib daic daid を設定しなさい 147

7 問題 7 フォルダ 問題 7 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 style 要素に見出し 1 のスタイルとして 以下の設定を記述しなさい font を使って一括設定すること フォント文字列の太さ : 太字文字列のスタイル : イタリックフォントサイズ :400% 行間隔 :120% フォントの種類 : Impact,sans-serif 2 style 要素にクラス logo のスタイルとして 以下の設定を追加しなさい 水平方向位置右内容と枠線の間隔 30 ピクセルマージン ( 左 ) 20 ピクセル回り込みの指定右 3 style 要素に クラス logo が設定されている範囲内の段落のスタイルとして 以下の設定を記述しなさい font を使って一括設定すること フォント文字列のスタイル : イタリックフォントサイズ :90% フォントの種類 : Impact,sans-serif 問題 8 フォルダ 問題 8 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 選択リストに選択項目を以下の設定で追加しなさい 選択項目値ホンダ honda ヤマハ yamaha スズキ suzuki カワサキ kawasaki 2 文字列 400cc~ の前に配置されているラジオボタンの初期のチェック状態をオンにしなさい 3 文字列 レーサーレプリカ の前に チェックボックスを以下の設定で配置しなさい 属性名前 shape 値 replica 4 クリア ボタンの左に 検索 ボタンを以下の設定で配置しなさい 属性タイプ submit ボタンの表示名検索 148

8 問題 9 フォルダ 問題 8 の base.css をテキストエディタで開き 以下の指示に従い CSS ファイルを完成させなさい < 仕上がりイメージ> 1 ページ本文のスタイルとして 以下の設定を記述しなさい 枠線は border を使って一括指定すること 枠線スタイル :solid 太さ :1 ピクセル色 : # 幅 800 ピクセル 2 行頭記号付きリストのスタイルとして 以下の設定を記述しなさい 行間隔 200% 行頭記号の種類四角 3 クラス menu のスタイルとして 以下の設定を記述しなさい 枠線は border を使って一括指定すること 枠線 ( 右 ) スタイル :solid 太さ :1 ピクセル色 : # 回り込みの指定左幅 150 ピクセル 4 クラス contents のスタイルとして 以下の設定を記述しなさい 内容と枠線の間隔 10 ピクセル回り込みの指定右幅 620 ピクセル 5 クラス foot のスタイルとして以下の設定を記述しなさい 回り込み解除の指定両側 149

9 第 1 回模擬試験自由問題 問題 以下の仕様を読み Web ページを作成しなさい テーマ うめだ商店街 の Web サイトである 全ページ共通に メニュー部分を配置する トップページには 最新のトピックを掲載する お店紹介 ページには 話題のお店を掲載する イベントスケジュール ページには 当月のイベントを掲載する イベント申し込み ページでは イベント申し込みフォームを掲載する ページ構成 下図のとおりのページ構成とし 各ページの右側にはメニューを作成し ページ間を行き来できるようにする 共通ページ (common.html) base.css 各ページ共通のスタイルを設定 トップページ (index.html) お店紹介 (shop.html) photo.css イメージのスタイルを設定 イベントスケジュール (schedule.html) table.css 表のスタイルを設定 イベント申し込み (contact.html) 150

10 フォルダ構成 ファイル構成 自由問題で使用するデータは 下図の左のファイル構成となっている 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 なお 資料 フォルダ内の画像ファイルは 各ページ完成時の状態を画像として保存したものです サイト作成時の参考として利用してください 151

11 1.CSS の仕様 (1)CSS ファイル base.css の /* 全ページ共通のデザイン用 */ に以下のスタイルを記述しなさい 1 見出し 1( セレクタ : 要素 h1 ) フォントサイズ 内容と枠線の間隔 140 パーセント 5 ピクセル マージン上 :3 ピクセル下 : 右 : 左 :0 2 見出し 2( セレクタ : 要素 h2 ) フォントサイズ 120 パーセント 枠線 ( 左 ) スタイル :solid( 実線 ) 太さ :12 ピクセル色 :#ff6699 内容と枠線の間隔 ( 左 ) 3 ピクセル 3 行頭記号付きリスト ( セレクタ : 要素 ul ) 文字列の太さ 行頭記号 マージン 0 4 リスト項目 ( セレクタ : 要素 li ) 行間隔 太字 行頭記号をつけない位置 : リスト項目の内側 220 パーセント 枠線 ( 下 ) スタイル :dotted( 点線 ) 太さ :1 ピクセル色 :#ff6699 内容と枠線の間隔 ( 左 ) 3 ピクセル 5 ページ先頭のデザイン ( セレクタ : クラス head ) 背景色 マージン ( 下 ) 0 #ff ページ末尾のデザイン ( セレクタ : クラス foot ) フォントサイズ 文字列の太さ 水平方向位置 80 パーセント 太字 枠線 ( 上 ) スタイル :solid( 実線 ) 太さ :5 ピクセル色 :#ff6699 マージン ( 上 ) 0 回り込みの解除 右 左右両方 (2)CSS ファイル base.css の /* 本文部分のデザイン用 */ に以下のスタイルを記述しなさい 1 本文部分のデザイン ( セレクタ : クラス contents ) 枠線 ( 右 ) スタイル :solid( 実線 ) 太さ :1 ピクセル色 :#ff6699 内容と枠線の間隔 幅 回り込みの指定 20 ピクセル 60 パーセント 左 (3)CSS ファイル base.css の /* メニュー部分のデザイン用 */ に以下のスタイルを記述しなさい 1 メニュー部分のデザイン ( セレクタ : クラス menu ) 内容と枠線の間隔 幅 回り込みの指定 20 ピクセル 24 パーセント 右 152

12 (4)CSS ファイル base.css の /* リンク部分のデザイン用 */ に以下のスタイルを記述しなさい 1 リンク部分 ( セレクタ : 要素 a ) 文字色 # 文字装飾 表示形式 なし ブロックレベル 2 リンク部分のポイント時 ( セレクタ : 疑似クラス a:hover ) 背景色 #ffcccc (5)CSS ファイル photo.css の /* 写真の配置デザイン用 */ に以下のスタイルを記述しなさい 1 写真の回り込み ( セレクタ : クラス photo ) マージン ( 右 ) マージン ( 下 ) 回り込みの指定 10 ピクセル 20 ピクセル 2 写真の回り込みの解除 ( セレクタ : クラス photoend ) 回り込みの解除 右 右 (6)CSS ファイル table.css の /* テーブルのデザイン用 */ に以下のスタイルを記述しなさい 1 見出しセル ( セレクタ : 要素 th ) 文字色 # 枠線スタイル :solid( 実線 ) 太さ :1 ピクセル色 :#ff9999 背景色 #ffcccc 内容と枠線の間隔 2 セル ( セレクタ : 要素 td ) 10 ピクセル 枠線スタイル :solid( 実線 ) 太さ :1 ピクセル色 :# 内容と枠線の間隔 10 ピクセル 2. 共通ページの仕様 < 図 1> A B (1) common.html を開き 以下の設定を行い保存しなさい 1 CSS ファイルへの参照を設定 CSS ファイル base.css 2 3 ページへのタイトルを設定 タイトル イメージ logo.gif を段落に設定 うめだ商店街 153

13 文字列 大見出し を見出し 1 に設定文字列 小見出し を見出し 2 に設定文字列 詳細説明 を段落に設定文字列 トップ イベント申し込み を行頭記号付きリストに設定文字列 トップ お店紹介 イベントスケジュール イベント申し込み をそれぞれリスト項目に設定文字列 年 5 月 20 日更新 を段落に設定 3の段落にクラス head を設定 8の段落にクラス foot を設定 < 図 1>の A の部分にクラス contents を設定 < 図 1>の B の部分にクラス menu を設定文字列 トップ お店紹介 イベントスケジュール イベント申し込み にそれぞれリンクを設定文字列 トップ のリンク先 index.html 文字列 お店紹介 のリンク先 shop.html 文字列 イベントスケジュール のリンク先 文字列 イベント申し込み のリンク先 schedule.html contact.html 3. トップページの仕様 < 図 2> (1) common.html を開き 以下の設定を行い ファイル名 index.html で保存しなさい 1 ページへのタイトルを設定 2 タイトル うめだ商店街のトップページ < 図 2> を参考にして ファイル index.txt の 文字列を配置し 見出し 1 大見出し 見出し 2 小見出し 段落 詳細説明 の部分を編集 文字列 ようこそうめだ商店街へ を見出し 1 に設定 文字列 お知らせ を見出し 2 に設定 次の文字列をそれぞれ段落に設定 7 月の イベントスケジュール が決まりました 手作り体験 流しそうめんにチャレンジ! の参加者募集中です ホテルキタウメダがリニューアルしました 154

14 < 図 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 で保存しなさい 1 CSS ファイルへの参照を追加 CSS ファイル photo.css 2 ページのタイトルを編集 タイトル うめだ商店街のお店紹介 155

15 3 4 < 図 3>を参考にして ファイル shop.txt の文字列を配置し 見出し 1 大見出し 見出し 2 小見出し 段落 詳細説明 の部分を編集 文字列 お店紹介 を見出し 1 に設定 次の文字列をそれぞれ見出し 2 に設定 ホテルキタウメダ( シティホテル ) 和菓子処むら川 ( 御進物 御贈答品 ) グリル加藤( 洋食 ) 次の文字列をそれぞれ段落に設定 5 月 1 日に全面リニューアルしました 北梅田駅前にある近代的なホテルです 住所: 北梅田町梅田南 1-X-X 電話 : XXXX おもてなしやお土産にぴったりな 季節の和菓子をお届けします 住所: 北梅田町梅田東 2-X-X 電話 : XXXX 明治から続く秘伝のレシピをぜひご賞味ください 住所: 北梅田町梅田西 3-X-X 電話 : XXXX 必要に応じて改行 ( 段落を分けない改行 ) を挿入 < 図 3>を参考にして 見出し 2 ホテルキタウメダ( シティホテル ) 和菓子処むら川 ( 御進物 御贈答品 ) グリル加藤 ( 洋食 ) の下に イメージ shop1.jpg shop2.jpg shop3.jpg をそれぞれ挿入し 段落に設定 イメージ shop1.jpg 代替文字 幅 高さ イメージ shop2.jpg 代替文字 幅 高さ イメージ shop3.jpg 代替文字 幅 高さ 写真 250 ピクセル 167 ピクセル 写真 250 ピクセル 167 ピクセル 写真 250 ピクセル 167 ピクセル 5 4のイメージ shop1.jpg shop2.jpg shop3.jpg にそれぞれクラス photo を設定 6 見出し 2 和菓子処むら川 ( 御進物 御贈答品 ) と グリル加藤( 洋食 ) に それぞれクラス photoend を設定 7 文字列 お店紹介 のリンクを解除 8 リスト項目 お店紹介 にクラス current を設定 5. イベントスケジュール ページの仕様 < 図 4> 156

16 (1) common.html を開き 以下の設定を行い ファイル名 schedule.html で保存しなさい 1 CSS ファイルへの参照を追加 CSS ファイル ページのタイトルを編集 タイトル table.css うめだ商店街のイベントスケジュール < 図 4>を参考にして ファイル schedule.txt の文字列を配置し 見出し 1 大見出し 見出し 2 小見出し の部分を編集 文字列 イベントスケジュール を見出し 1 に設定 文字列 イベントのご案内 を見出し 2 に設定 < 図 4>を参考にして ファイル schedule.txt の文字列を配置し テーブルを作成 4 行 3 列のテーブルを作成 1 行目を見出しセルに設定 2 列目の 2 3 行目のセルを結合 テーブルタイトル 7 月のイベント を設定文字列 イベントスケジュール のリンクを解除リスト項目 イベントスケジュール にクラス current を設定 6. イベント申し込み ページの仕様 < 図 5> A (1) common.html を開き 以下の設定を行い ファイル名 contact.html で保存しなさい 1 ページのタイトルを編集 2 3 タイトル うめだ商店街のイベント申し込み < 図 4>を参考にして ファイル contact.txt の文字列を配置し 見出し 1 大見出し 見出し 2 小見出し 段落 詳細説明 の部分を編集 文字列 イベント申し込み を見出し 1 に設定 文字列 申し込みフォーム を見出し 2 に設定 次の文字列をそれぞれ段落に設定 手作り体験 流しそうめんに 送信してください 代表者お名前 参加人数をお選びください 参加希望時間をお選びください 10 時 ~11 時 14 時 ~15 時 16 時 ~17 時 < 図 5>の A の部分をフォームに設定 157

17 4 5 < 図 5> を参考にして 文字列 代表者お名前 の後ろに改行 ( 段落を分けない改行 ) を挿入し テキストボックスを配置 名前 サイズ 20 name < 図 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 を設定 158

18 第 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 159

19 問題 1 フォルダ 問題 1 の index.html 110.html 119html 118.html style.css をテキストエディタで開き 以下の指示に従い HTML ファイルおよび CSS ファイルを完成させなさい < 仕上がりイメージ> index.html 118.html 110.html 119.html 1 index.html のページのタイトルに受験番号を半角で表示しなさい 受験番号は 9999 とする 2 index.html の文字列 110 番に電話をかけるとどうなるの? に 110.html へのリンクを設定しなさい 119 番に電話をかけるとどうなるの? に 119.html へのリンクを設定しなさい 118 番に電話をかけるとどうなるの? に 118.html へのリンクを設定し 3 フォルダ style の style.css に ページ本文のスタイルとして以下の設定を記述しなさい 背景は background を使って一括指定すること 文字色 背景 #CC0000 色 : #ffffff イメージ : フォルダ images 内の cars.gif イメージの繰り返し : 繰り返さないイメージの位置 : 中央上 4 index.html 110.html 119html 118.html に フォルダ style の style.css への参照をそれぞれ設定しなさい 160

20 問題 2 フォルダ 問題 2 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 文字列 新作! を下付き文字に設定しなさい 2 style 要素に下付き文字のスタイルとして 以下の設定を記述しなさい 文字色 文字サイズ 背景色 内容と枠線との間隔 3 4 #ffffff x-small #ff ピクセル 以下の文字列の改行や空白がそのまま表示されるように設定しなさい Cake Shop おかしのいえ 文字列 ご予約は okashi@house まで をクリックしたときに メールアドレス okashi@house にメールが送られるように設定しなさい ただし メールアドレスは仮想のものです 問題 3 フォルダ 問題 3 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 style 要素に段落のスタイルとして 以下の設定を記述しなさい 行間隔 150% 2 style 要素にクラス check のスタイルとして 以下の設定を記述しなさい 枠線 ( 下 ) は border-bottom を使って一括指定すること 文字列の太さ 枠線 ( 下 ) 3 太字 スタイル :double 太さ :5 ピクセル色 :#0000cc 文字列 マークアップ言語である タグを用いて文書の構造を記述することが出来る デザインを得ることも出来る にそれぞれクラス check を設定しなさい 161

21 問題 4 フォルダ 問題 4 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 <object> タグの属性に 以下の設定を記述しなさい 問題 5 幅 高さ 2 属性 360 ピクセル 200 ピクセル <param> タグを追加して Flash ムービーの実行時のパラメータを設定しなさい パラメータの名前は src を使用すること パラメータの名前 Flash ファイル 3 行間隔 パラメータの値 フォルダ movies 内の okinawa.swf style 要素に行頭記号付きリストのスタイルとして 以下の設定を記述しなさい 行頭記号の位置 エム リスト項目の内側 style 要素にオブジェクトのスタイルとして以下の設定を記述しなさい マージン ( 右 ) 回り込みの指定 15 ピクセル 左 フォルダ 問題 5 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ > 1 style 要素にクラス square のスタイルとして 以下の設定を記述しなさい 行頭記号の位置 行頭記号の種類 2 3 リスト項目の内側 四角 行頭記号付きリストにクラス square を設定しなさい Style 要素にクラス decimal のスタイルとして 以下の設定を記述しなさい 行頭記号の位置 行頭記号の種類 4 リスト項目の内側 アラビア数字 行頭番号付きリストにクラス decimal を設定しなさい 162

22 問題 6 フォルダ 問題 6 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 枠線は border を使って一括指定すること 1 2 < 仕上がりイメージ>を参考にして 1 列目の 1~3 行目と 4~6 行目の見出しセルをそれぞれ結合しなさい style 要素に見出しセルのスタイルとして 右の設定を記述しなさい 垂直方向位置 枠線 3 枠線 4 5 下 スタイル :inset 太さ :5 ピクセル色 :#FFCC66 style 要素にクラス date のスタイルとして 以下の設定を記述しなさい 枠線は Border を使って一括指定すること スタイル :dashed 太さ :5 ピクセル色 : #FFCC33 2 列目のセルに それぞれクラス rank を設定しなさい 3 列目のセルに それぞれクラス date を設定しなさい 幅 問題 7 フォルダ 問題 7 の index.html と style.css をテキストエディタで開き 以下の指示に従い HTML ファイルおよび CSS ファイルを完成させなさい < 仕上がりイメージ> 2 style.css にクラス side のスタイルとして 以下の設定を記述しなさい 1 style.css にクラス main のスタイルとして 以下の設定を記述しなさい 枠線と内容の間隔 行間隔 回り込みの指定 50 パーセント 5 ピクセル 150 パーセント 左 幅 枠線と内容の間隔 回り込みの指定 3 40 パーセント 5 ピクセル 右 style.css にクラス foot のスタイルとして 以下の設定を追記しなさい 回り込みの解除 両方 4 index.html に style.css への参照を設定しなさい 5 index.html の style 要素に クラス main が設定されている範囲内の段落スタイルとして 以下の設定を記述しなさい フォントサイズ 120% 6 index.html の style 要素に クラス side が設定されている範囲内の段落スタイルとして 以下の設定を記述しなさい フォントサイズ 90 パーセント 163

23 問題 8 フォルダ 問題 8 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させな さい < 仕上がりイメージ> 属性 名前 address サイズ 50 1 名前 文字列 お名前 の下に テキストボックスを以下の設定で配置しなさい 属性 サイズ 30 最大文字数 30 2 name 文字列 メールアドレス の下に テキストボックスを以下の設定で配置しなさい 最大文字数 50 3 名前 値 文字列 はい の前にラジオボタンを以下の設定で配置しなさい 属性 初期のチェック状態 4 名前 値 5 タイプ news yes オンにする 文字列 いいえ の前にラジオボタンを以下の設定で配置しなさい 属性 news no 送信 ボタンの右に クリア ボタンを以下の設定で配置しなさい 属性 ボタンの表示名 reset クリア 問題 9 フォルダ 問題 9 の base.css をテキストエディタで開き 以下の指示に従い CSS ファイルを完成させなさい < 仕上がりイメージ > 1 行頭番号付きリストのスタイルとして以下の設定を記述しなさい 属性 余白 0 2 リスト項目のスタイルとして以下の設定を追加しなさい 行頭記号は list-style 枠線は border を使って一括指定すること 行頭記号 枠線 属性 マージン ( 下 ) 3 文字装飾 表示形式 4 行頭記号をつけない位置 : リスト項目の外側 枠線 :solid 太さ :1 ピクセル色 : #FFFF99 10 ピクセル リンク部分のスタイルとして 以下の設定を追加しなさい 属性 なし ブロックレベル クラス right のスタイルとして 以下の設定を記述しなさい 属性 回り込みの指定 幅 5 右 24 パーセント クラス left のスタイルとして 以下の設定を記述しなさい 属性 回り込みの指定 幅 左 74 パーセント 164

24 第 2 回模擬試験自由問題 問題 以下の仕様を読み Web ページを作成しなさい テーマ 絵を題材とした Web サイトである トップページには タイトルと各ページへのリンクを設定する カラー のページでは色の名前を知ることが出来る ドローイング のページでは マウスで画面上に絵をかくことが出来る アンケート のページでは アンケートを送信できる ページ構成 下図のとおりのページ構成とし トップページから各ページへリンクするものとする 共通ページをコピーして作成 共通ページ (common.css) style.css 各ページ共通のスタイルを設定 トップページ index.html カラー color.html カラー紫 color_purple.html ドローイング drawing.html カラー青 color_blue.html アンケート question.html カラー水 color_light_blue.html カラー緑 color_green.html カラー黄 color_yellow.html カラー橙 color_orange.html カラー赤 color_red.html 165

25 フォルダ構成 ファイル構成 自由問題で使用するデータは 下図の左のファイル構成となっている 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 なお 資料 フォルダ内の画像ファイルは 各ページ完成時の状態を画像として保存したものです サイト作成時の参考として利用してください 166

26 1.CSS の仕様 (1)CSS ファイル style.css の /* 全ページ共通のデザイン用 */ に以下のスタイルを記述しなさい 1 ページ本文 ( セレクタ : 要素 body ) 文字色 # 背景 マージン ( 上 ) マージン ( 左 ) 2 見出し 1( セレクタ : 要素 h1 ) 文字色 フォント 色 :#ffffff イメージ :pencils.jpg イメージの繰り返し : 縦方向のみ 30 ピクセル 160 ピクセル # ff 段落とテーブル ( セレクタ : 要素 p と table ) フォントサイズ 4 見出しセル ( セレクタ : 要素 th ) 水平方向位置 内容と枠線の間隔 5 イメージ ( セレクタ : 要素 img ) 枠線の太さ 0 文字列の太さ : 太字フォントサイズ :60 ポイントフォントの種類 :"Century Gothic","Osaka",sans-serif 110 パーセント 右 15 ピクセル (2)CSS ファイル style.css の /* 配置レイアウト用 */ に以下のスタイルを記述しなさい 1 左下に配置するイメージのレイアウト ( セレクタ : クラス paintbrush ) 配置方法 右位置 0 下位置 0 絶対配置 (3) CSS ファイル style.css の /* リンク部分のデザイン用 */ に以下のスタイルを記述しなさい 1 未アクセス時のリンク部分 ( セレクタ : 疑似クラス a:link ) 文字色 文字装飾 #9933ff なし 2 アクセス済みのリンク部分 ( セレクタ : 疑似クラス a:visited ) 文字色 #ff6600 文字装飾 なし 3 ポイント時のリンク部分 ( セレクタ : 疑似クラス a:hover ) 文字色 #ffcc00 文字装飾 下線 4 クリック時のリンク部分 ( セレクタ : 疑似クラス a:active ) 文字色 #ffff00 文字装飾 下線 167

27 2. 全ページ共通の仕様 < 図 1> (1) common.html を開き 以下の設定を行い保存しなさい 1 CSS ファイルへの参照を設定 CSS ファイル style.css ページのタイトルを設定 タイトル レッツ ドロウ ピクチャ < 図 1> を参考にして イメージ paintbrush.jpg を配置し 段落に設定 代替文字 幅 高さ 絵筆 3 の段落にクラス paintbrush を設定 3. トップページの仕様 < 図 2> 154 ピクセル 200 ピクセル 168

28 (1) common.html を開き 以下の設定を行い ファイル名 index.html で保存しなさい 1 文字列 Let s Draw the Picture を入力し 見出し 1 に設定 Let s と Draw の後ろに改行( 段落を分けない改行 ) を挿入 the の後ろの半角空白は 文字参照 を使用すること 2 < 図 2> を参考にして 文字列 色の名前を覚えよう! 絵を描いてみよう! アンケートにご協力を! を入力し それぞれ段落に設定 3 文字列 色の名前を覚えよう! 絵を描いてみよう! アンケートにご協力を! にそれぞれリンクを設定文字列 色の名前を覚えよう! のリンク先 color.html 文字列 絵を描いてみよう! のリンク先 文字列 アンケートにご協力を! のリンク先 drawing.html question.html 4. カラー ページの仕様 < 図 3> (1) common.html を開き 以下の設定を行い ファイル名 color.html で保存しなさい 1 < 図 3> を参考にして 文字列 COLOR を入力し 見出し1に設定 2 < 図 3> を参考にして イメージ palette.gif を配置し 段落に設定 3 代替文字 幅 高さ パレット 300 ピクセル 210 ピクセル イメージ palette.gif にクリッカブルマップを作成マップ名 map 4 エリア リンク先 代替文字 1の円 :"50,92,25" color_purple.html この色は? 2の円 :"90,57,25" color_blue.html この色は? 3の円 :"138,36,25" color_light_blue.html この色は? 4の円 :"188,29,25" color_green.html この色は? 5の円 :"231,54,25" color_yellow.html この色は? 6の円 :"260,99,25" color_orange.html この色は? 7の円 :"223,138,25" color_red.html この色は? < 図 3> を参考にして 文字列 絵具をクリックしてください を入力し 段落に設定 169

29 5. カラー紫 ~ カラー赤 ページの仕様 < 図 4> (1) common.html を開き 以下の設定を行い ファイル名 color_purple.html で保存しなさい 1 < 図 4> を参考にして 文字列 COLOR を入力し 見出し 1 に設定 2 < 図 4> を参考にして イメージ palette_purple.gif を配置し 段落に設定代替文字紫色幅 300 ピクセル高さ 210 ピクセル 3 < 図 4> を参考にして 文字列 クリックしたのは 紫 を入力し 段落に設定 < 図 5> (2) color_purple.html を開き 以下の設定を行い ファイル名 color_blue.html で保存しなさい 1 < 図 5> を参考にして イメージ palette_purple.gif をイメージ palette_blue.gif に修正代替文字青色幅 300 ピクセル高さ 210 ピクセル 2 < 図 5> を参考にして 文字列文字列 クリックしたのは 紫 を クリックしたのは 青 に修正 170

30 (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 で保存しなさい 1 < 図 6> を参考にして 文字列 DRAWING を入力し 見出し1に設定 2 < 図 6> を参考にして 文字列 キャンバスの中に絵が描けます を入力し 段落に設定 3 < 図 6> を参考にして <object> タグを使って Flash ムービー paintboard.swf を配置し 段落に設定 Flash ファイルは data 属性 MIME タイプは type 属性で設定すること 4 属性 Flash ファイル フォルダ images 内の paintboard.swf MIME タイプ application/x-shockwave-flash 幅 高さ 460 ピクセル 300 ピクセル <param> タグを使って Flash ムービー実行時のパラメータを設定 Flash ファイルのパラメータの名前は src を使用すること パラメータの名前 パラメータの値 Flash ファイルフォルダ images 内の paintboard.swf 171

31 7. アンケート ページの仕様 < 図 7> A < 図 8> a c e (1) common.html を開き 以下の設定を行い ファイル名 question.html で保存しなさい 1 < 図 7> を参考にして 文字列 QUESTION を入力し 見出し1に設定 2 < 図 7> を参考にして 文字列 アンケートにご協力お願いします を入力し 段落に設定 3 < 図 7> のAの部分をフォームに設定 4 < 図 7> と < 図 8> を参考にして3 行 2 列のテーブルを作成 1 列目を見出しセルにすること 5 < 図 7> と < 図 8> を参考にしてセル a c e に文字列 ご連絡先 どんな絵を描きたいですか? 好きな画家はいますか? をそれぞれ入力 6 < 図 7> と < 図 8> を参考にしてセル b にテキストボックスを配置名前 mail サイズ 50 7 < 図 7> と < 図 8> を参考にしてセル d にチェックボックス 4 つと 文字列 油絵 水彩 水墨画 その他 を入力して配置 文字列 油絵 前のチェックボックス名前 category 値 oil 文字列 水彩 前のチェックボックス名前 category 値 water 文字列 水墨画 前のチェックボックス名前 category 値 sumi 文字列 その他 前のチェックボックス 名前 値 category other b d f 172

32 8 9 < 図 7> と < 図 8> を参考にしてセル f にラジオボタン 2 つと 文字列 はい いいえ を入力して配置 文字列 はい の前のラジオボタン 名前 値 初期のチェック状態 artist yes オンにする 文字列 いいえ の前のラジオボタン 名前 値 artist no < 図 7> を参考にして テーブルの下に 送信する ボタンを配置し 段落に設定ボタンのタイプ submit ボタンの表示名 送信 173

33 第 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.html 174

34 問題 1 フォルダ 問題 1 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させな さい < 仕上がりイメージ> 1 ページのタイトルに受験番号を半角で表示しなさい 受験番号は 9999 としている 2 style 要素に html 要素のスタイルとして 以下の設定を記述しなさい 問題 2 高さ 100% 3 style 要素にページ本文のスタイルとして以下の設定を記述しなさい 背景は background を使って一括指定すること 高さ 100% 背景イメージ : フォルダ images 内の back.gif イメージの繰り返し : 水平方向のみイメージの位置 : 下 フォルダ 問題 2 の index.html jan.html feb.html mar.html style.css をテキストエディタで開き 以下の指示に従い HTML ファイルおよび CSS ファイルを完成させなさい < 仕上がりイメージ> Index.html 1 index.html の文字列 1 月 2 月 3 月 にフォルダ subpage の jan.html feb.html mar.html へのリンクをそれぞれ設定しな さい 2 フォルダ style の style.css にページ本 文のスタイルとして以下の設定を追加しなさ い jan.html feb.html 背景イメージフォルダ images 内の back.gif 3 フォルダ style の style.css に 擬似クラスのスタイルとして以下の設定を記述しなさい ポイント時のリンク部分の文字色 ポイント時のリンク部分の背景色 #ffffff #cc3366 ポイント時のリンク部分の文字装飾なしクリック時のリンク部分の文字色 # クリック時のリンク部分の背景色 透明 (transparent) 4 index.html に フォルダ style の style.css への参照を設定しなさい 5 フォルダ subpage の jan.html feb.html mar.html に フォルダ style の style.css への参照を設定しなさい mar.html 175

35 問題 3 フォルダ 問題 3 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 style 要素に見出し 1 のスタイルとして 以下の設定を記述しなさい フォントを使って一括指定すること 問題 4 フォント 2 文字列のスタイル : イタリックフォントサイズ :35 ピクセルフォントの種類 : "Arial black",sans-serif style 要素にクラス down のスタイルとして以下の設定を追加しなさい 垂直方向位置 3 下 style 要素にクラス up のスタイルとして以下の設定を追加しなさい 垂直方向位置 4 5 上 文字列 On your mark! にクラス up を設定しなさい 文字列 Go! にクラス down を設定しなさい フォルダ 問題 4 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 文字列 クリームクレンザー 真鍮のもの 耐水性 水研ぎする サンポール 中和が必要 をそれぞれ段落に設定しなさい 2 文字列 クリームクレンザーを使う の後ろに改行 ( 段落を分けない改行 ) を挿入しなさい 3 style 要素に見出し 2 のスタイルとして 以下の設定を追加しなさい マージン ( 下 ) 内容と枠線の間隔 ( 左 ) 4 5 ピクセル 10 ピクセル style 要素に段落のスタイルとして 以下の設定を記述しなさい マージン ( 上 ) 0 176

36 問題 5 フォルダ 問題 5 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させな さい < 仕上がりイメージ> 2 <object> タグを追加して イメージ zone.gif の前に Flash ムービーを配置しなさい Flash ファイルは data 属性 MIME タイプは type 属性で設定すること 1 属性 代替文字 幅 高さ <img> タグの属性に 以下の設定を記述しなさい 各ゾーンの説明 440 ピクセル 300 ピクセル 属性 Flash ファイル フォルダ images 内の top.swf MIME タイプ application/x-shockwave-flash 幅 高さ ピクセル 300 ピクセル <param> タグを追加して Flash ムービー実行時のパラメータを設定しなさい Flash ファイルのパラメータの名前は src 繰り返し再生のパラメータの名前は loop を使用すること 属性 Flash ファイルフォルダ images 内の top.swf 繰り返し再生 false( 繰り返し再生しない ) 4 <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 オフロード ゾーンへ A B 問題 6 フォルダ 問題 6 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 1 style 要素に 行頭番号付きリストのスタイルとして以下の設定を記述しなさい 行頭番号の種類 2 アルファベット大文字 style 要素に 行頭番号付きリストのリスト項目のスタイルとして以下の設定を記述しなさい フォントサイズ 行間隔 パーセント 140 パーセント style 要素に 行頭記号付きリストのリスト項目のスタイルとして以下の設定を記述しなさい フォントサイズ 4 80 パーセント < 仕上がりイメージ > の A と B の部分に それぞれクラス course を設定しなさい 177

37 問題 7 フォルダ 問題 7 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 2 style 要素にテーブルタイトルのスタイルとし て 以下の設定を記述しなさい 1 < 仕上がりイメージ > を参考にして テーブルタイトルに 8 月第 1 週 を設定しなさい 問題 8 水平方向位置 3 枠線 右 style 要素に見出しセルとデータセルのスタイルとして 以下の設定を記述しなさい 枠線は border を使って一括指定すること 内容と枠線の間隔 マージン 4 スタイル :double 太さ :3 ピクセル色 : # ピクセル 2 ピクセル < 仕上がりイメージ > を参考にしてセルを結合しなさい (4 か所 ) フォルダ 問題 8 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ > A B C 1 style 要素にクラス person のスタイルとして 以下の設定を追加しなさい 内容と枠線の間隔 マージン 回り込みの指定 2 20 ピクセル 10 ピクセル 左 < 仕上がりイメージ > の A B C の部分に それぞれクラス person を設定しなさい 問題 9 フォルダ 問題 9 の index.html をテキストエディタで開き 以下の指示に従い HTML ファイルを完成させなさい < 仕上がりイメージ> 属性名前 screen 1 2 文字列 テレビ ラジオ 新聞 雑誌 インターネット その他 の前の <input> タグの属性を設定して チェックボックスを配置しなさい 文字列 ご観覧いただいた映画館 の下に 選択リストを以下の設定で作成しなさい 選択項目 駅前 station Route Route 名前 文字列 良い と 悪い の前の <input> タグの属性を設定して ラジオボタンを配置しなさい 文字列 ご意見 ご感想 の下に テキストエリアを以下の設定で配置しなさい 属性 幅 50 高さ 4 opinion 値 178

38 第 3 回模擬試験自由問題 問題 以下の仕様を読み Web ページを作成しなさい テーマ 中古バイク店の Web サイトである トップページには Web サイトの入り口であり Flash ファイルを配置する おすすめ のページでは おすすめの中古バイクを紹介する ガレージと工場 のページでは ガレージと工場の案内を掲載する お問い合わせ のページでは 中古バイクの在庫の照会 買取査定のフォームを掲載する ページ構成 下図のとおりのページ構成とし トップページから各ページへリンクするものとする 共通ページ (format.css) 共通ページをコピーして作成 style.css サブページ共通のスタイルを設定 トップページ index.html top.css おすすめ recommendation.html goods.css トップページのスタイルを設定 商品写真のレイアウトを設定 ガレージと工場 garage.html column.css 2 段組のレイアウトを設定 お問い合わせ inquiry.html 179

39 フォルダ構成 ファイル構成 自由問題で使用するデータは 下図の左のファイル構成となっている 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 なお 資料 フォルダ内の画像ファイルは 各ページ完成時の状態を画像として保存したものです サイト作成時の参考として利用してください 180

40 1.CSS の仕様 (1)CSS ファイル style.css の /* 全ページ共通のデザイン用 */ に以下のスタイルを記述しなさい 1 ページ本文 ( セレクタ : 要素 body ) 文字色 # 背景 フォントの種類 マージン 0 2 見出し 1( セレクタ : 要素 h1 ) マージン 0 3 見出し 2( セレクタ : 要素 h2 ) 文字色 # フォントサイズ 枠線 ( 下 ) 枠線 ( 左 ) 内容と枠線の間隔 ( 左 ) 色 :#cc9966 イメージ :back.gif "MS UI Gothic","Osaka",sans-serif large スタイル :solid 幅 :1 ピクセル色 :# スタイル :solid 幅 :15 ピクセル色 :# ピクセル (2)CSS ファイル style.css の /* ヘッダー部分のデザイン用 */ に以下のスタイルを記述しなさい 1 ヘッダー部分 ( セレクタ : クラス head ) 文字色 #ffffff 背景色 幅 色 :#cc ピクセル 2 ヘッダー部分の行頭記号付きリスト ( セレクタ : クラス head 内の要素 ul ) 文字列の太さ 行間隔 マージン 0 太字 2 エム 3 ヘッダー部分のリスト項目 ( セレクタ : クラス head 内の要素 li ) 内容と枠線の間隔 ( 右 ) 内容と枠線の間隔 ( 左 ) 表示形式 10 ピクセル 20 ピクセル インライン (3)CSS ファイル style.css の /* 本文部分のデザイン用 */ に以下のスタイルを記述しなさい 1 本文部分 ( セレクタ : クラス contents ) 文字色 # 背景色 内容と枠線の間隔 幅 #ffffff 20 ピクセル 760 ピクセル 2 本文部分の行頭記号付きリスト ( セレクタ : クラス contents 内の要素 ul ) 行頭記号 行間隔 種類 : 四角位置 : リスト項目の内側 1.6 エム (4)CSS ファイル goods.css の /* 商品写真の配置レイアウト用 */ に以下のスタイルを記述しなさい 1 写真の回り込み ( セレクタ : クラス photo ) マージン ( 右 ) マージン ( 下 ) 回り込みの指定 20 ピクセル 20 ピクセル 2 写真の回り込みの解除 ( セレクタ : クラス photoend ) 回り込みの解除 左 左 181

41 (5)CSS ファイル column.css の /* 2 段組みの配置レイアウト用 */ に以下のスタイルを記述しなさい 1 2 段組の左段 ( セレクタ : クラス left ) 幅 回り込みの指定 360 ピクセル 2 2 段組の右段 ( セレクタ : クラス right ) 幅 回り込みの指定 左 360 ピクセル 3 2 段組の解除 ( セレクタ : クラス foot ) 回り込みの解除 右 左右両方 2. トップページの仕様 < 図 1> (1) index.html を開き 以下の設定を行い保存しなさい 1 CSS ファイルへの参照を設定 CSS ファイル ページのタイトルを設定 タイトル top.css Vintage Club Kyoto < 図 1> を参考にして <object> タグを使って Flash ムービー topmovie.swf を配置し 段落に設定 Flash ファイルは data 属性 MIME タイプは type 属性で設定すること 属性 Flash ファイル フォルダ movies 内の topmovie.swf MIME タイプ application/x-shockwave-flash 幅 高さ 500 ピクセル 250 ピクセル <param> タグを使って Flash ムービー実行時のパラメータを設定 Flash ファイルのパラメータの名前は src 繰り返し再生のパラメータの名前は loop を使用すること パラメータの名前 パラメータの値 Flash ファイルフォルダ movies 内の topmovie.swf 繰り返し再生 false( 繰り返し再生しない ) ブラウザーが Flash ムービーの表示 再生をサポートしていない場合の代替情報として 文字列 Flash ファイルの再生には Flash Player が必要です Flash Player は アドビシステムズ社のホームページから無料でダウンロードできます が表示されるように設定 文字列 Flash Player が必要です の後ろに 改行 ( 段落を分けない改行 ) を挿入 文字列 ENTER を段落に設定文字列 ENTER にリンクを設定 リンク先 recommendation.html 182

42 3. 共通ページの仕様 < 図 2> A B (1) format.html を開き 以下の設定を行い保存しなさい 1 CSS ファイルへの参照を設定 CSS ファイル style.css ページのタイトルを設定 タイトル Vintage Club Kyoto < 図 2>を参考にして イメージ title.jpg を配置し 見出し 1 に設定代替文字 Vintage Club Kyoto 幅 高さ 800 ピクセル 100 ピクセル 文字列 トップお勧めガレージと工場お問い合わせ を行頭記号付きリストに設定文字列 トップ お勧め ガレージと工場 お問い合わせ をそれぞれリスト項目に設定文字列 トップ お勧め ガレージと工場 お問い合わせ にリンクを設定文字列 トップ のリンク先 Index.html 文字列 お勧め のリンク先 recommendation.html 文字列 ガレージと工場 のリンク先 文字列 お問い合わせ のリンク先 garage.html inquiry.html < 図 2>を参考にして 文字列 見出し を見出し 2 に設定 < 図 2>を参考にして 文字列 内容 を段落に設定 < 図 2>の A の部分に クラス head を設定 < 図 2>の B の部分に クラス contents を設定 4. おすすめ ページの仕様 < 図 3> 183

43 (1) format.html を開き 以下の設定を行い ファイル名 recommendation.html で保存しなさい 1 CSS ファイルへの参照を設定 CSS ファイル goods.css < 図 3>を参考にして ファイル recommendation.txt の文字列をクラス contents 内に配置し 本文部分を編集 文字列 おすすめ を見出し 2 に設定 文字列 Honda CB400 FOUR と Kawasaki 750RS(Z2) をそれぞれ見出し 3 に設定 次の文字列をそれぞれ段落に設定 ほぼノーマル状態の 保存されています エンジンは ご判断ください 必要に応じて 改行 ( 段落を分けない改行 ) を挿入 次の文字列をそれぞれ行頭記号月リストに設定 1975 年製走行 32,826Km 408cc 37ps 価格は 52 万円 ) 1973 年製走行 41,865Km 903cc 82ps(Z1 カタログ値 ) 価格は 85 万円 ) 次の文字列をそれぞれリスト項目に設定 1975 年製走行 32,826Km 408cc 37ps 価格は 52 万円 ) 1973 年製走行 41,865Km 903cc 82ps(Z1 カタログ値 ) 価格は 85 万円 ) < 図 3>を参考にして イメージ bike1.jpg と bike2.jpg を配置し それぞれ段落に設定 イメージ bike1.jpg 代替文字 幅 高さ イメージ bike2.jpg 代替文字 幅 高さ 写真 180 ピクセル 110 ピクセル 写真 180 ピクセル 142 ピクセル イメージ bike1.jpg と bike2.jpg にそれぞれクラス photo を設定見出し 3 Kawasaki 750RS(Z2) にクラス photoend を設定 5. ガレージと工場 ページの仕様 < 図 4> A B C 184

44 (1) format.html を開き 以下の設定を行い ファイル名 garage.html で保存しなさい 1 CSS ファイルへの参照を設定 CSS ファイル column.css 2 3 < 図 4>を参考にしてファイル garage.txt の文字列をクラス contents 内に配置し 本文部分を編集 文字列 ガレージと工場 を見出し 2 に設定 文字列 ガレージ と 工場 をそれぞれ見出し 3 に設定 次の文字列をそれぞれ段落に設定 常時百台 させていただきます 601-XXXX 電話番号 XXXX ご成約後の お願いします 601-XXXX 京都市南区唐橋 X-XX ガレージは ご注意ください 工場は ご案内いたします 必要に応じて 改行 ( 段落を分けない改行 ) を挿入 < 図 4>の A の部分にクラス left を設定 < 図 4>の B の部分にクラス right を設定 < 図 4>の C の部分にクラス foot を設定 6. お問い合わせ ページの仕様 < 図 5> A < 図 6> a c e g b d f h (1) format.html を開き 以下の設定を行い ファイル名 inquiry.html で保存しなさい 1 < 図 5>を参考にして ファイル inquiry.txt の文字列をクラス contents 内に配置し 本文部分を編集 文字列 お問い合わせ を見出し 2 に設定 文字列 在庫の照会 買取 御送信ください を段落に設定 2 < 図 5>の A の部分をフォームに設定 3 < 図 5>と< 図 6>を参考にして 4 行 2 列のテーブルを作成 4 < 図 5>と< 図 6>を参考にして セル a,c,e,f,g にファイル inquiry.txt の文字列を配置 185

45 5 < 図 5>と< 図 6>を参考にして セル b にテキストボックスを配置 名前 name サイズ < 図 5>と< 図 6>を参考にして セル d にテキストボックスを配置名前 mail サイズ 40 < 図 5>と< 図 6>を参考にして セル f にラジオボタンを配置 在庫照会 の後ろのラジオボタン名前 business 値 stock 買取査定 の後ろのラジオボタン名前 business 値 estimate < 図 5>と< 図 6>を参考にして セル g にテキストエリアを配置名前 comment 幅 30 高さ 5 < 図 5>と< 図 6>を参考にしてボタンを配置して段落に設定 左側のボタンボタンのタイプ submit ボタンの表示名 右側のボタン ボタンのタイプ ボタンの表示名 送信 reset クリア 186

46 WEB クリエイター能力認定試験 上級 模擬問題解答および配点表 187

47 第 1 回模擬試験規定問題採点基準 問題 チェック項目 配点 得点 1 1 index.html に受験番号が半角で入力され <title> タグで囲まれている 2 2 list.html で 3 つの文字列が正しくマーカーを設定されている ( 各 1 点 ) 3 3 index.html で 3 つの文字列が正しくマーカーにリンクされている ( 各 1 点 ) 3 4 bace.css に body が追加され 正しく記述されている 3 5 bace.css に a a:link a:hover が追加され 正しく追加されている 5 6 index.html list.html の <link> タグの属性が正しく設定されている 4 小計 つの文字列が <sup> タグで囲まれている ( 各 1 点 ) 3 2 style 要素に sup が追加され 正しく記述されている 2 3 style 要素の point が正しく記述されている 3 4 二つの文字列にクラス point が設定されている ( 各 1 点 ) 2 小計 つの文字列がそれぞれ指定された見出しに設定されている ( 各 1 点 ) 3 2 style 要素に h1 が追加され 正しく記述されている 2 3 style 要素に h2 が追加され 正しく記述されている 4 小計 <object> タグが挿入され 属性が正しく設定されている 3 2 <param> タグが挿入され 属性が正しく設定されている ( 各 2 点 ) 4 3 <object> タグとして 指定された文字列が設定されている 2 4 <br> タグが挿入されている 1 5 <map> タグ <area> タグが挿入され 属性が正しく設定されている 5 小計 style 要素に ul が追加され 正しく記述されている 2 2 style 要素に ol が追加され 正しく記述されている 2 小計 行目に見出しセルが配置され 文字列が配置されている 箇所でセルが正しく結合されている ( 各 2 点 ) 4 3 style 要素に th,td が追加され 正しく記述されている 5 4 見出しセルのそれぞれに正しくクラスが設定されている ( 各 1 点 ) 4 小計 style 要素に h1 が追加され 正しく記述されている 3 2 style 要素の.logo が正しく記述されている 4 3 style 要素に.logo p が追加され 正しく記述されている 3 小計 <option> タグが挿入され 選択項目が正しく設定されている 2 2 ラジオボタンの初期のチェック状態が正しく設定されている 2 3 <input> タグが挿入され checkbox 属性が正しく設定されている 2 4 <input> タグが挿入され submit 属性が正しく設定されている 2 小計 style 要素に body が追加され 正しく記述されている 2 2 style 要素に ul が追加され 正しく記述されている 2 3 style 要素に.menu が追加され 正しく記述されている 2 4 style 要素に.contents が追加され 正しく記述されている 1 5 style 要素に.foot が追加され 正しく記述されている 1 小計 8 合計

48 第 1 回模擬試験自由問題採点基準 チェック項目 配点 得点 フォルダ構成 ファイル構成 1 フォルダ syoutengai999 が作成されている 1 小計 1 1.CSS の仕様 (1) base.css の /* 全ページ共通のデザイン用 */ 1 h1 が正しく記述されている 2 2 h2 が正しく記述されている 3 3 ul が正しく記述されている 2 4 li が正しく記述されている 2 5.head が正しく記述されている 2 6.foot が正しく記述されている 3 (2) base.css の /* 本文部分のデザイン用 */ 1.contents が正しく記述されている 3 (3) base.css の /* メニュー部分のデザイン用 */ 1.menu が正しく記述されている 2 (4) base.css の /* リンク部分のデザイン用 */ 1 a が正しく記述されている 2 2 a:hover が正しく記述されている 1 小計 22 (5) photo.css の /* 写真の配置デザイン用 */ 1.photo が正しく記述されている 2 2.photoend が正しく記述されている 2 小計 4 (6) table.css の /* テーブルのデザイン用 */ 1 th が正しく記述されている 2 2 td が正しく記述されている 2 小計 4 2. 共通ページの仕様 (1) common.html 1 CSS ファイルへの参照が正しく設定されている 1 2 ページのタイトルが正しく設定されている 1 3 イメージ logo.gif が段落に設定されている 1 4 文字列 大見出し が見出し 1 に設定されている 1 5 文字列 小見出し が見出し 2 に設定されている 1 6 文字列 詳細設定 が段落に設定されている 1 7 指定された文字列が行頭記号付きリストに設定され さらにリスト項目に設定されている 2 8 文字列 2010 年 5 月 20 日更新 が段落に設定されている 1 9 指定された段落にクラス head foot が設定されている( 各 1 点 ) 2 10 指定された部分にクラス contents menu が設定されている( 各 1 点 ) 2 11 指定された文字列にそれぞれリンクが設定されている ( 各 1 点 ) 4 小計 トップページの仕様 (1) index.html 1 ページのタイトルが正しく設定されている 1 2 指定された文字列がそれぞれ見出し 1 見出し 2 段落に設定されている 3 3 <object> タグが正しく記述され view.swf が配置され 段落に設定されている 2 4 <param> タグが正しく記述されている 2 5 文字列 トップ のリンクが解除されている 1 6 リスト項目 トップ にクラス current が設定されている 1 小計

49 チェック項目 配点 得点 4. お店紹介 ページの仕様 (1) shop.html 1 CSS ファイルへの参照が正しく追加されている 1 2 ページのタイトルが正しく設定されている 1 3 指定された文字列が見出し 1 見出し 2 段落に設定されている つのイメージが配置され それぞれ段落に設定されている つのイメージにそれぞれクラス photo が設定されている 2 6 指定された見出し 2 にそれぞれクラス photoend が設定されている 2 7 文字列 お店紹介 のリンクが解除されている 1 8 リスト項目 お店紹介 にクラス current が設定されている 1 小計 イベントスケジュール ページの仕様 (1) schedule.html 1 CSS ファイルへの参照が正しく追加されている 1 2 ページのタイトルが正しく設定されている 1 3 指定された文字列が見出し 1 見出し 2 に設定されている 2 4 指定されたテーブルが作成され 文字列の配置 設定等がなされていること 6 5 文字列 イベントスケジュール のリンクが解除されている 1 6 リスト項目 イベントスケジュール にクラス current が設定されている 1 小計 イベント申し込み ページの仕様 (1) contact.html 1 ページのタイトルが正しく設定されている 1 2 指定された文字列が見出し 1 見出し 2 段落に設定されている 3 3 フォームが設定されている 1 4 指定された文字列の後ろに改行が挿入され テキストボックスが配置されている 2 5 指定された文字列の後ろに改行が挿入され 選択リストが配置されている 2 6 指定された文字列の後ろに改行が挿入され ラジオボタン 3 つが配置されている 2 7 指定された位置に 2 つのボタンが配置されている 2 8 文字列 2010 年 5 月 20 日更新 が段落に設定されている 1 9 文字列 イベント申し込み のリンクが解除されている 1 10 リスト項目 イベント申し込み にクラス current が設定されている 1 小計 16 合計

50 第 2 回模擬試験規定問題採点基準 問題 チェック項目 配点 得点 1 1 index.html に受験番号が半角で入力され <title> タグで囲まれている 1 2 index.html で 3 つの文字列が正しくリンクを設定されている ( 各 1 点 ) 3 3 style.css で body が追加され 正しく記述されている つの HTML ファイルで CSS ファイルへの参照が正しく設定されている ( 各 1 点 ) 4 小計 文字列 新作! が <sub> タグで囲まれている 3 2 style 要素に sub が追加され 正しく記述されている 3 3 指定された文字列が <pre> タグで囲まれている 3 4 指定された文字列にメールに対するリンクが設定されている 2 小計 style 要素に p が追加され 正しく記述されている 2 2 style 要素に.check が追加され 正しく記述されている 3 3 指定された文字列にそれぞれクラス check が設定されている ( 各 1 点 ) 3 小計 <object> タグが挿入され 属性が正しく設定されている 2 2 <param> タグが挿入され 属性が正しく設定されている 3 3 style 要素に ul が追加され 正しく記述されている 3 4 style 要素に object が追加され 正しく記述されている 3 小計 style 要素に.square が追加され 正しく記述されている 3 2 行頭記号付きリストにクラス square が設定されている 2 3 style 要素に.decimal が追加され 正しく記述されている 3 4 行頭番号付きリストにクラス decimal が設定されている 2 小計 指定された 2 箇所の見出しセルが結合されている ( 各 2 点 ) 4 2 style 要素に th が追加され 正しく記述されている 3 3 style 要素に.data が追加され 正しく記述されている 列目のセルにそれぞれクラス rank が設定されている 列目のセルにそれぞれクラス data が設定されている 2 小計 style.css に.main が追加され 正しく記述されている 3 2 style.css に.side が追加され 正しく記述されている 3 3 style.css に.foot が追加され 正しく記述されている 2 4 index.html で CSS ファイルへの参照が正しく設定されている 1 5 index.html の style 要素に.main p が追加され 正しく記述されている 3 6 index.html の style 要素に.side p が追加され 正しく記述されている 3 小計 お名前 の下に <input> タグが挿入され text 属性が正しく設定されている 2 2 メールアドレス の下に <input> タグが挿入され text 属性が正しく設定されている 2 3 はい の前に <input> タグが挿入され radio 属性が正しく設定されている 2 4 いいえ の前に <input> タグが挿入され radio 属性が正しく設定されている 2 5 送信 ボタンの右に <input> タグが挿入され reset 属性が正しく設定されている 2 小計 base.css に ul が追加され 正しく記述されている 2 2 base.css に li が正しく記述されている 2 3 base.css に a が正しく記述されている 2 4 base.css に.right が追加され 正しく記述されている 2 5 base.css に.left が追加され 正しく記述されている 2 小計 10 合計

51 第 2 回模擬試験自由問題採点基準 チェック項目 配点 得点 フォルダ構成 ファイル構成 1 フォルダ painti999 が作成されている 1 小計 1 1.CSS の仕様 (1) style.css の /* 全ページ共通のデザイン用 */ 1 body が正しく記述されている 3 2 h1 が正しく記述されている 2 3 p,table が正しく記述されている 2 4 th が正しく記述されている 2 5 img が正しく記述されている 1 (2) style.css の /* 配置レイアウト用 */ 1.paintbrush が正しく記述されている 3 (3) style.css の /* リンク部分のデザイン用 */ 1 a:link が正しく記述されている 2 2 a:visited が正しく記述されている 2 3 a:hover が正しく記述されている 2 4 a:active が正しく記述されている 2 小計 全ページ共通の仕様 (1) common.html 1 CSS ファイルへの参照が正しく設定されている 2 2 ページのタイトルが正しく設定されている 2 3 イメージ paintbrush.jpg が配置され 段落に設定されている 2 4 段落にクラス paintbrush が設定されている 1 小計 7 3. トップページの仕様 (1) index.html 1 指定された文字列が入力され 見出し 1 に設定されている つの指定された文字列が入力され 段落に設定されている ( 各 1 点 ) つの指定された段落に正しくリンクが設定されている ( 各 2 点 ) 6 小計 カラー ページの仕様 (1) color.html 1 指定された文字列が入力され 見出し 1 に設定されている 1 2 イメージ palette.gif が配置され 段落に設定されている 2 3 クリッカブルマップが正しく設定されている 6 4 指定された文字列が入力され 段落に設定されている 1 小計 カラー紫 ~ カラー赤 ページの仕様 (1) color_purple.html 1 指定された文字列が入力され 見出し 1 に設定されている 2 2 イメージ palette_purple.gif が配置され 段落に設定されている 2 3 指定された文字列が入力され 段落に設定されている 2 小計 6 (2) color_blue.html 1 イメージ palette_blue.gif が配置されている 1 2 指定された文字列が入力されている 1 小計 6 (3) color_xxxx.html イメージが配置されている( 各 1 点 ) 文字列が入力されている ( 各 1 点 ) 小計

52 チェック項目 配点 得点 6. ドローイング ページの仕様 (1) drawing.html 1 指定された文字列が入力され 見出し 1 に設定されている 1 2 指定された文字列が入力され 段落に設定されている 1 3 <object> タグを使って paintboard.swf が正しく配置され 段落に設定されている 4 4 <param> タグが正しく記述されている 3 小計 9 7. アンケート ページの仕様 (1) question.html 1 指定された文字列が入力され 見出し 1 に設定されている 1 2 指定された文字列が入力され 段落に設定されている 1 3 フォームが設定されている 2 4 テーブルが作成され 見出しセルが設定されている 5 5 各セルに指定された文字列が配置されている 1 6 テキストボックスが正しく配置されている 2 7 指定された文字列が配置され チェックボックスが配置されている 4 8 指定された文字列が配置され ラジオボタンが配置されている 4 9 送信ボタンが配置され 段落に設定されている 3 小計 23 合計

53 第 3 回模擬試験規定問題採点基準 問題 チェック項目 配点 得点 1 1 受験番号が半角で入力され <title> タグで囲まれている 1 2 style 要素に html が追加され 正しく記述されている 1 3 style 要素に body が追加され 正しく記述されている 2 小計 index.html の指定された文字列に正しくリンクが設定されている ( 各 1 点 ) 3 2 style.css の body が正しく記述されている 2 3 style.css に a:hover a:active が正しく記述されている ( 各 3 点 ) 6 4 index.html に CSS ファイルへの参照が正しく設定されている つの HTML ファイルの CSS ファイルへの参照が正しく設定されている ( 各 1 点 ) 3 小計 style 要素に h1 が追加され 正しく記述されている 3 2 style 要素の.down が正しく記述されている 2 3 style 要素の.up が正しく記述されている 2 4 指定された文字列にクラス up が設定されている 2 5 指定された文字列にクラス down が設定されている 2 小計 指定された文字列がそれぞれ段落に設定されている ( 各 1 点 ) 3 2 指定された文字列の後ろに改行が挿入されている 1 3 style 要素に h2 が正しく記述されている 2 4 style 要素に p が追加され 正しく記述されている 2 小計 <img> タグの属性が正しく記述されている 1 2 <object> タグが挿入され 属性が正しく記述されている 3 3 <param> タグが挿入され 属性が正しく記述されている ( 各 2 点 ) 4 4 クリッカブルマップが正しく設定されている 5 小計 style 要素に ol が追加され 正しく記述されている 2 2 style 要素に ol li が追加され 正しく記述されている 4 3 style 要素に ul li が追加され 正しく記述されている 4 4 指定された部分にクラス course が設定されている ( 各 2 点 ) 4 小計 <caption> タグが挿入され テーブルタイトルが正しく設定されている 2 2 style 要素に caption が追加され 正しく記述されている 2 3 style 要素に th,td が追加され 正しく記述されている 4 4 指定されたタグが結合されている ( 各 1 点 ) 4 小計 style 要素に.person が追加され 正しく記述されている 3 2 指定された部分にそれぞれクラス person が設定されている 9 小計 <input> タグの属性が正しく設定され チェックボックスが配置されている 2 2 選択リストが正しく記述されている 3 3 <input> タグの属性が正しく設定され ラジオボタンが配置されている 2 4 テキストエリアが正しく記述されている 3 小計 10 合計

54 第 3 回模擬試験自由問題採点基準 チェック項目 配点 得点 フォルダ構成 ファイル構成 1 フォルダ vintage999 が作成されている 1 小計 1 1.CSS の仕様 (1) style.css の /* 全ページ共通のデザイン用 */ 1 body が正しく記述されている 3 2 h1 が正しく記述されている 1 3 h2 が正しく記述されている 2 (2) style.css の /* ヘッダー部分のデザイン用 */ 1.head が正しく記述されている 2 2.head ul が正しく記述されている 3 3.head li が正しく記述されている 3 (3) style.css の /* 本文部分のデザイン用 */ 1.contents が正しく記述されている 2 2.contents ul が正しく記述されている 3 小計 20 (4) goods.css 1.photo が正しく記述されている 2 2.photoend が正しく記述されている 2 小計 4 (5) column.css 1.left が正しく記述されている 2 2.right が正しく記述されている 2 3.foot が正しく記述されている 2 小計 6 2. トップページの仕様 (1) index.html 1 CSS ファイルへの参照が正しく設定されている 1 2 ページのタイトルが正しく設定されている 1 3 <object> タグが正しく記述され topmovie.swf が配置され 段落に設定されている 3 4 <param> タグが正しく記述されている ( 各 2 点 ) 4 5 <object> タグの内容として指定された文字列が入力され 指定位置に改行が挿入されている 3 6 指定された文字列が段落に設定されている 1 7 指定された文字列にリンクが正しく設定されている 2 小計 共通ページの仕様 (1) format.html 1 CSS ファイルへの参照が正しく設定されている 1 2 ページのタイトルが正しく設定されている 1 3 イメージ title.jpg が配置され 見出し 1 に設定されている 2 4 指定された文字列が行頭記号付きリストに設定され それぞれがリスト項目に設定されている 1 5 指定された文字列にそれぞれリンクが設定されている ( 各 1 点 ) 4 6 指定された文字列が見出し 2 に設定されている 1 7 指定された文字列が段落に設定されている 1 8 指定された部分にそれぞれクラス head contents が設定されている( 各 2 点 ) 4 小計

55 チェック項目 配点 得点 4. おすすめ ページの仕様 (1) recommendation.html 1 CSS ファイルへの参照が正しく設定されている 1 2 指定された文字列が入力され それぞれ見出し 段落 リストなどに正しく設定されている つのイメージが配置され 段落に設定されている つのイメージがそれぞれクラス photo に設定されている 2 5 見出し 3 Kawasaki 750RS(Z2) にクラス photoend が設定されている 1 小計 ガレージと工場 ページの仕様 (1) garage.html 1 CSS ファイルへの参照が正しく設定されている 1 2 指定された文字列が入力され それぞれ見出し 段落などに正しく設定されている 4 3 指定された部分にクラス left right foot がそれぞれ設定されている( 各 1 点 ) 3 小計 8 4. お問い合せ ページの仕様 (1) inquiry.html 1 指定された文字列が入力され それぞれ見出し 段落などに正しく設定されている 2 2 フォームが設定されている 2 3 テーブルが作成されている 3 4 セルに指定した文字列が入力されている 1 5 テキストボックスが配置されている (2 か所ともに配置されて 2 点 1 か所だけは 1 点 ) 2 6 ラジオボタンが配置されている 2 7 テキストエリアが配置されている 2 8 二つのボタンが配置され ひとつの段落として設定されている 4 小計

56 HTML CSS 講座 2011 年 6 月初版発行 著作 / 制作 / 発行 Win スクール ( ピーシーアシスト株式会社 ) 株式会社ウィンシステムソリューション 本書の内容の一部または全部を無断で複写複製 ( コピー ) することは 法律で定められた場合を除き 著者の権利侵害となりますので コピーの必要がある場合は 予め当社に許諾を求めてください 197

57 Web クリエイター能力認定試験 受験者用リファレンス HTML4.01 対応

58 目次 HTML 1 一般定義 1 文字装飾 1 仕切り 1 リンク 2 イメージ / マルチメディア 2 リスト 3 テーブル 3 フォーム 4 HTML/CSS 6 HTML と CSS の関係 6 CSS の書式 7 擬似クラス 7 CSS 8 テキスト 8 フォント 9 背景 10 ボックス 10 配置 12 リスト 13 資料 14 索引 15

59 HTML 一般定義 <html> <head> <title> <body> HTML 文書であることをであることを示す 書式 <html> </html> ページタイトルやサーバーサーバー等が利用利用するする情報情報を指定指定するする 書式 <head> </head> ページタイトルを指定指定するする 書式 <title> </title> ページとしてとして表示表示されるされる内容内容を指定指定するする 書式 <body> </body> コメント書式 <!-- コメント本文 --> 文字装飾 <h1>~<h6> <strong> <b> <i> <sup> <sub> <pre> 見出しをしを指定指定するする 書式 <h1> </h1> <h2> </h2> ~ <h6> </h6> 文字列を強調表示強調表示する (<em> より強い強調強調 一般的一般的に太字太字で表示表示される ) 書式 <strong> </strong> 文字列をボールド ( 太字 ) 表示するする 書式 <b> </b> 文字列をイタリック ( 斜体 ) 表示するする 書式 <i> </i> 文字列を上付上付き文字文字としてとして表示表示するする 書式  文字列を下付下付き文字文字としてとして表示表示するする 書式  改行や空白空白などなど入力入力されたままのされたままの状態状態で表示表示するする 書式 <pre> </pre> 特殊文字 改行なしのなしの空白空白 書式 仕切り <p> <br> <hr> 段落を作成作成するする 書式 <p> </p> 強制的に改行改行するする 書式 <br> 水平線 ( 区切り線 ) を指定指定するする 書式 <hr> - 1 -

60 HTML リンク <a> href name リンクを作成作成するする サイトの URL を指定して リンクを作成する 書式 <a href="url"> </a> 同じ HTML 文書のマーカー位置へのリンクを作成する 書式 <a href="# マーカー名 "> </a> 別の HTML 文書のマーカー位置へのリンクを作成する 書式 <a href="url# マーカー名 "> </a> HTML 文書内にメールを送信するホットテキストを設定する 書式 <a href="mailto: メールアドレス "> </a> HTML 文書内にマーカー名を指定する 書式 <a name=" マーカー名 "> </a> イメージ / マルチメディア <img> src alt width height usemap <map> name <area> shape coords href alt <object> data type width height <param> name value 指定したしたイメージデータイメージデータをインラインインライン表示表示するする 表示するイメージファイルの URL を指定する 書式 <img src="url"> URL: ファイル名 ディレクトリ名 / ファイル名等イメージの代替文字列を指定する 書式 <img src=" ファイル名 " alt=" 代替文字列 "> イメージの幅 高さを指定する 書式 <img src=" ファイル名 " width=" 幅 " height=" 高さ "> 幅 高さ : ピクセル数またはパーセンテージ (%) クライアントサイドクリッカブルマップを設定する 書式 <img src="url" usemap="# マップ名 "> クライアントサイドクリッカブルマップで利用利用するするマップマップデータデータを作成作成するする マップ名を設定する 書式 <map name=" マップ名 "> </map> クライアントサイドクリッカブルマップ上の位置位置とクリッククリックしたときのしたときのリンクリンク先を設定する クリックするエリアの形状とデータ ( 座標 ) を指定する 書式 <area shape=" 形状 " coords=" データ "> 形状データ circle( 円 ) x,y,r( 中心の座標と半径 ) rect( 四角 ) x1,y1,x2,y2( 左上頂点と右下頂点の座標 ) poly( 多角形 ) x1,y1,x2,y2, ( 各頂点の座標 ) ハイパーリンク先の URL を指定する 書式 <area shape=" 形状 " coords=" データ " href="url"> リンク領域の代替文字列を指定する 書式 <area shape=" 形状 " coords=" データ " href="url" alt=" 代替文字列 "> ActiveX コントロールを表示表示するする ActiveX コントロールのデータ タイプ 幅 高さを指定する 書式 <object data="url" type="mime タイプ " width=" 幅 " height=" 高さ "> </object> MIME タイプ :application/x-shockwave-flash ActiveX コントロールにデータデータを渡す ActiveX コントロールが実行されるのに必要な各種の値を指定する 書式 <param name="src" value="url"> 書式 <param name="loop" value="true/false"> - 2 -

61 HTML リスト <ul> <ol> <li> 行頭記号をつけたをつけたリストリストを作成作成するする 書式 <ul> </ul> 番号付きリストリストを作成作成するする 書式 <ol> </ol> リスト項目項目を指定指定するする 書式 <li> </li> テーブル <table> border cellpadding cellspacing テーブルを定義定義するする 書式 <table> </table> 枠線を追加する 外枠線の幅 ( 枠線の 3D 効果 ) を指定する 書式 <table border=" 外枠線の幅 "> </table> 外枠線の幅 : ピクセル数枠線とセル内容との間隔を指定する 書式 <table cellpadding=" 間隔 "> </table> 間隔 : ピクセル数各セル間の間隔を指定する 書式 <table cellspacing=" 間隔 "> </table> 間隔 : ピクセル数 <tr> width align valign 表全体の横幅を指定する 書式 <table width=" 幅 "> </table> 幅 : ピクセル数 パーセンテージ (%) テーブルの行を定義定義するする 書式 <tr> </tr> セル内容の水平方向位置を指定する 書式 <tr align=" 値 "> </tr> left( 左揃え ) center( 中央揃え ) right( 右揃え ) セル内容の垂直方向位置を指定する 書式 <tr valign=" 値 "> </tr> top( 上揃え ) middle( 上下中央揃え ) bottom( 下揃え ) baseline( ベースラインを揃える ) <th> 見出しセルセルを定義定義するする 書式 <th> </th> align セル内容の水平方向位置を指定する 書式 <th align=" 値 "> </th> left( 左揃え ) center( 中央揃え ) right( 右揃え ) valign セル内容の垂直方向位置を指定する 書式 <th valign=" 値 "> </th> top( 上揃え ) middle( 上下中央揃え ) bottom( 下揃え ) baseline( ベースラインを揃える ) rowspan セルの結合 ( 複数行に渡るセルを定義する ) 書式 <th rowspan=" セル数 "> </th> - 3 -

62 HTML colspan セルの結合 ( 複数列に渡るセルを定義する ) 書式 <th colspan=" セル数 "> </th> <td> データセルを定義定義するする 書式 <td> </td> align セル内容の水平方向位置を指定する 書式 <td align=" 値 ""> </td> left( 左揃え ) center( 中央揃え ) right( 右揃え ) valign セル内容の垂直方向位置を指定する 書式 <td valign=" 値 "> </td> top( 上揃え ) middle( 上下中央揃え ) bottom( 下揃え ) baseline( ベースラインを揃える ) rowspan セルの結合 ( 複数行に渡るセルを定義する ) 書式 <td rowspan=" セル数 "> </td> colspan セルの結合 ( 複数列に渡るセルを定義する ) 書式 <td colspan=" セル数 "> </td> <caption> テーブルにタイトルタイトルを付加付加するする 書式 <caption> </caption> フォーム <form> action method enctype <input> type name value size フォームを定義定義するする 書式 <form> </form> 実行する CGI の URL または メールアドレスおよびメソッドを指定する 書式 <form action=" アクション " method=" メソッド "> </form> アクション :CGI の URL メールアドレス(mailto: メールアドレス ) メソッド :post get データを個別のファイルとして送信する 書式 <form enctype=" データタイプ " action=" アクション " method=" メソッド "> </form> データタイプ :file image アクション :CGI の URL メールアドレス(mailto: メールアドレス ) メソッド :post get 入力エリアエリアやボタンボタンを表示表示するする 表示 / 実行形式の選択およびフィールド名を指定する 書式 <input type=" 機能 " name=" フィールド名 "> 機能 : text( テキストボックス ) password( パスワード入力ボックス ) checkbox( チェックボックス ) radio( ラジオボタン ) image( イメージの座標 ) hidden( 不可視フィールド ) submit( 送信ボタン ) reset( リセットボタン ) file( ファイル名入力ボックス ) データの初期値 ボタン名を設定する 書式 <input type=" 機能 " name=" フィールド名 " value=" 初期値 / ボタン名 "> テキストボックスまたはファイル名入力ボックスの幅を指定する 書式 <input name=" フィールド名 " size=" 幅 "> - 4 -

63 HTML maxlength checked src <select> name size multiple <option> selected value <textarea> name rows cols テキストボックスまたはファイル名入力ボックスへ入力できる最大文字数を指定する 書式 <input name=" フィールド名 " maxlength=" 最大文字数 "> ラジオボタンにあらかじめチェックをつける 書式 <input type="radio" name=" フィールド名 " value=" データ " checked> チェックボックスにあらかじめチェックをつける 書式 <input type="checkbox" name=" フィールド名 " checked> 表示するイメージファイルの URL を指定する 書式 <input type="image" src="url" name=" フィールド名 "> 選択リストリストを作成作成するする 選択された項目内容を引き渡すときのリスト名を指定する 書式 <select name=" リスト名 "><option> </option></select> フィールド型リストの作成 書式 <select name=" リスト名 " size=" 行数 "><option> </option></select> 行数 : 表示される行数複数選択を可能にする 書式 <select name=" リスト名 " multiple><option> </option></select> 選択項目を指定指定するする 選択済みとして表示する項目を指定する 書式 <select name=" リスト名 "><option selected> </option></select> 選択項目に対応する値を指定する 書式 <select name=" リスト名 "><option value= 数値 /" アルファベット文字列 "> </option></select> テキストボックスフィールドを作成作成するする 項目内容を引き渡すときのボックス名を指定する 書式 <textarea name=" ボックス名 "> </textarea> テキストボックスフィールドの高さ ( 行数 ) を指定する 書式 <textarea name=" ボックス名 " rows=" 行数 "> </textarea> テキストボックスフィールドの幅を指定する 書式 <textarea name=" ボックス名 " cols=" 幅 "> </textarea> - 5 -

64 HTML/CSS HTML と CSS の関係 <link> rel href type <style> type <div> style class id <span> style class id HTML タグ style class id 外部スタイルシートスタイルシートを HTML 文書に読み込む 書式 <link rel="stylesheet" href=" 外部スタイルシートの URL" type="text/css"> <head> タグ内に <style> タグを使用使用してして タグタグにスタイルスタイルを指定指定するする 書式 <style type="text/css"> </style> HTML 文書内で 要素要素をボックスボックス要素要素にグループグループ化してして スタイルスタイルを設定設定するする 書式 <div style=" : 値 ; : 値 ; ; : 値 ">~</div> 書式 <div class=" クラス名 ">~</div> 書式 <div id="id 名 ">~</div> HTML 文書内で 要素要素をインラインインライン要素要素にグループグループ化してして スタイルスタイルを設定設定するする 書式 <span style=" : 値 ; : 値 ; ; : 値 ">~</span> 書式 <span class=" クラス名 ">~</span> 書式 <span id="id 名 ">~</span> スタイルを設定設定したいたいタグタグに直接記述直接記述するする 書式 < タグ style=" スタイルの設定 ">~</ タグ > 書式 < タグ class=" クラス名 ">~</ タグ > 書式 < タグ id="id 名 ">~</ タグ > - 6 -

65 CSS CSS の書式 タグにスタイルスタイルを指定するする 複数のタグタグに同じスタイルを指定指定するする 書式タグ { : 値 ; : 値 ; } 書式タグ 1, タグ 2,, タグ n { : 値 ; : 値 ; } CLASS( 単独 ) 定義 : 書式. クラス名 { : 値 ; : 値 ; } 設定 : 書式 < タグ class=" クラス名 ">~</ タグ > CLASS( タグに付ける形式 ) 定義 : 書式タグ. クラス名 { : 値 ; : 値 ; } 設定 : 書式 < タグ class=" クラス名 ">~</ タグ > 擬似クラス :link :visited :hover :active <a> タグで作成作成されたされたハイパーリンクハイパーリンクのうちのうち 未アクセスアクセスであるもの <a> タグで作成作成されたされたハイパハイパーリンクーリンクのうちのうち アクセスアクセス済みであるものマウスでポイントポイントしたしたオブジェクトマウスのボタンボタンが押されているなどされているなど アクティブアクティブなオブジェクト コメント書式 /* */ - 7 -