令和3年度第4回実技試験 過去問解説 第1問

ここでは、2022年2月20日に実施された、令和3年度第4回ウェブデザイン技能検定 3級実技試験の1問目について回答と解説を行っていきたいと思います。

事前準備
1. 作業1を開始する前に！！
作業1　問題
作業1　回答・解説

事前準備

作業1～6 の中から5 問を選択し、各設問の文章に従い作業を行うこと。
作業で利用する素材は、デスクトップ上のdata3フォルダのものを使用すること。
また、各設問の指示に従い、デスクトップ上のwd3フォルダにフォルダ、ソースファイルなどを配置し提出すること。wd3 フォルダが作成されていない場合は受検者が作成すること。
すべての課題提出データは検定指定ウェブブラウザで正しく表示されること。

上記の通り、6問中5問を回答する形となります。
私の受けた2023年2月19日の試験では、wd3フォルダの後ろに「wd3_22432000●●●」といった受験番号を追加して作成するよう指示があり、試験前の説明の段階でwd3フォルダの作成が可能でした。

作業1を開始する前に！！

試験が始まったら、早速作業1に取りかかりたいところですが、その前に、課題フォルダ（data3フォルダ）の中のフォルダ「q1～q6」をコピーして、先ほど作ったwd3フォルダに貼り付け、それぞれのフォルダ名を「a1～a6」に変更しておきましょう！！

私はこの時点で作業5は回答しないつもりでしたので、q5フォルダはコピーせず、a5フォルダを作成しませんでしたが、全部の課題をやってみてから、自信の無い回答になったaフォルダを削除するほうが一般的かと思います。。

作業1　問題

作業1に求められるスキルは、指示されるディレクトリ構造を示す図に従い、HTMLファイル、CSSファイル、および画像などのソースファイルを適切に配置すること。またその構造に適応するよう、各ファイルの記述内容を修正し、更新することとなります。

作業1：次の(1)～(2)の作業を行いなさい。

(1) デスクトップ上のdata3 フォルダのq1 フォルダ内にある fs.jpgに従い、index.html、CSSファイル、画像等のソースファイルおよびディレクトリ構成を適切に訂正し完成させなさい。その際、必要に応じフォルダ等は作成し、CSSファイル、画像等が正しく適用されるよう、index.htmlおよびCSSファイルを編集すること。

(2) デスクトップ上のwd3 フォルダ内にa1 という名前でフォルダを作成し、フォルダおよびソースファイルを構成に留意して保存しなさい。

作業1　回答・解説

それではいよいよ第１問目に取り掛かりましょう！！
作業1はフォルダへの画像データ移動、htmlファイルとCSSファイルの両方のパスの変更が必要になるので、他の作業よりも少しボリュームがありますが、慣れてしまえば簡単です！！

a1フォルダを開くと上記のように8個のファイルが保存されています。
問題文の通り、fs.jpgを開くとフォルダ構成が確認できるので、その通りにファイルデータを移動していきます。

とりあえずindex.htmlを確認してみると、、style.cssや各種画像が適用された完成形を見ることができますので、全体像を把握しておきましょう。

fs.jpgは下図の内容になっています。

この階層図を見ながら、a1フォルダにcssフォルダを作成して、そこにstyle.cssを移動させます。
次にimgフォルダを作成して、そこに各種.jpg,.pngファイルを移動させていきます。

上図のようにフォルダに収まったら、fs.jpgは不要になるので削除しておきましょう。
おそらく回答データ以外のファイルを残したままにしていると減点の対象になるんじゃないかと思いますので。。

もう一度index.htmlを開いてみると・・・

こんな感じで、cssも画像も適用されていない崩れたページになってしまっています。

まずは、index.htmlをTeraPadで開きます。

ダブルクリックだとEdgeで開いてしまうので、index.htmlをTeraPadにドラッグして開きます。
ちなみに試験用パソコンにはTeraPadの他にもサクラエディタ、SublimeTextがインストールされているので、好きなものを使用すれば良いのですが、私は普段からTeraPadを使用しているので、こちらのソフトで作業していきます。

TeraPadはメモ帳などと違って、HTMLコードが色分けされて表示されたり、行番号が表示されたりと何かと便利で超おすすめのフリーソフトです！！

コードを見ながら、パスの変更が必要な箇所を修正していきます。
6行目のhref=”style.css”をhref=”css/style.css”に修正します。

12行目のimg src=”logo.png” alt=”国家検定ウェブデザイン技能検定”をimg src=”img/logo.png” alt=”国家検定ウェブデザイン技能検定”に修正します。

最後に29行目のimg src=”main_image.jpg”をimg src=”img/main_image.jpg”に修正して上書き保存しましょう。

保存後、index.htmlをEdgeで開いてみると、下図のような感じで完成に近づいてきましたが、まだ背景の柄画像などが適用されていないので、次はstyle.cssを修正していきます。

CSSファイルもTeraPadにドラッグして、TeraPadで修正していきましょう！！

開くとこんな感じです。

10行目のbackground-image: url(bg.png);をbackground-image: url(../img/bg.png);に修正します。style.cssはindex.htmlとは違い、フォルダ直下ではなくCSSフォルダに保存されているため、一つ上の階層のフォルダに移動してから、imgフォルダにたどり着く必要があるため、「../」を追加する必要があることを忘れないようにして下さい。