Page 1/ 13 講義一覧講義回講義タイトル講義概要 第 1 回 3 級実技試験について ガイダンス 第 2 回 HTMLによる文書構造化 HTML 言語の復習 第 3 回 CSSスタイルシートのプロパティ 値 CSSスタイルシートの復習 第 4 回 実技実習作業 1 問題 1 ディレクトリとファイルの配置位置に関する問題 第 5 回 実技実習作業 2 問題 2 HTMLファイルの修正 ( リンク設定 ) に関する問題 第 6 回 実技実習作業 3 問題 3 スタイルシートとページレイアウトの関係に関する問題 第 7 回 実技実習作業 4 問題 4 スタイルシートの修正 ( 文字色 背景色の設定に関する問題 第 8 回 実技実習作業 5 問題 5 スタイルシートの修正 ( イメージファイルの設定 ) に関する問題 第 9 回 実技実習作業 6 問題 6 HTMLファイルの修正 ( 文字列の記述 ) に関する問題 補足説明 : 第 1 回は 3 級実技試験の試験内容等 第 2 回 ~ 第 3 回は 試験対象となる言語の復習 第 4 回 ~ 第 9 回は 過去の試験問題を基に作成した模擬問題の解答 解説です 以下は 各実技実習作業ごとの 問題 学習のポイント 解答作業手順 です
Page 2/ 13 第 4 回実技実習作業 1 問題 1 次の (1)~(3) の実習作業を行いなさい (1) デスクトップ上の 実習問題 1 フォルダ内にある 実習問題 1_ ディレクトリ ファイル配置図.jpg に従い HTML ファイル CSS ファイル 画像ファイル等のソースファイルおよびディレクトリを適切に構成 配置しなさい (2) その際 必要に応じてフォルダ等を作成し CSS ファイルや画像ファイルが正しく適用されるように index.html および CSS ファイルを編集しなさい (3) デスクトップ上に 解答 1 と言う名前でフォルダを作成して フォルダおよびソースファイルを構成 配置に留意して保存しなさい 学習のポイント ディレクトリとファイルの設置 ( 配置 ) 位置の問題です 具体的には 2 種類のイメージファイル ( ボタン (HTML) とタイトル (CSS)) の設定とディレクトリの構成設定です
Page 3/ 13 第 4 回実技実習作業 1 問題 1 解答作業手順 1. ディレクトリ ファイル配置図 を開く ( 確認する ) 2. 必要なフォルダを作成する 解答 1 gnbutton image 3. 解答 1 フォルダ内に 次のファイルをコピーする contact.html guide.html index.html qa.html shopinfo.html shopping.html style.css 4. gnbutton フォルダ内に 次のファイルをコピーする contact.jpg guide.jpg qa.jpg shopinfo.jpg shopping.jpg toppage.jpg 5. image フォルダ内に 次のファイルをコピーする title_image.jpg 6. 解答 1 フォルダ内の index.html を開く ( 確認する )
Page 4/ 13 第 5 回実技実習作業 2 問題 2 次の (1)~(3) の実習作業を行いなさい (1) デスクトップ上の 実習問題 2 フォルダ内にある index.html contact.html guide.html qa.html shopinfo.html shopping.html の gnavi で指定されたエリアに グローバルナビゲーションを作成し 対応する各ページへ正しく遷移するように設定しなさい (2) グローバルナビゲーションは トップページ は index.html ショッピング は shopping.html ショッピングガイド は guide.html よくある質問 は qa.html 店舗情報 は shopinfo.html お問合せ は contact.html に それぞれリンク設定しなさい (3) デスクトップ上に 解答 2 と言う名前でフォルダを作成して フォルダ (content image) およびソースファイルを適切に構成 配置して保存しなさい 学習のポイント <a> タグにより グローバルナビゲータ部分のリンク (6 個 ) のボタン配置と設定の問題です (CSS ファイルは変更なし ) サブページの HTML ファイル用フォルダ (contents) と画像用フォルダ (images) があり サブページにもグローバルナビのボタン配置と設定を行う必要があります
Page 5/ 13 第 5 回実技実習作業 2 問題 2 解答作業手順 1.index.htmlファイルをエディタで開き ソースを確認する ( 特に gnavi 部分のイメージファイル リンク設定等を確認する ) 2. 解答 2 フォルダを作成する 3. 解答 2 フォルダ内に 次のフォルダとファイルをコピーする ( フォルダ内のファイルは フォルダと一緒にコピーする ) フォルダ : content contact.html guide.html qa.html shopinfo.html shopping.html image contact.jpg guide.jpg qa.jpg shopinfo.jpg shopping.jpg title_image.jpg toppage.jpg ファイル : index.html style.css 4.index.html ファイルの gnavi 部分のイメージファイル リンク設定等を修正する ( 具体的には <a> タグにて リンク設定を追加する ) 5.index.html ファイルの gnavi 部分を 次の HTML ファイルの gnavi 部分にコピーする ( グローバルナビゲーションなので 各ファイル共通で同じになる ) 6. 解答 2 フォルダ内の index.html をブラウザで開き 動作を確認する
Page 6/ 13 第 6 回実技実習作業 3 問題 3 次の (1)~(3) の実習作業を行いなさい (1) デスクトップ上の 実習問題 3 フォルダ内にある index.html を編集し 表示サンプルのように適切に表示されるよう 3 つのスタイルシート (style1.css style2.css style3.css) から適切ななものを選択して設定しなさい (2) 使用するブラウザが Internet Explorer の場合の表示サンプルは sample_view3_ie.jpg firefox の場合の表示サンプルは sample_view3_ff.jpg とする (3) デスクトップ上に 解答 3 と言う名前でフォルダを作成して フォルダ (image) およびソースファイルを適切に構成 配置して保存しなさい 学習のポイント 画面のハードコピーを参考に 指定されたレイアウト画面になるように 修正する問題です 具体的には 3 つのスタイルシートの内 1 つを選択し CSS ファイルのリンクを設定します 3 つのスタイルシートの内容を読み取ることが重要です
Page 7/ 13 第 6 回実技実習作業 3 問題 3 解答作業手順 1. sample_view3_ie.jpg sample_view3_ff.jpg を開く ( 作業前のindex.htmlファイルをブラウザで開き 見比べる ) 2.index.htmlファイルをエディタで開き ソースを確認する ( 特に styleシートのリンク設定部分を確認する ) 3. 解答 3 フォルダを作成し 解答 3 フォルダ内に 次のフォルダとファイルをコピーする フォルダ : image contact.jpg guide.jpg qa.jpg shopinfo.jpg shopping.jpg title_image.jpg toppage.jpg ファイル : index.html style1.css style2.css style3.css 本来は style シートをエディタで開いて読み取り 正しい CSS ファイルを設定するのが正攻法であろうが 画面で確認する方法をここでは説明する 4.index.html ファイルの style シートのリンク設定部分を順次変更する ( 具体的には <link rel="stylesheet"> タグにて href 設定に style1.css style2.css style3.css と順次記述する ) 5.index.html ファイルの style シートのリンク設定部分を修正後し ブラウザで開いて確認する 6. 正しい index.html を保存し 不要な CSS ファイルを削除する
Page 8/ 13 第 7 回実技実習作業 4 問題 4 次の (1)~(2) の実習作業を行いなさい (1) デスクトップ上の 実習問題 4 フォルダ内にある style.css を編集し content エリアの背景色を #666666 に 文字色を #00FF00 に設定しなさい (2) デスクトップ上に 解答 4 と言う名前でフォルダを作成して フォルダ (image) およびソースファイルを適切に構成 配置して保存しなさい 学習のポイント 指定されたレイアウトの内容に修正する問題です 具体的には CSS ファイル内の #content 部分の背景色と文字色を修正します スタイルシートの内容を熟知していることが重要です
Page 9/ 13 第 7 回実技実習作業 4 問題 4 解答作業手順 1. 解答 4 フォルダを作成する 2. 解答 4 フォルダ内に 次のフォルダとファイルをコピーする ( フォルダ内のファイルは フォルダと一緒にコピーする ) フォルダ : image contact.jpg guide.jpg qa.jpg shopinfo.jpg shopping.jpg title_image.jpg toppage.jpg ファイル : index.html style.css 3. エディタで style.css ファイルを開き content エリアの背景色を #666666 に変更する 4. 続けて content エリアの文字色を #00FF00 に変更し CSS ファイルを保存する 5. 解答 4 フォルダ内の index.html をブラウザで開き 変更箇所を確認する
Page 10/ 13 第 8 回実技実習作業 5 問題 5 次の (1)~(3) の実習作業を行いなさい (1) デスクトップ上の 実習問題 5 フォルダ内にある index.html が表示サンプルのように表示されるように bg_img フォルダ内の適切なイメージファイルを選択して スタイルシートを編集 設定しなさい (2) 使用するブラウザが Internet Explorer の場合の表示サンプルは sample_view5_ie.jpg firefox の場合の表示サンプルは sample_view5_ff.jpg とする (3) デスクトップ上に 解答 5 と言う名前でフォルダを作成して フォルダ (bg_img image) およびソースファイルを適切に構成 配置して保存しなさい 学習のポイント 指定されたレイアウト画面の内容に修正する問題です 具体的には CSS ファイル内の body 部分と wrap 部分にイメージファイルを設定します その際 指定されたフォルダ (bg_img) 内に用意されたイメージファイルの中から body 用と wrap 用に それぞれイメージファイル (jpg) を選択する必要があります 反映されるスタイルシートの内容を熟知していることが重要です
Page 11/ 13 第 8 回実技実習作業 5 問題 5 解答作業手順 1. 問題 5 フォルダ内のindex.htmlをブラウザで開き sample_view5_ie.jpg または sample_view5_ff.jpg と比較し 画面上の違いを確認 する 2. 問題 5 フォルダ内のindex.htmlをエディタで開き 修正箇所を特定する ( 結果 イメージを設定する箇所 bodyのbackground と divエリ ア #wrap のbackgroundを特定する ) 3. デスクトップ上に 解答 5 フォルダを作成し その中に 次のフォルダとファイルをコピーする ( フォルダ内のファイルは フォルダと一緒 にコピーする ) フォルダ : bg_img bg_image1.jpg bg_image2.jpg bg_image3.jpg bg_pat1.jpg bg_pat2.jpg bg_pat3.jpg image contact.jpg guide.jpg qa.jpg shopinfo.jpg shopping.jpg title_image.jpg toppage.jpg ファイル : index.html style.css 4. 解答 5 フォルダ内の style.css ファイルをエディタで開き body の background と #wrap エリアの background にイメージを設定する 5. 解答 5 フォルダ内の index.html をブラウザで開き sample_view5_ie.jpg または sample_view5_ff.jpg と比較 確認する ( 1 の画面で指定のイメージファイルが特定できれば 1 回の設定 確認 特定できなければ 順次イメージファイルを設定 確認する 4 と 5 を繰り返す ) 6. 解答 5 フォルダ内の bg_img フォルダ内にある 不要なイメージファイルを削除する
Page 12/ 13 第 9 回実技実習作業 6 問題 6 次の (1)~(3) の実習作業を行いなさい (1) デスクトップ上の 実習問題 6 フォルダ内にある index.html の content で指定されたエリアに content.txt ファイルの内容を配置しなさい (2) その際 イベント情報 更新情報 のタイトルは h2 要素とし イベント情報の内容は番号付きリスト 更新情報の内容はドット付きリストとして設定しなさい (3) デスクトップ上に 解答 6 と言う名前でフォルダを作成して フォルダ (image) およびソースファイルを適切に構成 配置して保存しなさい 学習のポイント 指定されたレイアウトの内容に HTML ファイルを修正する問題です 具体的には content エリア内に content.txt で指定された文字列を記述します その際に h2 要素のタイトル 番号付きリスト ドット付きリストの設定があります HTML 言語の要素等を熟知していることが重要です
Page 13/ 13 第 9 回実技実習作業 6 問題 6 解答作業手順 1. デスクトップ上に 解答 6 フォルダを作成する 2. 解答 6 フォルダ内に 次のフォルダとファイルをコピーする ( フォルダ内のファイルは フォルダと一緒にコピーする ) フォルダ : image contact.jpg guide.jpg qa.jpg shopinfo.jpg shopping.jpg title_image.jpg toppage.jpg ファイル : index.html style.css 3. 解答 6 フォルダ内の index.html ファイルと 問題 6 フォルダ内の contact.txt ファイルをエディタで開く 4.index.html ファイル内の content エリアに contact.txt ファイル内の内容をコピーする 5. 見出し要素 (<h2>) 番号付リスト (<ol>) ドット付リスト (<ul>) の設定を行う 6. 解答 6 フォルダ内の index.html をブラウザで開き 変更箇所を確認する