Webクリエイター能力認定試験 スタンダード(HTML5)
実技問題操作練習

Webサイトの概要・仕様

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

テーマ

  • 実技問題操作練習のWebサイトである。
  • このページは操作練習です。ここには、トップページの概要が掲載されます。
  • このページは操作練習です。ここには、一つ目の下層ページの概要が掲載されます。
  • このページは操作練習です。ここには、二つ目の下層ページの概要が掲載されます。
  • このページは操作練習です。ここには、三つ目の下層ページの概要が掲載されます。

ページ構成

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

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

  • 「site」フォルダー内に必要なファイルを作成・修正し、Webサイトを完成させること。
  • 問題で使用する画像ファイルは、「images」フォルダー内のファイルを使用すること。
  • 問題で使用するCSSファイルは、「css」フォルダー内のファイルを使用すること。
  • 「material」フォルダーには、「start_rensyu.html」に関連するファイルが格納されている。関連するファイルの閲覧は「start_rensyu.html」からWebブラウザーで開き、確認すること。
  • 「実技用」フォルダー
    • start_rensyu.html
    • 「material」フォルダー
    • 「site」フォルダー
      • index.html
      • ○○○.html ★新規作成
      • ○○○.html ★新規作成
      • ○○○.html ★新規作成
      • 「css」フォルダー
        • common.css
        • style.css
      • 「images」フォルダー
        • ○○○.png
        • ○○○.gif
        • ○○○.jpg

仕様

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

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

問題1 トップページと基本レイアウトの作成

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

トップページのHTMLの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示

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

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

変更するセレクター
セレクター名を表示

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター セレクター名を表示
プロパティ プロパティ値を表示

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

問題2 各ページのフォーマットの複製

仕上り見本を参考にフォーマットを作成しなさい。

ページのフォーマットの複製

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

「index.html」を複製し、「○○○.html」として保存する。

フォーマットのHTMLの編集

「○○○.html」に、以下の設定を行い、保存しなさい。

このページは操作練習です。本試験ではここに、問題文が表示されます。

このページは操作練習です。本試験ではここに、問題文が表示されます。

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

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター セレクター名を表示
プロパティ プロパティ値を表示

フォーマットを使用した各ページの複製

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

「○○○.html」を複製し、「○○○.html」、「○○○.html」として保存する。

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

問題3 一つ目の下層ページの作成

仕上り見本を参考に一つ目の下層ページを作成しなさい。

一つ目の下層ページのメイン領域のHTMLの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

このページは操作練習です。本試験ではここに、問題文が表示されます。

一つ目の下層ページのCSSの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター セレクター名を表示
プロパティ プロパティ値を表示

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

問題4 二つ目の下層ページの作成

仕上り見本を参考に二つ目の下層ページを作成しなさい。

二つ目の下層ページのタイトルに関連するHTMLの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示
テキスト
テキストを表示

二つ目の下層ページのメイン領域のHTMLの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

ソース
ソースを表示

このページは操作練習です。本試験ではここに、問題文が表示されます。

二つ目の下層ページのCSSの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター セレクター名を表示
プロパティ プロパティ値を表示

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター セレクター名を表示
プロパティ プロパティ値を表示

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

問題5 三つ目の下層ページの作成

仕上り見本を参考に三つ目の下層ページを作成しなさい。

三つ目の下層ページのタイトルに関連するHTMLの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示
テキスト
テキストを表示

三つ目の下層ページのメイン領域のHTMLの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

テキスト
テキストを表示

このページは操作練習です。本試験ではここに、問題文が表示されます。

三つ目の下層ページのCSSの編集

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

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター セレクター名を表示
プロパティ プロパティ値を表示

このページは操作練習です。本試験ではここに、問題文が表示されます。

セレクター セレクター名を表示
プロパティ プロパティ値を表示

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