サンプル問題解説

9-2
サンプル問題解説
サンプル問題に対して、どのように取り組むべきか、そのワークフローと注意すべきポイントに
ついて解説します。赤の枠内の文字が問題文です。
Web クリエイター能力認定試験エキスパート実技サンプル問題
基本ページの作成
(1) 基本ページの XHTML の編集
「base.html」に、以下の設定を行い、保存しなさい。
① title 要素を挿入し、テキスト「Okayama Walk」を入力する。
「base.html」ファイルアイコンを右クリックして、
［プログラムから開く］→［Notepad］をクリック
② 「css」フォルダー内の「style.css」にリンクを設定する。
して、
「メモ帳」
で開きます。メモ帳は右クリックメニューでは「Notepad」と表示されます。
③ コンテンツ領域の設定（ワイヤーフレームを参照）
・div 要素を挿入し、id 属性を「wrapper」に設定する。
④ ヘッダー領域の設定（ワイヤーフレームを参照）
・コンテンツ領域に div 要素を挿入し、id 属性を「header」に設定する。
この div 要素内に、以下の要素を挿入すること。
・テキスト「Okayama Walk」を入力し、p 要素でマークアップする。
・このテキストに、「index.html」へのリンクを設定する。
リンクの id 属性を、「logo」に設定すること。
Web クリエイター能力認定試験エキスパート実技サンプル問題
・テキスト「岡山の魅力」、「観光イベント」、「オススメ
Walk」を入力し、箇条書きリ
基本ページの作成
スト（ul 要素、li 要素）でマークアップする。
これらのテキストに、リンクと、それを内包する li 要素の id 属性を設定する。
(1) 基本ページの XHTML の編集
メモ帳で「base.html
」を編集していきます。リンク先
テキスト
li 要素の id
「base.html」に、以下の設定を行い、保存しなさい。
岡山の魅力
about.html
nav1
観光イベント
event.html Walk」を入力する。
nav2
① title
要素を挿入し、テキスト「Okayama
オススメ Walk
list.html
nav3
② 「css」フォルダー内の「style.css」にリンクを設定する。
⑤ メイン領域、サブ領域の設定（ワイヤーフレームを参照）
③ コンテンツ領域の設定（ワイヤーフレームを参照）
・ヘッダー領域の終了後に
2 つの div 要素を挿入する。
<!DOCTYPE
html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://
・div
要素を挿入し、id
これらの
div 要素の id属性を「wrapper」に設定する。
属性を、「main」、「sub」に設定すること。
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ヘッダー領域の設定（ワイヤーフレームを参照） xml:lang="ja" lang="ja">
<html④・サブ領域に、素材「ソース素材.txt」のソースをコピー＆ペーストする。
xmlns="http://www.w3.org/1999/xhtml"
<head>
・コンテンツ領域に
div 要素を挿入し、id
属性を「header」に設定する。
⑥
フッター領域の設定
（ワイヤーフレームを参照）
この div 要素内に、以下の要素を挿入すること。
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
・メイン領域、サブ領域の終了後に
div 要素を挿入し、id
属性を「footer」に設定する。
<meta ・テキスト「Okayama
http-equiv="Content-Style-Type"
content="text/css"
/>
Walk」を入力し、p 要素でマークアップする。
この div 要素内に、以下の要素を挿入すること。
<title>Okayama Walk</title>
・素材「テキスト素材.txt」のテキスト「Copyright
2011type="text/css"
Okayama Walk All rights
<link ・このテキストに、「index.html」へのリンクを設定する。
href="css/style.css" rel="stylesheet"
/>
リンクの
id 属性を、「logo」に設定すること。
reserved.」をコピー＆ペーストし、p
要素でマークアップする。
</head>
・テキスト「岡山の魅力」、「観光イベント」、「オススメ Walk」を入力し、箇条書きリ
スト（ul 要素、li 要素）でマークアップする。
これらのテキストに、リンクと、それを内包する li 要素の id 属性を設定する。
252
テキスト
岡山の魅力
リンク先
about.html
li 要素の id
nav1
① title 要素を挿入し、テキスト「Okayama Walk」を入力する。
Web クリエイター能力認定試験
エキスパート実技サンプル問題
② 「css」フォルダー内の「style.css」にリンクを設定する。
③ コンテンツ領域の設定（ワイヤーフレームを参照）
基本ページの作成
・div 要素を挿入し、id 属性を「wrapper」に設定する。
(1)④基本ページの
XHTML の編集
ヘッダー領域の設定
（ワイヤーフレームを参照）
「base.html
」
の
要素内に次のようにマークアップします。
body
「base.html」に、以下の設定を行い、保存しなさい。
・コンテンツ領域に div 要素を挿入し、id 属性を「header」に設定する。
この div
要素内に、以下の要素を挿入すること。
① title
要素を挿入し、テキスト「Okayama
Walk」を入力する。
<body>
<div ②
id="wrapper">
・テキスト「Okayama
Walk」を入力し、p 要素でマークアップする。
「css」フォルダー内の「style.css」にリンクを設定する。
</div>
・このテキストに、「index.html」へのリンクを設定する。
③
コンテンツ領域の設定（ワイヤーフレームを参照）
</body>リンクの id 属性を、「logo」に設定すること。
・div 要素を挿入し、id 属性を「wrapper」に設定する。
・テキスト「岡山の魅力」、「観光イベント」、「オススメ Walk」を入力し、箇条書きリ
④ ヘッダー領域の設定
（ワイヤーフレームを参照）
スト（ul 要素、li 要素）でマークアップする。
これらのテキストに、リンクと、それを内包する
li 要素の id 属性を設定する。
・コンテンツ領域に
div 要素を挿入し、id 属性を「header」に設定する。
この div 要素内に、以下の要素を挿入すること。
テキスト
リンク先
li 要素の id
岡山の魅力
about.html
nav1
・テキスト「Okayama Walk」を入力し、p 要素でマークアップする。
観光イベント
event.html
nav2
オススメ Walk
list.html
nav3
・このテキストに、「index.html」へのリンクを設定する。
リンクの id 属性を、「logo」に設定すること。
⑤ メイン領域、サブ領域の設定（ワイヤーフレームを参照）
・テキスト「岡山の魅力」、「観光イベント」、「オススメ Walk」を入力し、箇条書きリ
・ヘッダー領域の終了後に 2 つの div 要素を挿入する。
スト（ul 要素、li 要素）でマークアップする。
これらの div 要素の id 属性を、「main」、「sub」に設定すること。
これらのテキストに、リンクと、それを内包する li 要素の id 属性を設定する。
・サブ領域に、素材「ソース素材.txt」のソースをコピー＆ペーストする。
テキスト
リンク先
li 要素の id
岡山の魅力
about.html
nav1
⑥ フッター領域の設定（ワイヤーフレームを参照）
観光イベント
event.html
nav2
・メイン領域、サブ領域の終了後に
div 要素を挿入し、id 属性を「footer」に設定する。
オススメ Walk
list.html
nav3
この div 要素内に、以下の要素を挿入すること。
⑤ メイン領域、サブ領域の設定（ワイヤーフレームを参照）
「base.html
」の <div id="wrapper"> から </div> 内に次のようにマークアップします。
・素材「テキスト素材.txt」のテキスト「Copyright
2011 Okayama Walk All rights
・ヘッダー領域の終了後に
2 つの div 要素を挿入する。
reserved.」をコピー＆ペーストし、p
要素でマークアップする。
<body> これらの div 要素の id 属性を、「main」、「sub」に設定すること。
<div id="wrapper">
・サブ領域に、素材「ソース素材.txt」のソースをコピー＆ペーストする。
<div id="header">
⑥ フッター領域の設定（ワイヤーフレームを参照）
<p><a href="index.html" id="logo">Okayama Walk</a></p>
・メイン領域、サブ領域の終了後に div 要素を挿入し、id 属性を「footer」に設定する。
<ul>
この div
要素内に、以下の要素を挿入すること。
<li
id="nav1"><a
href="about.html"> 岡山の魅力 </a></li>
観光イベント
<li
id="nav2"><a
href="event.html"> 2011
・素材「テキスト素材.txt」のテキスト「Copyright
Okayama</a></li>
Walk All rights
オススメ Walk</a></li>
reserved.」をコピー＆ペーストし、p
要素でマークアップする。
<li
id="nav3"><a href="list.html">
</ul>
</div>
</div>
</body>
－ 3 －
</html>
－ 3 －
9
253
テキスト
リンク先
li 要素の id
岡山の魅力
about.html
nav1
・テキスト「Okayama Walk」を入力し、p 要素でマークアップする。
観光イベント
event.html
nav2
・このテキストに、「index.html」へのリンクを設定する。
オススメ Walk
list.html
nav3
Web クリエイター能力認定試験
エキスパート実技サンプル問題
リンクの id 属性を、「logo」に設定すること。
⑤ メイン領域、サブ領域の設定（ワイヤーフレームを参照）
・テキスト「岡山の魅力」、「観光イベント」、「オススメ Walk」を入力し、箇条書きリ
基本ページの作成 2 つの div 要素を挿入する。
・ヘッダー領域の終了後に
スト（ul 要素、li 要素）でマークアップする。
これらの
div 要素の id 属性を、「main」、「sub」に設定すること。
これらのテキストに、リンクと、それを内包する
li 要素の id 属性を設定する。
(1) ・サブ領域に、素材「ソース素材.txt」のソースをコピー＆ペーストする。
基本ページの
XHTML
の編集
テキスト
リンク先
li 要素の id
「base.html
」に記述した </ul></div> に続けて、次のようにマークアップします。
「base.html」に、以下の設定を行い、保存しなさい。
岡山の魅力
about.html
nav1
⑥ フッター領域の設定（ワイヤーフレームを参照）
観光イベント
event.html
nav2
title 要素を挿入し、テキスト「Okayama Walk」を入力する。
<div ①
id="main">
オススメ Walk
list.html
nav3
・メイン領域、サブ領域の終了後に
div 要素を挿入し、id 属性を「footer」に設定する。
</div>
この div 要素内に、以下の要素を挿入すること。
② 「css」フォルダー内の「style.css」にリンクを設定する。
メイン領域、サブ領域の設定（ワイヤーフレームを参照）
<div ⑤
id="sub">
・素材「テキスト素材.txt」のテキスト「Copyright
2011 Okayama Walk All rights
③
コンテンツ領域の設定（ワイヤーフレームを参照）
</div>・ヘッダー領域の終了後に
2 つの div 要素を挿入する。
reserved.」をコピー＆ペーストし、p 要素でマークアップする。
これらの
div 要素の id属性を「wrapper」に設定する。
属性を、「main」、「sub」に設定すること。
・div
要素を挿入し、id
・サブ領域に、素材「ソース素材.txt」のソースをコピー＆ペーストする。
④
ヘッダー領域の設定（ワイヤーフレームを参照）
⑥・コンテンツ領域に
フッター領域の設定
div （ワイヤーフレームを参照）
要素を挿入し、id 属性を「header」に設定する。
」の <sub>
に続けて、
「ソース素材 .txt」からコピー & ペーストします。
「base.html
この div
要素内に、以下の要素を挿入すること。
・メイン領域、サブ領域の終了後に div 要素を挿入し、id 属性を「footer」に設定する。
この div 要素内に、以下の要素を挿入すること。
・テキスト「Okayama
Walk」を入力し、p 要素でマークアップする。
<div id="sub">
<div
id="news">
・素材「テキスト素材.txt」のテキスト「Copyright
2011 Okayama Walk All rights
・このテキストに、「index.html」へのリンクを設定する。
reserved.」をコピー＆ペーストし、p
要素でマークアップする。
<h3> 新着情報
リンクの </h3>
id 属性を、「logo」に設定すること。
<h4> 幻想庭園は 8 月末まで </h4>
・テキスト「岡山の魅力」、「観光イベント」、「オススメ Walk」を入力し、箇条書きリ
「幻想庭園」は 8 月15 日までの計 18 日間。ろうそく等で幻想的
<p> 岡山後楽園の夜間特別開園
スト（ul 要素、li 要素）でマークアップする。
に彩られた景色を、ぜひ、お楽しみください。
</p> li 要素の id 属性を設定する。
これらのテキストに、リンクと、それを内包する
<h4> おかやま桃太郎まつり </h4>
テキスト
リンク先
li 要素の id
－
3 －
が踊り一色になる夏恒例
のお祭りです。商店街でのうらじゃパレードや
市内各所
<p> 岡山市内
岡山の魅力
about.html
nav1
での定置演舞、
うらじゃ総おどりなど
市内各所でおどりが開催されます
観光イベント
event.html
nav2 。納涼花火大会も見物。
list.html
nav3
</p> オススメ Walk
</div>
⑤ メイン領域、サブ領域の設定（ワイヤーフレームを参照）
<p><a href="mag.html" id="mm"> メールマガジン登録 </a></p>
2 つの。
div</p>
要素を挿入する。
最新情報をメールでお届けします
<p>・ヘッダー領域の終了後に
これらの div 要素の id 属性を、「main」、「sub」に設定すること。
</div>
・サブ領域に、素材「ソース素材.txt」のソースをコピー＆ペーストする。
－ 3 －
⑥ フッター領域の設定（ワイヤーフレームを参照）
・メイン領域、サブ領域の終了後に div 要素を挿入し、id 属性を「footer」に設定する。
この div 要素内に、以下の要素を挿入すること。
・素材「テキスト素材.txt」のテキスト「Copyright 2011 Okayama Walk All rights
reserved.」をコピー＆ペーストし、p 要素でマークアップする。
「base.html」の </div></body> の直前に次のようにマークアップします。
<div id="footer">
<p>Copyright 2011 Okayama Walk All rights reserved.</p>
</div>
254
－ 3 －

Download Report