ウェブデザイン3級実技対策

シェアする

スポンサーリンク

必勝!ウェブデザイン技能検定3級実技試験解き方例

(27年度第1回問題を例にしますが、データは過去ものを使用します)

ポイント

  • 6問のうち5問のみを解答して提出する(6問提出すると減点されます)
  • 提出するフォルダ名は必ず正確に
  • 時間は余裕があるので焦らずに確実に。

問題データはデスクトップ上のdata3フォルダ内のq1~q6フォルダにあります。解答は「wd3フォルダ」の中に問題1なら「a1」フォルダを作成してそのフォルダ内に保存するよう指示されています。

もし途中で致命的なミスに気付いたときに元データがないとやり直しがききません。おすすめする方法は、問題のdata3フォルダをコピペし、フォルダ名を「wd3」に変更します。その中のq1~q6フォルダの名前をa1~a6に変更しておきます。もしやり直したい場合は、随時data3フォルダからコピーします。

toi1_01  toi1_02toi1_03toi1_04

提出するのは5問なので、最終的には提出しないフォルダは削除します。

問題1

fs.jpg(ディレクトリ構成の画像)に従ってindex.html、CSSファイル、画像等のソースファイルとディレクトリ構成を正しく訂正して完成させ、cssファイルと画像が適用されるようにhtmlとcssファイルを編集する。

最初にブラウザでindex.htmlを確認しましょう。(確認は大事!)

fs

q1フォルダの中にはファイルがバラバラに入っているので、fs.jpgを見ながらディレクトリ構成を訂正する。画像を入れるフォルダは自分で作成する。
出来たらブラウザで確認すると・・おそらくパスが正しくないのでまだ未完成の表示のはず。index.htmlとstyle.cssの相対パスを修正します。

toi1_08

まずindex.html。

<link href="style.css" rel="stylesheet" type="text/css">

相対パスに書き換える

<link href="style/style.css" rel="stylesheet" type="text/css">

画像のパスも・・・


<div id="wrap">

<div id="header"><img name="site_id" src="top_img.jpg" width="700" height="90" alt="タイトル画像"></div>


<div id="wrap">

<div id="header"><img name="site_id" src="image/top_img.jpg" width="700" height="90" alt="タイトル画像"></div>

これでスタイルシートへのリンクと、トップ画像の表示が完了します。

次にstyle.cssの画像への相対パスを修正していきます。

background-image: url(bg2.gif);

style.cssファイルからのパスなので、../image/を加えます。

background-image: url(../image/bg2.gif);

toi1_07上書き保存したら、必ずブラウザで確認します。
表示が大丈夫ならば、最後にこのページには必要のないfs.jpg(ディレクトリ図のファイル)を削除するのを忘れないようにします。これで完成です。

問題2

4ページのリンクの記述と、各ページの見出しの内容の書き換えです。
コピーしておいたa2フォルダ内のファイルを確認すると、リンク部分の記述は”#”(ヌルリンク)になっています。


<div id="global_navi">
<a href="#"><img src="img/gl_bt_home.gif" alt="HOME"></a><a href="#"><img src="img/gl_bt_info.gif" alt="協会情報"></a><a href="#"><img src="img/gl_bt_skilltest.gif" alt="ウェブデザイン技能検定"></a><a href="#"><img src="img/gl_bt_form.gif" alt="問い合わせ"></a><a href="#"><img src="img/gl_bt_app.gif" alt="受検申請"></a><a href="#"><img src="img/gl_bt_links.gif" alt="リンク"></a><a href="#"><img src="img/gl_bt_sitemap.gif" alt="サイトマップ"></a>
</div>

まず、index.htmlの修正をします。今回はhtmlファイルはすべて同階層にあるので、ファイル名のみになります。指示通りのリンク先を記述します。


<div id="global_navi">
<a href="index.html"><img src="img/gl_bt_home.gif" alt="HOME"></a><a href="info.html"><img src="img/gl_bt_info.gif" alt="協会情報"></a><a href="skilltest.html"><img src="img/gl_bt_skilltest.gif" alt="ウェブデザイン技能検定"></a><a href="form.html"><img src="img/gl_bt_form.gif" alt="問い合わせ"></a><a href="#"><img src="img/gl_bt_app.gif" alt="受検申請"></a><a href="#"><img src="img/gl_bt_links.gif" alt="リンク"></a><a href="#"><img src="img/gl_bt_sitemap.gif" alt="サイトマップ"></a>
</div>

他のページはindex.htmlからコピーします。
そして、見出し1の部分をページタイトルと同じにします。
例:info.html


<h1>A</h1>

Aの部分をtitle要素からコピペします。


<h1>協会情報</h1>

