ウェブデザイン実技試験動画

データダウンロード

以下からデータをダウンロードし、解凍してデスクトップに保存してください。

実技問題ダウンロード

問題

PDFが新しいタブで開きます。

問題PDF

準備作業

先ず初めに準備作業を行います。
「data3」フォルダを直接編集してしまうと、何かあった時に元に戻すことが難しくなりますので、最初にコピーを作成し、コピーしたデータを編集します。

1. デスクトップにある「data3」フォルダをコピーし、「wd3」フォルダに名前を変更します。
2. 「wd3」フォルダ内の「q1」～「q6」のフォルダ名を「a1」～「a6」に変更します。

問題①：フォルダを構成しパスを変更する

1問目は、ツリー構造図に従ってフォルダとファイルを構成し、ファイルを移動したことによって適用されなくなったCSSファイルと画像ファイルの「パス」を変更する問題です。

1. 確認のため、index.htmlをブラウザで表示しておきます。
2. ツリー構造図に従ってフォルダを作成し、ファイルを移動します。
3. 移動したCSSファイルを適用します。
   index.htmlをエディタで開き、<link>要素のパスを変更します。
4. 移動した画像ファイルを適用します。
   index.htmlをエディタで開き、<img>要素のパスを変更します。
5. 移動した背景画像と矢印アイコンを適用します。
   style.cssファイルをエディタで開き、background-imageのパスを変更します。
6. 最後に、index.htmlの表示を確認し、不要なファイルを削除します。

問題②：リンクの設定と文字編集

2問目は、リンクの設定を行い、main要素内のテキストを変更する問題です。

1. <div id=”global_navi”></div>で囲まれた部分を、4か所変更します。
   index.htmlをテキストエディタで開き、<a>要素を修正します。
   <a href=”#”>となっている部分をそれぞれのリンク先HTMLファイルに変更します。
2. <div id=”global_navi”> </div> をコピーします。
3. その他のHTMLファイル（3ファイル）を開き、 <div id=”global_navi”> </div> にペーストして書き換えます。
4. index.html以外のファイルの<title></title>で囲まれたテキストをコピーし、<main>要素内のA・B・Cの部分にペーストして書き換えます。
5. 最後に、それぞれリンクが上手く機能しているかどうか、ブラウザで確認します。

問題③：<wrap>要素の中央寄せ

3問目は、ページ左に寄っている<wrap>要素を、ページの中央に表示する問題です。

1. index.htmlをブラウザで表示して表示を確認します。
2. style.cssファイルをエディタで開き、wrapの最後に中央寄せスタイル「margin: 0 auto;」を追加します。
3. リロードして中央寄せを確認します。

問題④：<h1>要素の背景色と文字色変更

4問目は、<h1>要素の背景色と文字色を変更する問題です。

1. index.htmlをブラウザで表示して表示を確認します。
2. style.cssファイルをエディタで開き、h1の最後に背景色「background-color: #003300;」と文字色「color: #ffffff;」を追加します。
3. リロードして色が変わったのを確認します。

問題⑤：背景画像の選択と適用

5問目は、画像の指示に従って、背景画像を選択・適用する問題です。
同じ表示結果になる画像がある場合、よりサイズの小さな方を選ぶのがポイントです。

1. サンプル画像ファイルを表示して確認します。
2. imgフォルダを開き、ページ全体（body）の背景画像（b1.gif）を確認します。
3. style.cssファイルをエディタで開き、「image」で検索します。
4. 検索して表示された「background-image: url(…)」の行をコピーし、bodyの最後にペーストします。
5. url()内のパスを変更します。
6. 同様に、wrap内に表示されている画像を確認、wrapの最後に追加します。
7. index.htmlをブラウザで表示し、画像と同じ表示になっているか確認します。
8. 最後に、 不要なファイルを全て削除します。

問題⑥：ページの更新とマークアップ

6問目は、テキストファイルから内容をコピー、ページにペーストし、マークアップを行う問題です。

1. sample.txtファイルをエディタで開き、全体をコピーします。
2. index.htmlファイルをブラウザで表示して確認します。
3. index.htmlファイルをエディタで開き、<div id=”main_content”></div>内を全選択し、ペーストして書き換えます。
4. <h1><h2><p><ol><ul>の全ての要素を使ってマークアップします。
5. index.htmlをブラウザで表示し、きちんと表示されているか確認します。
   ※表示がおかしい場合、余計なスペースが入っていないか、終了タグを忘れていないかチェックします。

最後に：回答は5問だけです！

6問中5問のみデータを残してください。
苦手な1問を飛ばしても構いませんし、全部回答してから自信の無いものを削除しても構いません。

何度か実際に作業してみると、決して難しいものではありません。
毎年出題される問題も決まっていますので、全員合格目指して頑張りましょう！