ウェブデザイン技能検定3級実技過去問解説

実技試験の内容の過去問は公開されているものの、

使用するデータは公開されていないため、

公開されている練習問題について解説する。

 

ウェブデザイン技能検定3級実技の練習問題

練習問題1

問題文

dataフォルダのQ1フォルダ内のindex.htmlでブラウザで正しく表示できない状態にあ る画像を、正常に表示できるようにソースを修正しなさい。 修正したindex.htmlファイルなどは、デスクトップのwdフォルダ内にa1という名前で フォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイル を構成に留意して保存しなさい。

HTMLソースの記述に誤りがあり、画像ファイルが表示されない状態になっている。

<body>

<h1>横浜の最新情報</h1>

<h2>春の横浜お勧め観光スポット</h2>

<img src=”img/img001.jpg” alt=”時計台の画像” class=“watch”>

 

解説

これはdataフォルダの名前が間違っているため正しく表示されていない。

img/img001.jpgの部分をimages/mg001.jpgに書き換えるのが正解。

用意されたデータのフォルダ名がわからないと解けない問題なのでここでは、

なんとなくこういう問題がでるということだけ覚えておいて欲しい。

 

練習問題2

問題文

dataフォルダのQ2フォルダ内のindex.htmlのh2要素の下部にある3つのテキストから各 ページへのリンクが正常に行われるようにしなさい。その際、HOMEはindex.htmlに、 ニュースはnews.htmlに、交通案内はaccess.htmlに、それぞれリンクを設定しなさい。 修正したindex.htmlファイルなどは、デスクトップのwdフォルダにa2という名前で フォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイル を構成に留意して保存しなさい。

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

<title>Q2</title>

<link href=”sample.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<h1>横浜の最新情報</h1>

<h2>春の横浜お勧め観光スポット</h2>

<p>HOME | ニュース | 交通案内</p>

<img src=”images/clock_tower.jpg” alt=”時計台の画像” class=“watch”>

<p>4月、横浜の春には恒例になった、大道芸イベントが開催されます。</p>

<p>野毛地区、伊勢佐木町、馬車道、みなとみらい地区では様々な大道芸人達の 妙技を見ることができます。</p>

</body>

</html>

 

解説

全く難しい問題ではない。

HOME、ニュース、交通案内のテキストにリンクを設定するだけである。

<p>HOME | ニュース | 交通案内</p>の部分を

<p><a href=”index.html”>HOME</a> | <a href=”news.html”>ニュース</a> | <a href=“access.html”>交通案内</a></p>に変更するだけである。

あえて注意点を付け加えるとすれば|の部分は

テキストで表示させることくらいだ。

 

練習問題3

問題文

dataフォルダのQ3フォルダ内のindex.htmlファイルの<div id=“navi”></div>内の ナビゲーションを削除して、imagesフォルダ内の最も適切と思われる画像を用い、画像ボタンによるナビゲーションエリアを作成しなさい。修正したindex.htmlファイルなどは、デスクトップのwdフォルダ内にa3という名前でフォルダを作成し、ウェブ ブラウザでの表示に必要なフォルダおよびソースファイルを構成に留意して保存しなさい。

 

解説

この問題も、データがないと解けない問題なので、

こういう問題がでるということだけ認識していればよい。

要するに適切なファイルフォーマットを選択できるかどうかという問題である。

 

練習問題4

dataフォルダのQ4フォルダ内のindex.htmlのbody要素にCSSを使用して、下記の条件の ように背景画像を適用しなさい。

●左側が暗い色、右側が明るい色のグラデーションになるものを使用する。

●ページの最上部に10pxのグラデーションが表示されるようにする。

●グラデーションは左から右へ、一回だけ設定する。

修正したindex.htmlなどのファイルは、デスクトップのwdフォルダ内にa4という名前 でフォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイ ルを構成に留意して保存しなさい。

 

解説

CSSファイルの背景画像指定で条件に合った画像を選択して指定するだけである。

こちらも用意されたデータが無ければ解けないので、

こういう問題がでるということだけ認識していればよい。

 

練習問題5

dataフォルダのQ6フォルダ内のsample.cssのファイルを編集して、h2要素に関連する 背景の色を#FFFFFF、文字を#000000に変更しなさい。指定以外の要素は特に変更する 必要はない。 修正したindex.htmlなどのファイルは、デスクトップのwdフォルダ内にa6という名前 でフォルダを作成し、ウェブブラウザでの表示に必要なフォルダおよびソースファイ ルを構成に留意して保存しなさい。

 

解説

非常に簡単な問題だ。

h2要素の背景色と文字色を変更するだけである。

 

出題傾向と対策

白紙の状態からHTMLソースを記述してHPが作成できるレベルなら全く

問題なくクリアできる。

出題傾向としては、

・画像ファイル指定が正しくできるか(絶対パスの理解)

・文章を構造化することができるか

・リンクの設定ができるか

・CSSを使ってテキストや画像のレイアウトができるか

・テキストや背景の色を変更できるか(CSSのプロパティと値の設定)

・フォルダを作成してデータを保存することができるか

というレベルである。

 

学科の内容を理解していれば難しい問題ではないが、

テキストエディタを使って、本番と同じような状態で

練習しておいた方がいいのは間違いない。

 

実技試験では、テキストエディタやOS、ブラウザも指定されているため、

同じ環境に慣れておいた方が良い。

OSはWindows7以降、テキストエディタは、メモ帳やワークパッドのほかに、

TeraPad、サクラエディタ、Sublime Textが指定されている。

ブラウザは、Microsoft Internet Explorer11以降、

Mozilla Firefox最新安定板、GoogleChrome最新安定板がインストールされており、

これらすべてで正しく作業内容が反映されているかを確認する必要があるため、

試験前の練習の段階で、この3種類のブラウザで

動作確認する癖をつけておいたほうがよい。

 

練習方法

今まで解説してきたコードを試しにメモ帳などのテキストエディタで

記述してみるといい。

 

例えばメモ帳で、

 

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

</head>

</html>

 

と、記述してみよう。

一行目はHTMLであることを示している。

二行目は日本語であることを意味し、

三行目でヘッドが始まることを指定し、

四行目で文字コードを指定している。

 

このままでは何も表示されないので、

文字コードの指定のあとに、

 

<title>これはテストです</title>

 

を追加してみよう。

 

すると、こうなる。

 

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

<title>これはテストです</title>

</head>

</html>

 

これをメモ帳で記述して保存してみよう。

 

保存する際は、拡張子を.html文字コードをUFT-8で保存する。

 

で、デスクトップに保存したHTMLファイルをブラウザで開くとこうなる。

ヘッド要素でタイトルを指定しただけなので、本文は白紙である。

タブのタイトルのみ表示されている。

ヘッド要素の下にボディ要素を追加することで

白紙の部分が表示されることになる。

<body>

<h1>タイトル1</h1>

<h2>タイトル2</h2>

</body>

をヘッド要素の下に追加してみよう。

 

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

<title>これはテストです</title>

</head>

<body>

<h1>タイトル1</h1>

<h2>タイトル2</h2>

</body>

</html>

 

これを実行するとこうなる。

 

このように、メモ帳でソースを記述し、ブラウザで開く練習をしておこう。

ちなみに、テキストデータを保存するときに、拡張子をhtmlにしていなかったり、

文字コードをUFT-8で保存していなかった場合は文字化けするので注意が必要だ。

 

次回は今まで解説してきた内容を復習しながら、

実際にページを作成していく。

 


 

このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です