同様にskilltesut.htmlとform.htmlの見出し要素を書き換えます。
4ページとも修正して上書き保存したら、ブラウザでリンクが正しく動作するか、見出し1が各ページごとに正しくなっているかを確認します。

問題の指示は「グローバルナビゲーションの各画像に」とあるので、サイドナビゲーションはそのままにしておいて大丈夫です。この問題に関しては削除するファイルはありません。

問題3

問題3に関しては、26年度あたりから出題傾向が変わりました。FOM過去問題集に出ているのは適切なスタイルシートファイルを選択するパターンでしたが、最近はサイドバーとメインコンテンツの位置を入れ替えるというようなCSSの記述を編集する問題になっています。26年度第4回ではコンテンツを中央に配置するように、という問題です。

実はデータがありませんので明確に解き方例を書くことができません。コンテンツの入れ替えはおそらくfloatを使うことで解答できると思います。コンテンツを中央に配置は左右のmarginをautoにすることで解答できるはず。

自信がない場合は問題3はスルーして、あとの問題をしっかり解答して提出します。

問題4

h1要素のスタイルの記述(背景色と文字色)の問題です。
h1要素のスタイルはすでにあるので、style.cssのh1{}に指示された内容を加えていきます。なお、文字色の記述はあるので、カラーコードの部分のみ書き換えていきます。

h1{background-color:#ff6600;color:#ffffff;}

スタイルシートを上書き保存してブラウザで確認します。

問題5

img.jpg での表示結果と同じとなるように背景画像を適用する問題です。表示結果を確認したら、imgフォルダから適切な画像ファイルを探します。

toi1_14

toi1_15

body {
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	background-image:url(img/bg2.gif);
}

上書き保存したら、ブラウザで確認します。もし、似たような画像がある場合は、ファイル容量の軽いほうを選択します。
最後に必要のないファイルを削除します。img.jpgとimgフォルダ内の使わない画像を削除しておきます。

問題6

「main_content」内の内容を置き換えて正しく構造化をして記述する問題です。

「main_content」内の既存の内容を削除します。
テキストファイルを一気にコピペする場合、全角スペースが入る可能性があるのでマークアップする時に注意しながら作業します。よけいなスペースは削除しましょう。文脈から適切に要素を選択します。
最後にブラウザで確認し、不要なテキストファイルは削除しておきます。

toi1_16

テキストエディタに貼り付けた状態

<h1>新着情報</h1>
<h2>平成25年度ウェブデザイン技能検定試験要項について</h2>
<p>ウェブデザイン技能検定 各級試験要項を公開しました。詳しくは下記よりご参照ください。</p>
<ul>
<li>1級試験要項</li>
<li>2級試験要項</li>
<li>3級試験要項</li>
</ul>
<h2>平成25年度試験について</h2>
<p>平成25年度試験は全4回実施されます。詳しくは下記よりご参照ください。</p>
<ol>
<li>第1回  5月26日</li>
<li>第2回  9月 1日</li>
<li>第3回 11月24日</li>
<li>第4回  2月23日</li>
</ol>

時間はかなり余ると思われるので、焦ってやらずにていねいに確認しながら1問ずつこなしていきましょう。本番までに何回か練習しておくと自信を持ってのぞむことができます。

なお、公式サイトでは問題文は公開されますが、問題のデータは配布されていないので、FOMの過去問題集を購入するとCD-ROMにデータが入っています。
また、公式サイトの練習問題を閲覧する場合は下記URLにアクセスしてください。

http://www.webdesign.gr.jp/kentei/measures.html#rensyu

ウェブデザイン3級過去問題28年度第2回
2択問題 1 ウェブサイトを構築する際、スマートフォン向けウェブサイトとパソコンからアクセスするウェブサイトは、同じ内容であっても、必ず別...
ウェブデザイン3級過去問題28年度第1回
2択問題 1 HTML5では、タグの省略は一切認められていない。 2 インターネット上のすべてのコンピュータは、イーサネットで繋がってい...
ウェブデザイン3級過去問題27年度第4回
2択問題 1 HTML5では、a要素の要素内容としてh1要素を配置することができる。 2 URL中のパスにおいて、ファイル名を指定せずに...
ウェブデザイン3級過去問題27年度第3回
2択問題 1 次の画像はW3Cのサイトからダウンロードして使用可能なHTML5のロゴである。 2 一般的なウェブブラウザで問題なく表...
ウェブデザイン3級過去問題27年度第2回
2択問題 1 アニメーションなどの動画の再生において、「フレームレート30fps」とは1秒間に30回画像が描きかえられることをいう。 2...
ウェブデザイン過去問題3級27年第1回
【2016年8月8日追記】問題と詳しい解説(問題を追記しました) 2択問題 1 HTML5の仕様は、W3Cによって既に勧告として公開...
スポンサーリンク

シェアする

フォローする