(cache) 試験問題サンプル - 合格に向けて | 実践HTMLコーディング検定（コー検）

【ガイドライン】: 書式/ディレクトリ構成/命名規則/対象ブラウザなど、当検定におけるコーディング規定をまとめたドキュメント（PDF形式）です。
【スターターテンプレート】: ディレクトリ構成やHTMLにおける基本的な段組みが、ガイドラインに準拠した形式であらかじめセットされたテンプレートセットです。通常はこのテンプレートをもとにコーディングを行います。
【エディタ】: HTMLやCSSのコーディングに使用します。当検定ではAdobe Dreamweaverを推奨しています。
【対象ブラウザ】: コーディングしたHTMLファイルの表示確認に使用します。具体的な対象ブラウザは制作ガイドラインを参照してください。
【ファイル解凍/圧縮ソフト】: 素材の解凍と作業の完了報告時に使用します。Zip形式の解凍/圧縮が可能なソフトをインストールしてください。
【試験問題】: 各検定の入金確認後、ダウンロードが可能となります。
通常は、レイヤー分けされたPSD形式のデザインファイルをダウンロードして頂きます。
※3級のみ、スライスされた画像ファイル一式をご提供いたします（Photoshopを所有していない方も受験可能とするため）。

実際の検定ではページ全体をコーディングして頂きますが、ここでは出題例として、問題の一部のみをご紹介します。

【問】

PSDファイルを使用し、以下のデザインの通りにコーディングしてください。（横並びのリスト）
※画像はロールオーバーを実装することを前提に、背景画像として設定してください。
※「XHTML+CSS 3級」では、PSDデータの代わりにスライスされた画像をお渡しします。

◆解答例

HTML

<ul id="gNav">
<ul id="home"><a href="#">HOME</a></li>
<ul id="know"><a href="#">フィットネスを知る</a></li>
<ul id="program"><a href="#">プログラム案内</a></li>
<ul id="guide"><a href="#">施設案内</a></li>
<ul id="access"><a href="#">アクセス</a></li>
</ul>

CSS

div#header ul#gNav {
	border-bottom: 3px solid #c4c4c4;
}

div#header ul#gNav li {
	float: left;
}

div#header ul#gNav li a {
	display: block;
	height: 30px;
	text-indent: -9999px;
	width: 153px;
}

div#header ul#gNav li#home a {
	background: url(../images/gnav_home.gif) no-repeat left top;
}

div#header ul#gNav li#know a {
	background: url(../images/gnav_know.gif) no-repeat left top;
}

div#header ul#gNav li#program a {
	background: url(../images/gnav_program.gif) no-repeat left top;
}

div#header ul#gNav li#guide a {
	background: url(../images/gnav_guide.gif) no-repeat left top;
}

div#header ul#gNav li#access a {
	background: url(../images/gnav_access.gif) no-repeat left top;
}

(X)HTML+CSSコーディングの実践的オンライン検定