初 期 設 定... 2 拡 張 子 について... 2 Expression Web 4 の 導 入 について... 3 Expression Web 4 SP2 ( 無 料 版 )のダウンロード... 3 Expression Web 4 の 設 定 について... 4 作 成 ページ 例 につ

日本情報処理検定協会主催

１級編

（Expression Web 4 対応）

２０１５年４月

ホームページ作成検定 サンプル問題１級解答手順 １ 初期設定 ... ２ ■拡張子について ... ２ ■Expression Web 4 の導入について ... ３ Expression Web 4 SP2 (無料版)のダウンロード ... ３ ■Expression Web 4 の設定について ... ４ 作成ページ例について ... ６ 解答の手順を進める前に ... ６ 事前準備 ... ６ ■フォルダー名の変更 ... ６ １級 ... ７ ■処理条件１．受験番号と名前を入力 ... ７ ■処理条件２．ページタイトルを入力 ... ７ ■処理条件３．スタイルシートを作成し、設定してページにリンク ... ８ スタイルシートを作成 ... ８ スタイルシートの設定 ... ８ ページのスタイルを設定 ... ８ 表のスタイルを設定 ... １０ ID“top”のスタイルを設定 ... １１ ID“main”のスタイルを設定 ... １３ 見出し１のスタイルを設定 ... １４ 見出し２のスタイルを設定 ... １７ リンクのスタイルを設定 ... １９ マウスが上にあるリンクのスタイルを設定 ... １９ クラス“navi”のスタイルを設定 ... ２１ クラス“colu”のスタイルを設定 ... ２３ スタイルシートを保存 ... ２６ スタイルシートをページにリンク ... ２７ ■処理条件４．レイアウトの丸番号ごとの指示に従って作成 ... ２８ 枠が非表示の表を作成 ... ２８ 表を挿入 ... ２８ セルの結合 ... ２９ セル①に ID“top”を設定し、見出し１の設定とメールリンクの挿入 ... ２９ セル①に ID“top”を設定 ... ２９ 文字入力３行目にメールリンクを挿入 ... ３０ １行目に見出し１を設定 ... ３０ セル②から⑤にクラス“navi”を設定し、文字入力をしてリンクを挿入 ... ３１ セル②から⑤にクラス“navi”を設定 ... ３１ リンクを挿入 ... ３２ セル⑥に ID“main”を設定し文字入力 ... ３３ セル⑥に ID“main”を設定 ... ３３ セル⑦、⑧にクラス“colu”を設定し、見出し２の設定と画像の挿入 ... ３３ セル⑦、⑧にクラス“colu”を設定 ... ３３ １行目に見出し２を設定 ... ３４ 画像を挿入 ... ３４ 余分な改行を削除 ... ３５ ■処理条件５．作成ページを保存 ... ３６ ■処理条件６．「index.html」を複製 ... ３６ ■処理条件７．ページタイトルを変更 ... ３７ ■処理条件８．レイアウトのセル内を変更 ... ３８ レイアウトの⑥セルの内容をすべて削除し、処理条件８の指示⑥の内容に変更 ... ３８ レイアウトの⑥セルの内容をすべて削除 ... ３８ １行目を見出し２に設定 ... ３８ ４行目にリンクを挿入 ... ３８ レイアウトの⑦、⑧見出し２の設定と画像の挿入、リンクを挿入 ... ３９ レイアウトの⑦・⑧セルの内容をすべて削除 ... ３９ １行目を見出し２に設定 ... ３９ 画像を挿入 ... ４０ 画像にリンクを挿入し、新しいウィンドウで開くように設定 ... ４０ ■処理条件５．作成ページを上書き保存 ... ４２ ■ブラウザーでリンクの確認 ... ４２ ■メールアドレスの確認 ... ４３ ■スタイルシートの確認 ... ４４ ■スタイルシートの修正 ... ４５ ■プロパティのカテゴリ ... ４６ フォント ... ４６ ブロック ... ４６ 背景 ... ４６ 枠線 ... ４７ ボックス ... ４７ 配置 ... ４７ レイアウト ... ４８ リスト ... ４８ ■イメージマップの編集 ... ４９ ■フォームについて ... ５１ フォームの挿入 ... ５１ 入力部品の挿入 ... ５２ ■JavaScript の挿入 ... ５７ ■テキストファイルからの文章挿入 ... ５８

ホームページ作成検定 サンプル問題１級解答手順 ２

初期設定

■拡張子について

問題の処理条件に指定されているファイルには、「html」、「gif」、「jpg」などの拡張子が記述されています。 パソコンの設定によって拡張子が表示されない場合があるので、問題を解く前に拡張子を表示する設定をします。 ※操作手順は Windows 7 の画面です。 （１） （２） （３） デスクトップ左下の[スタート]をクリックし、右側の [コントロールパネル]を選択してウィンドウを表示させ ます。 右上の[表示方法]が[カテゴリ]の場合、[大きいアイコ ン]を選択し一覧に表示された[フォルダーオプション] を選択して[フォルダーオプション]ダイアログボックス を表示させます。 ※Windows XP の場合、左側[コントロールパネル]下の [クラシック表示に切り替える]をクリックし、一覧に 表示された[フォルダオプション]をダブルクリックし て、[フォルダオプション]ダイアログボックスを表示 させます。 ※Windows Vista の場合、左側[コントロールパネル ホーム]下の[クラシック表示]をクリックし、一覧に 表示された[フォルダオプション]を、ダブルクリック して[フォルダオプション]ダイアログボックスを表示 させます。 [フォルダーオプション]の[表示]タブの[詳細設定]で [登録されている拡張子は表示しない]のチェックを外 し、[ＯＫ]ボタンをクリックします。 設定し終えたらデータのあるフォルダーを開き、拡張子 が表示されていることを確認してください。

ホームページ作成検定 サンプル問題１級解答手順 ３

■Expression Web 4 の導入について

Microsoft Expression のサイトから、「Expression Web 4 SP2 (無料版)」をダウンロードし、インストールしま す。

Microsoft Expression

http://www.microsoft.com/expression/jpn/index.html

Expression Web 4 SP2 (無料版)のダウンロード （１） （２） （３） 上記サイトにアクセスし、「Expression Web 4 SP2 (無 料版)のダウンロード」をクリックします。 [Details]の

○

+ を展開し、[Japanese]をクリックしま す。 「Web_Trial_ja.exe(114MB)を実行または保存します か？」とメッセージが表示されたら、[実行]ボタンを押 して、インストールを開始します。 「使用許諾契約書」のウィンドウが表示されたら、[同 意する]をクリックし、画面に従ってインストールを 行ってください。

ホームページ作成検定 サンプル問題１級解答手順 ４

■Expression Web 4 の設定について

あらかじめ作成ページの設定しておくと、解くうえで便利です。 （１） （２） （３） （４） 「Expression Web 4」を起動します。 スタートメニューから[すべてのプログラム]をクリック します。 [Microsoft Expression]のフォルダーをクリックし、 [Microsoft Expression Web 4]をクリックします。

メニューバー[ツール]の[ページ編集オプション]を選択 します。

[作成]タブの[ドキュメント型宣言]を「なし」に変更し ます。

ホームページ作成検定 サンプル問題１級解答手順 ５ （５） （６） （７） （８） [CSS]タブの[枠線]を「CSS（インライン スタイル）」 に変更し[ＯＫ]ボタンをクリックします。 メニューバー[表示]の[書式設定記号]にある[表示]を 選択します。 設定が終了したら、「無題_1.html」タブにある をク リックしてページファイルを閉じます。 ※起動した時点の設定になっているページファイルを閉 じます。この操作は設定後のみ行ってください。 メニューバー[ファイル]の[新規]から、[HTML]を選択し ます。

ホームページ作成検定 サンプル問題１級解答手順 ６

作成ページ例について

作成ページ例はブラウザーの互換モードで表示されるように作成されています。作成ソフトやブラウザーによって 作成ページ例と表示が多少異なる場合もあります。異なっていた場合でも、指示どおりに作成されていれば減点はあ りません。

解答の手順を進める前に

この手順書は「サンプル問題１級」を解く解答手順になっています。解答を進める際には、「サンプル問題１級」 を手元に置いて、処理条件の文や内容を確認しながら操作してください。 ※サンプル問題および使用するデータは別ファイルになります。別途ダウンロードしてください。

事前準備

検定の前にフォルダーの名前を変更します。

■フォルダー名の変更

フォルダーの「受験番号」と「名前」をそれぞれ変更します。 ↑ ↑ 受験番号 名前 （例） ↓ ↓ （１） （２） ◎変更する際に次のことに気をつけてください。 受験対象級（HP1、HP2、HP3、HP4）およびアンダーバー（ _ ）は削除しない。 受験番号は半角入力とする。 名前は全角入力とする。 スペースを入れない。 フォルダーの上で右クリックし、[名前の変更]を選択し ます。 「受験番号」を削除し、半角文字で受験番号を入力しま す。その後「名前」を削除し全角文字で名前を入力し、 [Enter]キーで確定します。

ホームページ作成検定 サンプル問題１級解答手順 ７

１級

ホームページ作成検定試験では問題用紙の＜作成ページ例＞、＜レイアウト＞を参照してページを作成します。 ページを作成する際に挿入する画像およびリンク先ページは、事前準備で名前を変更したフォルダー内に用意され ています。

■処理条件１．受験番号と名前を入力

＜処理条件＞受験番号、名前を入力しなさい。

■処理条件２．ページタイトルを入力

＜処理条件＞ページタイトルを入力しなさい。タイトルは“日野文化センタータトップ”とする。 （１） （２） ページをクリックし、受験番号と名前を入力します。 ※ は段落の改行による記号です。 受験番号、名前の下で右クリックし、[ページのプロパ ティ]を選択します。 [全般]タブの[タイトル]に「日野文化センタートップ」 と入力し、[ＯＫ]ボタンをクリックします。

ホームページ作成検定 サンプル問題１級解答手順 ８ （３）

■処理条件３．スタイルシートを作成し、設定してページにリンク

＜処理条件＞ページにスタイルシート“style.css”をリンクしなさい。 スタイルシートを作成 スタイルシートの設定 ページのスタイルを設定 ＜スタイル一覧表（ページ）＞ セレクタ プロパティ 値 ページ 背景画像 画像“back1.gif” 背景画像の属性 繰り返す (水平方向) ※スタイル一覧表は見開きページ右側（２ページ目）にあります。 ●ページのセレクタ（body）を設定 上部タイトルバーにページタイトルが表示されたことを 確認します。 メニューバー[ファイル]の[新規]から[CSS]を選択しま す。 メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の 矢印をクリックして、「body」を選 択します。

ホームページ作成検定 サンプル問題１級解答手順 ９ ●背景画像（background-image）を設定 （１） （２） （３） （４） [カテゴリ]の「背景」をクリックし、[background-image] の[参照]ボタンをクリックします。 データのあるフォルダーに移動し、画像「back1.gif」 を選択して[開く]をクリックします。 [background-image]のボックスに選択したファイル名が あることを確認し[ＯＫ]ボタンをクリックします。 ダイアログボックスを閉じると、スタイルシートのファ イルに設定が記述されます。

ホームページ作成検定 サンプル問題１級解答手順 １０ 表のスタイルを設定 ＜スタイル一覧表（表）＞ セレクタ プロパティ 値 表 マージン：上 20 ピクセル マージン：左 70 ピクセル ●表のセレクタ（table）を設定します。 （１） ●マージン（外余白）を設定 （１） （２） メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の 矢印をクリックして、「table」を選 択します。 [カテゴリ]の「ボックス」をクリックし、[margin]の「す べて同じにする」のチェックを外します。 [margin]の[top]の入力ボックスに「20」と入力し、値 の単位が「px」になっていることを確認します。 [margin]の[left]の入力ボックスに「70」と入力し、値 の単位が「px」になっていることを確認します。 [ＯＫ]をクリックします。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 １１ ID“top”のスタイルを設定 ＜スタイル一覧表（ID“top”）＞ セレクタ プロパティ 値 ID“top” 文字の属性 太い 垂直方向の配置 下 水平方向の配置 右揃え 背景画像 画像“back2.gif” ●ID“top”のセレクタを設定 ●文字の属性：太さ（font-weight）を設定 メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の入力ボックスにある「.newStyle1」を [Delete]キーで削除し、「#top」と入力します。 ※必ず半角で入力してください。 [カテゴリ]が「フォント」であることを確認し、 [font-weight]の 矢印をクリックして、「bold」を選 択します。

ホームページ作成検定 サンプル問題１級解答手順 １２ ●垂直方向の配置（vertical-align）・水平方向の配置（text-align）を設定 （１） （２） ●背景画像（background-image）を設定 （１） （２） [カテゴリ]の「ブロック」をクリックし、[vertical-align] の 矢印をクリックして、「bottom」を選択します。 [text-align]の 矢印をクリックして、「right」を選 択します。 [カテゴリ]の「背景」をクリックし、[background-image] の[参照]ボタンをクリックします。 データのあるフォルダーに移動し、画像「back2.gif」 を選択して[開く]をクリックします。

ホームページ作成検定 サンプル問題１級解答手順 １３ （３） ID“main”のスタイルを設定 ＜スタイル一覧表（ID“main”）＞ セレクタ プロパティ 値 ID“main” パディング：左 20 ピクセル ●ID“main”のセレクタを設定 ●パディング：左（padding-left）を設定 [background-image]のボックスに選択したファイル名が あることを確認し[ＯＫ]ボタンをクリックします。 メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の入力ボックスにある「.newStyle1」を [Delete]キーで削除し、「#main」と入力します。 ※必ず半角で入力してください。 [カテゴリ]の「ボックス」をクリックし、[padding]の[す べて同じにする]のチェックボックスを外します。 [padding]の[left]の入力ボックスに「20」と入力し、 値の単位が「px」になっていることを確認します。 [ＯＫ]ボタンをクリックします。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 １４ 見出し１のスタイルを設定 ＜スタイル一覧表（見出し１）＞ セレクタ プロパティ 値 見出し１ 文字サイズ 48 ピクセル 水平方向の配置 左揃え 文字色 #336600 (51,102,0) 位置の属性 相対的 位置：左 20 ピクセル 位置：上 50 ピクセル ●見出し１のセレクタ（h1）を設定 ●文字サイズ（font-size）を設定 メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の 矢印をクリックして、「h1」を選択 します。 [カテゴリ]が「フォント」であることを確認し、 [font-size]の入力ボックスに「48」と入力し、値の単 位が「px」になっていることを確認します。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 １５ ●水平方向の配置（text-align）を設定 ●文字色（color）を設定 （１） （２） （３） [カテゴリ]の「ブロック」をクリックし、[text-align] の矢印をクリックし、「left」を選択します。 [カテゴリ]の「フォント」をクリックし、[color]の右 側、 をクリックします。 [ユーザー設定]をクリックします。 右下の、[赤]、[緑]、[青]右側のボックスの数字を、処 理条件で指示されているカッコ内の数字左から「赤：51, 緑：102，青：0」の順に変更し、[ＯＫ]をクリックしま す。

ホームページ作成検定 サンプル問題１級解答手順 １６ （４） ●位置の属性（position）を設定 ●位置：左（left）・位置：上（top）を設定 （１） （２） [ＯＫ]をクリックします。 [カテゴリ]の「配置」をクリックし、[position]の 矢 印をクリックして、「rerative」を選択します。 [left]の入力ボックスに「20」と入力し、値の単位が 「px」になっていることを確認します。 ※必ず半角で入力してください。 [top]の入力ボックスに「50」と入力し、値の単位が「px」 になっていることを確認します。 [ＯＫ]をクリックします。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 １７ 見出し２のスタイルを設定 ＜スタイル一覧表（見出し２）＞ セレクタ プロパティ 値 見出し２ 文字サイズ 200 パーセント 文字色 #cc7700 (204,119,0) ●見出し２のセレクタ（h2）を設定 ●文字サイズ（font-size）を設定 ●文字色（color）を設定 （１） メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の 矢印をクリックして、「h2」を選択 します。 [font-size]の入力ボックスに「200」と入力し、値の単 位の 矢印をクリックして、「%」を選択します。 ※必ず半角で入力してください。 [color]の右側、 をクリックします。

ホームページ作成検定 サンプル問題１級解答手順 １８ （２） （３） （４） （５） [ユーザー設定]をクリックします。 右下の、[赤]、[緑]、[青]右側のボックスの数字を、処 理条件で指示されているカッコ内の数字左から「赤：204, 緑：119，青：0」の順に変更し、[ＯＫ]をクリックしま す。 [ＯＫ]をクリックします。 [ＯＫ]をクリックします。

ホームページ作成検定 サンプル問題１級解答手順 １９ リンクのスタイルを設定 ＜スタイル一覧表（リンク）＞ セレクタ プロパティ 値 リンク 行間 2 文字の高さ ●リンクのセレクタ（a）を設定 ●行間を設定 マウスが上にあるリンクのスタイルを設定 ＜スタイル一覧表（マウスが上にあるリンク）＞ セレクタ プロパティ 値 マウスが上にあるリンク 文字色 #ff3300 (255,51,0) メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の 矢印をクリックして、「a」を選択し ます。 [カテゴリ]の「ブロック」をクリックします。 [line-height]の入力ボックスに「2」と入力し、単位の 矢印をクリックして「em」を選択します。 ※必ず半角で入力してください。 ※「文字の高さ」の単位は「em」です。 メニューバー[書式設定]の[新規スタイル]を選択しま す。

ホームページ作成検定 サンプル問題１級解答手順 ２０ ●マウスが上にあるリンクのセレクタ（a:hover）を設定 ●文字色（color）を設定 （１） （２） （３） [セレクター]の 矢印をクリックして、「a:hover」を 選択します。 [カテゴリ]の「フォント」をクリックし、[color]の右 側、 をクリックします。 [ユーザー設定]をクリックします。 右下の、[赤]、[緑]、[青]右側のボックスの数字を、処 理条件で指示されているカッコ内の数字左から「赤：255, 緑：51，青：0」の順に変更し、[ＯＫ]をクリックしま す。

ホームページ作成検定 サンプル問題１級解答手順 ２１ （４） （５） クラス“navi”のスタイルを設定 ＜スタイル一覧表（クラス“navi”）＞ セレクタ プロパティ 値 クラス“navi” 文字サイズ 120 パーセント 水平方向の配置 中央揃え 背景色 #ffcc99 (255,204,153) 位置：幅 175 ピクセル ●クラス“navi”のセレクタを設定 [ＯＫ]をクリックします。 [ＯＫ]をクリックします。 メニューバー[書式設定]の[新規スタイル]を選択しま す。 [セレクター]の入力ボックスにある「.newStyle1」を [Delete]キーで削除し、「.navi」と入力します。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 ２２ ●文字サイズを設定 ●水平方向の配置（text-align）を設定 ●背景色（background-color）を設定 （１） （２） [カテゴリ]が「フォント」であることを確認し、 [font-size]の入力ボックスに「120」と入力し、値の単 位の 矢印をクリックして、「%」を選択します。 ※必ず半角で入力してください。 [カテゴリ]の「ブロック」をクリックし、[text-align] の 矢印をクリックし、「center」を選択します。 [カテゴリ]の「背景」をクリックし、[background-color] の右側、 をクリックします。 [ユーザー設定]をクリックします。

ホームページ作成検定 サンプル問題１級解答手順 ２３ （３） （４） ●幅（width）を設定 クラス“colu”のスタイルを設定 ＜スタイル一覧表（クラス“colu”）＞ セレクタ プロパティ 値 クラス“colu” 背景画像 画像“back3.gif” 背景画像の属性 繰り返さない パディング：左 20 ピクセル 位置：高さ 350 ピクセル 右下の、[赤]、[緑]、[青]右側のボックスの数字を、処 理条件で指示されているカッコ内の数字左から「赤：255, 緑：204，青：153」の順に変更し、[ＯＫ]をクリックし ます。 [ＯＫ]をクリックします。 [カテゴリ]の「配置」をクリックし、[width]の入力 ボックスに「175」と入力し、値の単位が「px」になっ ていることを確認します。 [ＯＫ]をクリックします。 ※必ず半角で入力してください。 メニューバー[書式設定]の[新規スタイル]を選択しま す。

ホームページ作成検定 サンプル問題１級解答手順 ２４ ●クラス“colu”のセレクタを設定 ●背景画像（background-image）を設定 （１） （２） （３） [セレクター]の入力ボックスにある「.newStyle1」を [Delete]キーで削除し、「.colu」と入力します。 ※必ず半角で入力してください。 [カテゴリ]の「背景」をクリックし、[background-image] の[参照]ボタンをクリックします。 データのあるフォルダーに移動し、画像「back3.gif」 を選択して[開く]をクリックします。 [background-image]のボックスに選択したファイル名が あることを確認します。

ホームページ作成検定 サンプル問題１級解答手順 ２５ ●背景画像の属性（background-repeat）を設定 ●パディング：左（padding-left）を設定 ●高さ（height）を設定 [background-repeat]の 矢印をクリックし、[no-repeat] を選択します。 [カテゴリ]の「ボックス」をクリックし、[padding]の[す べて同じにする]のチェックボックスを外します。 [padding]の[left]の入力ボックスに「20」と入力し、 値の単位が「px」になっていることを確認します。 ※必ず半角で入力してください。 [カテゴリ]の「配置」をクリックし、[height]の入力 ボックスに「350」と入力し、値の単位が「px」になっ ていることを確認します。 [ＯＫ]をクリックします。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 ２６ スタイルシートを保存 （１） （２） スタイルの設定ができました。 メニューバー[ファイル]の[名前を付けて保存]を選択し ます。 データのあるフォルダーに変更し、[ファイル名]に 「style.css」と入力します。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 ２７ （３） （４） スタイルシートをページにリンク （１） （２） （３） （４） （５） ファイルのタブが、保存した名前に変更されたことを確 認します。 「無題_1.html」をクリックし、タブを切り替えます。 メニューバー[書式設定]の[CSS スタイル]から[スタイ ルシートの添付]を選択します。 [参照]ボタンをクリックします。 [ファイルの場所]がデータのあるフォルダーであること を確認し、「style.css」を選択して[開く]をクリック します。 [適用方法]が[リンク]になっていることを確認し、 [ＯＫ]をクリックします。 スタイルシートが適用されると、スタイルシートに設定 した背景画像が表示されます。

ホームページ作成検定 サンプル問題１級解答手順 ２８

■処理条件４．レイアウトの丸番号ごとの指示に従って作成

枠が非表示の表を作成し、各セルの丸番号の指示どおりに作成をします。 ＜レイアウト＞ ＜作成ページ例＞ 枠が非表示の表を作成 ＜処理条件＞ ＜レイアウト＞を参考にして表を挿入し、丸番号ごとの指示に従って作成しなさい。枠は表示しない。 表を挿入 （１） （２） 入力した文字の下をクリックします。 メニューバー[テーブル]の[テーブルの挿入]を選択しま す。 [行]を「4」と、[列]を「4」と入力し、[幅の指定]の チェックを外して[ＯＫ]ボタンをクリックします。 ※[幅の指定]のチェックを外さないと、表の幅がページ 全体に広がります。必ずチェックを外してください。 ①ID“top” ②クラス “navi” ③クラス “navi” ④クラス “navi” ⑤クラス “navi” ⑥ID“main” ⑦クラス“colu” ⑧クラス“colu”

ホームページ作成検定 サンプル問題１級解答手順 ２９ セルの結合 セル①に ID“top”を設定し、見出し１の設定とメールリンクの挿入 ＜処理条件＞ ①文字入力をし、セルを ID“top”にしなさい。 日野文化センター（見出し１） 電話受付：083-945-2217 メールでの問い合わせ ※“メールでの問い合わせ”にメールリンクの挿入をする。（[email protected]） セル①に ID“top”を設定 結 合 す る セ ル を ド ラ ッ グ し て 選 択 し 、 メ ニ ュ ー バ ー [テーブル]の[変更]から[セルの結合]を選択して結合し ます。 その後、３行目、4 行目も同様にセルを結合します。 ※選択したセルの上で右クリックし、[変更]から[セル の結合]を選択しても構いません。 レイアウトの①セルにカーソルを移動します。 ツールバーの[ID]の 矢印をクリックし、「top」を選 択します。 ※ツールバーの[ID]が表示されていない場合、メニュー バー[表示]の[ツールバー]にある「スタイル」を選択 します。 ①セルのみ先に文字入力をすべて行います。 ※入力文字の全半角は問いません。 ※スタイルシートの設定で見出し１に「位置の属性」を 設定しています。この設定を適用すると、文字が重 なってしまい編集が難しくなるので、先にメールリン クを挿入します。（下図参照）

ホームページ作成検定 サンプル問題１級解答手順 ３０ 文字入力３行目にメールリンクを挿入 （１） （２） １行目に見出し１を設定 処理条件４の指示①のセル下の※印の指示、メールリン クの挿入をします。 「メールでの問い合わせ」をドラッグして選択します。 メニューバー[挿入]の[ハイパーリンク]を選択します。 ※文字の上で右クリックし[ハイパーリンク]を選択して も構いません。 [リンク先]を[電子メールアドレス]を選択し、[電子 メールアドレス]に「[email protected]」と入力しま す。 [ＯＫ]ボタンをクリックします。 ※必ず半角で入力してください。 ※「mailto:」は、メールアドレスを入力すると自動で 入ります。 「日野文化センター」をドラッグして選択します。 ツールバーの [スタイル]をクリックし、[見 出し 1]を設定します。 ※文字の重なりは解答を進めていくと解消します。 ※見出し 1 設定時に生じた余分な改行は保存前に削除しま す。（Ｐ．３５を参照） ②

ホームページ作成検定 サンプル問題１級解答手順 ３１ セル②から⑤にクラス“navi”を設定し、文字入力をしてリンクを挿入 ＜処理条件＞ 文字入力をし、各セルをクラス“navi”にしなさい。 ② トップページ （ﾘﾝｸ:index.html） ③ 短期講座 （ﾘﾝｸ:short.html） ④ 長期講座 （ﾘﾝｸ:page1.html） ⑤ アクセス （ﾘﾝｸ:page2.html） セル②から⑤にクラス“navi”を設定 （１） （２） ②セルにカーソルを移動します。 ツールバーの[クラス]の 矢印をクリックし、「navi」 を選択します。 ③から⑤セルも同様にツールバーの[クラス]の 矢印を クリックし、「navi」を選択します。 ※②から⑤セルを選択してクラスの設定を行うと、表の 行（<TR>）に対してクラスの設定がされるので注意し てください。 そ の 後 、 各 セ ル に ② 「 ト ッ プ ペ ー ジ 」 、 ③ 「 短 期 講 座」、④「長期講座」、⑤「アクセス」と文字入力をし ます。 セルに設定されている場合、 「<TD.navi>」と表示されます。

ホームページ作成検定 サンプル問題１級解答手順 ３２ リンクを挿入 （１） （２） （３） （４） 「トップページ」をドラッグして選択します。 メニューバー[挿入]の[ハイパーリンク]を選択します。 ※文字の上で右クリックし[ハイパーリンク]を選択して も構いません。 [リンク先]を[ファイル、webページ]をクリックし、 [アドレス]に「index.html」と入力します。 [ＯＫ]ボタンをクリックします。 同様の手順で「短期講座」に「short.html」と入力し、 リンク挿入します。 ※必ず半角で入力してください。 「長期講座」をドラッグして選択します。 同様の手順でメニューバー[挿入]の[ハイパーリンク]を 選択します。 ※文字の上で右クリックし[ハイパーリンク]を選択して も構いません。 [リンク先]を[ファイル、webページ]をクリックし、[検 索先]をデータのあるフォルダーに変更して、「page1.html」 を選択します。 [ＯＫ]ボタンをクリックします。 同様の手順で「アクセス」に「page2.html」をリンク挿 入します。 ※[アドレス]に直接入力しても構いませんが、必ず半角 で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 ３３ レイアウトの⑥セルにカーソルを移動します。 ツールバーの[ID]の 矢印をクリックし、「main」を 選択します。 その後、文字入力を行います。 ※入力文字の全半角は問いません。 ⑦セルを選択します。 ツールバーの[クラス]の 矢印をクリックし、「colu」 を選択します。設定後、⑧セルも同様の手順で設定しま す。 ※⑦と⑧セルを選択してクラスの設定を行うと、表の行 （<TR>）に対してクラスの設定がされるのでまとめて 設定を行う際は注意してください。 セル⑥に ID“main”を設定し文字入力 ＜処理条件＞ ⑥文字入力をし、セルを ID“main”にしなさい。 当センターでは、あなたの心を満たす講座を用意してお待ちしております。 さあ、あなたの魅力を咲かせましょう。 セル⑥に ID“main”を設定 セル⑦、⑧にクラス“colu”を設定し、見出し２の設定と画像の挿入 ＜処理条件＞ 文字入力、画像挿入をし、各セルをクラス“colu”にしなさい。 ⑦ 短期講座（見出し２） 料理コース 料理のレパートリーを増やしたい方へ 画像“pic1.gif” （代替テキスト“料理コースのイラスト”） ⑧ 長期講座（見出し２） 手芸コース コースの中でも人気の講座を紹介します 画像“pic2.gif” （代替テキスト“手芸コースのイラスト”） セル⑦、⑧にクラス“colu”を設定 セルに設定されている場合、 「<TD.colu>」と表示されます。

ホームページ作成検定 サンプル問題１級解答手順 ３４ ⑦セルに「短期講座」と入力し、ドラッグして選択しま す。 ツールバーの [スタイル]をクリックし、[見 出し 2]を設定します。 設定し終えたら、改行して「料理コース」から「増やし たい方へ」まで入力します。 入力し終えたら、改行します。 ※[Enter]キーを押して改行すると、行間が空いてしま いますが減点にはなりません。 模範解答どおりに改行するには 「料理コース」と、「増やしたい方へ」を改行する際に [Shift]キーを押しながら[Enter]キーを押すと、模範解 答どおりに改行されます。 メニューバー[挿入]の[画像]から[ファイルから]を選択 します。 データのあるフォルダーに移動し、画像「pic1.gif」を 選択して[挿入]をクリックします。 [代替テキスト]に「料理コースのイラスト」と入力し、 [ＯＫ]をクリックします １行目に見出し２を設定 画像を挿入 （１） （２） （３） [Shift]キー+[Enter]キー

ホームページ作成検定 サンプル問題１級解答手順 ３５ （４） 余分な改行を削除 （１） 同様の手順でレイアウトの⑧セルに「長期講座」と入力 し、見出し２を設定します。 その後、改行して文字入力、画像挿入をし、挿入した画 像には代替テキストを設定します。 ２９ページで設定した見出し１で生じた余分な改行を削 除します。 破線で囲った範囲は見出し１なので、クリックしても余 分な改行部分にカーソルが移動できません。 「メールでの問い合わせ」の部分をクリックして、カー ソルを移動し、「←」キー（左向き矢印キー）を押して 「★」部分にカーソルを移動します。 移動後、[Delete]キーを押して、改行を削除します。 ★

ホームページ作成検定 サンプル問題１級解答手順 ３６

■処理条件５．作成ページを保存

＜処理条件＞ 作成ページを保存しなさい。ファイル名は“index.html”とする。 （１） （２）

■処理条件６．「index.html」を複製

＜処理条件＞ “index.html”を複製しなさい。ファイル名は“short.html”とする。 （１） （２） メニューバーの[ファイル]をクリックし、[名前を付け て保存]を選択します。 データのあるフォルダーに変更し、[ファイル名]に 「index.html」と入力します。 ※必ず半角で入力してください。 メニューバーの[ファイル]をクリックし、[名前を付け て保存]を選択します。 データのあるフォルダーに変更し、[ファイル名]に 「short.html」と入力します。 ※必ず半角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 ３７

■処理条件７．ページタイトルを変更

＜処理条件＞ ページタイトルを変更しなさい。タイトルは“日野文化センター短期講座”とする。 （１）

（２）

（３）

任意の場所で右クリックし、[ページのプロパティ]を 選択します。 [全般]タブの[タイトル]に「日野文化センター短期講 座」と入力し、[ＯＫ]ボタンをクリックします。 上部タイトルバーのタイトルが変更されたことを確認 します。

ホームページ作成検定 サンプル問題１級解答手順 ３８

■処理条件８．レイアウトのセル内を変更

＜処理条件＞ 丸番号の指示に従って作成しなさい。ID およびクラスは基のままとする。 ⑥セルの内容をすべて削除し、文字入力をしなさい。 料理コース（見出し２） 時間：18 時から 20 時まで 料金：5,000 円 講師プロフィルのページ（ﾘﾝｸ:page3.html） レイアウトの⑥セルの内容をすべて削除し、処理条件８の指示⑥の内容に変更 レイアウトの⑥セルの内容をすべて削除 １行目を見出し２に設定 ４行目にリンクを挿入 （１） （２） レイアウトの⑥セルの内容をドラッグして選択し、 [Delete]キーを押して削除します。 ⑥セルに「料理コース」と入力し、ドラッグして選択 します。 ツールバーの [スタイル]をクリックし、[見 出し 1]を設定します。 設定後、改行して残りの文字を入力します。 「講師プロフィルのページ」をドラッグして選択しま す。 メ ニ ュ ー バー [挿 入 ]の [ハ イ パ ー リン ク ]を選 択し ま す。 ※文字の上で右クリックし[ハイパーリンク]を選択し ても構いません。 [リンク先]を[ファイル、web ページ]をクリックし、 [検索先]をデータのあるフォルダーに変更して、「page3.ht ml」を選択します。 [ＯＫ]ボタンをクリックします。 ※[アドレス]に直接入力しても構いませんが、必ず半 角で入力してください。

ホームページ作成検定 サンプル問題１級解答手順 ３９ （３） レイアウトの⑦、⑧見出し２の設定と画像の挿入、リンクを挿入 ＜処理条件＞ 各セルの内容をすべて削除し、文字入力、画像挿入をしなさい。 ⑦ 毎日の家庭料理（見出し２） 開講日：月曜日・金曜日 画像“pic3_th.jpg” （代替テキスト“揚げ出し豆腐の写真”） （ﾘﾝｸ:pic3.jpg、ﾀｰｹﾞｯﾄ:新しいウィンドウ） ⑧ 簡単レシピ料理（見出し２） 開講日：火曜日・水曜日 画像“pic4_th.jpg” （代替テキスト“パスタの写真”） （ﾘﾝｸ:pic4.jpg、ﾀｰｹﾞｯﾄ:新しいウィンドウ） レイアウトの⑦・⑧セルの内容をすべて削除 １行目を見出し２に設定 リンクが設定されました。 レ イ ア ウ ト の ⑦ 、 ⑧ セ ル の 内 容 を ド ラ ッ グ し て 選 択 し、[Delete]キーを押して削除します。 ⑦セルに「毎日の家庭料理」と入力し、ドラッグして 選択します。 ツールバーの [スタイル]をクリックし、[見 出し 2]を設定します。 設定し終えたら、改行して「開講日」から「金曜日」 まで入力します。 入力し終えたら、改行します。 ※[Enter]キーを押して改行すると、行間が空いてしま いますが減点にはなりません。 ※ここでの模範解答の改行は[Shift]キーを押しながら [Enter]キーを押しています。

ホームページ作成検定 サンプル問題１級解答手順 ４０ メニューバー[挿入]の[画像]から[ファイルから]を選択 します。 データのあるフォルダーに移動し、画像「pic3_th.jpg」 を選択して[挿入]をクリックします。 [代替テキスト]に「揚げ出し豆腐の写真」と入力し、 [ＯＫ]をクリックします 画像「pic3_th.jpg」をクリックして選択します。 メニューバー[挿入]の[ハイパーリンク]を選択します。 ※文字の上で右クリックし[ハイパーリンク]を選択して も構いません。 画像を挿入 （１） （２） （３） 画像にリンクを挿入し、新しいウィンドウで開くように設定 （１）

ホームページ作成検定 サンプル問題１級解答手順 ４１ [リンク先]を[ファイル、webページ]をクリックし、[検 索先]をデータのあるフォルダーに変更して、「pic3.jpg」 を選択します。 [ターゲットフレーム]ボタンをクリックします。 ※[アドレス]に直接入力しても構いませんが、必ず半角 で入力してください。 [共通のターゲット]の「新しいウィンドウ」をクリック し、[ＯＫ]ボタンをクリックします。 [ＯＫ]ボタンをクリックします。 設定後、同様の手順でレイアウトの⑧セルに「簡単レシ ピ料理」と入力し、見出し２を設定します。 その後、改行して文字入力、画像挿入をし、挿入した画 像には代替テキストを設定します。 挿入した画像はリンクを挿入し完成させます。 （２） （３） （４） （５）

ホームページ作成検定 サンプル問題１級解答手順 ４２

■処理条件５．作成ページを上書き保存

＜処理条件＞ “short.html”を上書き保存しなさい。

■ブラウザーでリンクの確認

（１） （２） メニューバーの[ファイル]をクリックし、[保存]を選択 します。 ページが完成した後、動作をブラウザーで確認します。 データのあるフォルダーを開き、「index.html」を開き ます。 ページが表示されたら、設定したリンクをクリック し、動作を確認します。 ※複製したページも必ずリンクの確認をしてくだ さい。 ※修正をした場合、共通している箇所は各ページ で必ず修正してください。

ホームページ作成検定 サンプル問題１級解答手順 ４３ （３）

■メールアドレスの確認

リ ン ク 先 の フ ァ イ ル が 表 示 さ れ た ら 、 こ の ペ ー ジ の 「トップページへ」をクリックし、元のページに戻れる ことを確認します。 メールアドレスの設定ができていることを確認する場 合、メールリンクをクリックするとパソコンに設定され ているメールソフトが起動してしまいます。ソフトの起 動に時間が掛かるので、ここでは別の方法で確認しま す。 確認するにはメールリンクが挿入されている部分にカー ソルを合わせ、ブラウザーの下側に表示されるステータ スの表示でアドレスを確認してください。 メールアドレスは「mailto:[email protected]」と表 示されます。 （左図：ブラウザーの表示例） ※複製したページも必ずメールアドレスの確認をしてく ださい。 ※修正をした場合、共通している箇所は各ページで必ず 修正してください。 日 野 文 化 セ ン タ ー ト ッ プ X XX\ HP1_ 001 _日 検 太 郎 \ind ex.h tml m a i l t o : h i n o @ g o u k a k u . n e . j p

ホームページ作成検定 サンプル問題１級解答手順 ４４

■スタイルシートの確認

「style.css」のタブをクリックして、スタイルシートの設定が正しいか確認します セレクタごとのプロパティの設定（例：サンプル問題 １級 style.css） ※セレクタごとのプロパティは「{ }」中括弧で囲われています。 セレクタ ⇒ 指示と記述されているセレクタが正しいかどうか、「出題一覧表（作成ページ）」を参照して 確認します。（Ｐ．４９を参照） プロパティ・値 ⇒ 指示と記述されているプロパティが正しいかどうか、「出題一覧表（スタイルシートのプロパ ティ）」を参照して確認します（Ｐ．５０を参照） ※出題一覧表は当協会ホームページよりダウンロードできます。 ※出題一覧表は試験時に会場に持ち込むことができます。 プロパティ 値 セレクタ

ホームページ作成検定 サンプル問題１級解答手順 ４５

■スタイルシートの修正

ここでは、この手順書に掲載されている問題の表セレクタに、誤ってマージンを４方向 20px に設定した場合を例 に進めます。 （１）[スタイルの管理]パネルの[CSS スタイル]から修正したいセレクタの上で右クリックし、[スタイルの変更]を 選択します ※[スタイルの管理]パネルが表示されていない場合は、メニューバー[パネル]の[スタイルの管理]をクリック します。 （２） [カテゴリ]の「ボックス」を選択し、[margin]の「すべ て同じにする」のチェック外します。 [margin]の[right]、[bottom]、[left]に入力された 「20」を[Delete]キーを押して削除します。 その後、１０ページの手順を参照して設定します。 設定後、上書き保存します。 ※設定を誤り、修正が困難な場合、セレクタの上で右ク リックし、「削除」を選択して、再び設定します。 正：margin-top: 20px; margin-left: 70px; 誤：margin: 20px;

ホームページ作成検定 サンプル問題１級解答手順 ４６

■プロパティのカテゴリ

フォント ブロック 背景 出題内容 プロパティ 値 ① 文字サイズ font-size 数値で指定 ② 文字の属性：太さ font-weight normal：標準 bold：太い ③ 文字の属性：スタイル font-style normal：標準 italic：斜体 ④ 文字色 color #XXXXXX もしくは rgb(XXX,XXX,XXX) ⑤ 文字飾り text-decoration none：なし underline：下線 overline：上線 line-through：取り消し線 ⑤ 出題内容 プロパティ 値 ① 行間 line-height normal：標準 数値で指定 ② 垂直方向の配置 vertical-align baseline：ベースライン top：上 middle：中央 bottom：下 数値で指定 ③ 水平方向の配置 text-align left：左 right：右 center：中央 ① ② ③ 出題内容 プロパティ 値 ① 背景色 background-color #XXXXXX もしくは rgb(XXX,XXX,XXX) ② 背景画像 background-image url(XXX.xxx) ③ 背景画像の属性 background-repeat repeat：繰り返す repeat-x：繰り返す（水平方向） repeat-y：繰り返す（垂直方向） no-repeat：繰り返さない ④ 背景画像の位置 background-position top：上 bottom：下 center：中央 left：左 right：右 ① ② ③ ④ ④ 縦の位置 横の位置 値の単位について 各指示の単位は以下の表に相当します。 指示の単位 単位 ピクセル px 文字の高さ em パーセント % 倍 なし 値の単位について 各指示の単位は以下の表に相当します。 指示の単位 単位 ピクセル px 文字の高さ em パーセント % ① ② ③ ④ ※「倍」は数値の設定後に 表示されている単位を削 除してください。

ホームページ作成検定 サンプル問題１級解答手順 ４７ 枠線 ボックス 配置 出題内容 プロパティ 値 ② マージン 上 margin-top 数値で指定 下 margin-bottom 左 margin-left 右 margin-right ① パディング 上 padding-top 数値で指定 下 padding-bottom 左 padding-left 右 padding-right ① ② ① ② ③ ④ ⑤ 出題内容 プロパティ 値 ① 位置 position static：ふつう absolute：絶対的 relative：相対的 fixed：固定 ② 幅 width 数値で指定 ③ 高さ height 数値で指定 ④ 上 top 数値で指定（position 設定時） ⑤ 左 left 数値で指定（position 設定時） 値の単位について 各指示の単位は以下の表に相当します。 指示の単位 単位 ピクセル px 文字の高さ em パーセント % 値の単位について 各指示の単位は以下の表に相当します。 指示の単位 単位 ピクセル px 出題内容 プロパティ 値 ① ボーダーの スタイル 上 border-top-style none：なし dotted：点線 dashed：破線 solid：実線 double：二重線 下 border-bottom-style 左 border-left-style 右 border-right-style ② ボーダーの幅 上 border-top-width _{thin：薄い} medium：標準 thick：厚い 数値で指定 下 border-bottom-width 左 border-left-width 右 border-right-width ③ ボーダーの色 上 border-top-color #XXXXXX もしくは rgb(XXX,XXX,XXX) 下 border-bottom-color 左 border-left-color 右 border-right-color ① ② ③ 値の単位について 各指示の単位は以下の表に相当します。 指示の単位 単位 ピクセル px [すべて同じにする]の チェックを必ず外す [すべて同じにする]の チェックを必ず外す

ホームページ作成検定 サンプル問題１級解答手順 ４８ レイアウト リスト ① ② 出題内容 プロパティ 値 ① 回り込み float none：なし left：左 right：右 ② 回り込み解除 clear left：左 right：右 both：両方 出題内容 プロパティ 値 ①リストマーク のタイプ list-style-type disc：黒丸 circle：白丸 square：四角 decimal：数字 lower-roman：ローマ数字（小文字） upper-roman：ローマ数字（大文字） none：非表示 ②リストマーク の画像 list-style-image none：非表示 url(XXX.xxx)：表示 ① ②

ホームページ作成検定 サンプル問題１級解答手順 ４９

■イメージマップの編集

＜処理条件＞ 画像挿入をしなさい。 画像“map.gif”（代替テキスト“開催場所の地図”） ※画像“map.gif”に下記の指示に基づいてイメージマップを作成しなさい。マップ名は（“map”）とする。 リンクの位置 ターゲット リンクページ 代替テキスト マップ中 アドレス例 なるみ小学校 7,72,112,112 新しいウィンドウ page1.html なるみ小学校ページ 来夢広場 132,117,228,155 新しいウィンドウ page2.html 来夢広場ページ （１） （２） （３） （４） 画像の上で右クリック［画像ツールバーの表示］をク リックし、画像ツールバーを表示させます。 ［矩形のホットスポット］ボタン をクリックします。 カーソルを画像に移動させると鉛筆の形になり、そのま まドラッグしてリンクする範囲を設定し[ハイパーリンク の編集]を表示させます。 [ハイパーリンクの編集]が表示されたら[ファイル、Web ページ]を選択し、リンク先の設定を行います。

ホームページ作成検定 サンプル問題１級解答手順 ５０ （５） （６） （７） （６） （７） [ターゲットフレーム]をクリックしターゲットフ レームのダイアログボックスを表示させます。 ［新しいウィンドウ］を選択し、［ＯＫ］をク リックします。［ハイパーリンクの編集］も［Ｏ Ｋ］をクリックし、ダイアログボックスを閉じま す。 リンクを設定した箇所にカーソルを合わせ右ク リックし[画像ホットスポットのプロパティ]を選択し ます。 [ハイパーリンクの編集]を表示させ、[ヒント設 定]をクリックし[ハイパーリンクのヒント設定] を表示させます。 [ヒントのテキスト]に代替テキストを入力し[ＯＫ] をクリックします。［ハイパーリンクの編集］も ［ＯＫ］をクリックし、ダイアログボックスを閉 じます。

ホームページ作成検定 サンプル問題１級解答手順 ５１

■フォームについて

＜処理条件＞ 文字入力、表挿入をしなさい。フォームの挿入をし、フォーム内に表挿入をしなさい。 参加フォーム 名前 ≪入力部品○Ａ≫ （フォームの挿入） 性別 ≪入力部品○Ｂ≫男≪入力部品○Ｃ≫女 連絡先 ≪入力部品○Ｄ_≫ コース ≪入力部品○Ｅ≫ ≪入力部品○Ｆ_{≫ ≪入力部品○}Ｇ_{≫ （表の枠表示）} ※ＣＧＩプログラムのパス名は、既定値もしくは未記入とする。データの転送方法は問わない。 ※表内○Ａ～○Ｇの入力部品は、下記の指示に基づいて作成しなさい。 入力 部品 種類 名前 属性 入力 部品 種類 名前 属性 ○Ａ _{テキスト name サイズ 30} ○Ｅ オプション メニュー kosu 選択肢 3 キロコース 値 3 ○Ｂ ラジオボタン sei 値 m 選択肢 6 キロコース 値 6 ○Ｃ 値 w ○Ｆ 送信ボタン ラベル 送信する ○Ｄ テキスト tel サイズ 45 ○Ｇ リセットボタン ラベル リセットする フォームの挿入 （１） （２） （３） メニューバー[挿入]の[HTML]の[その他の HTML タ グ]を選択します。 画面右側に[ツールボックス]が表示されるので、 [Form]をダブルクリック挿入します。 フォームが挿入されました。

ホームページ作成検定 サンプル問題１級解答手順 ５２ （４） 入力部品の挿入 （１） （２） （３） フォーム内に表挿入、文字入力します。 入力部品のテキストを挿入します。 挿 入 さ せ た い 場 所 に カ ー ソ ル を 移 動 し [ツ ー ル ボックス]から[Input（Text）]をダブルクリック し挿入します。 挿 入 さ れ た 入 力 部 品 を 右 ク リ ッ ク し [ フ ォ ー ム フィールドのプロパティ]をクリックし［テキス トボックスのプロパティ］を表示させます。 ※ 入 力 部 品 を ダ ブ ル ク リ ッ ク し て も [ テ キ ス ト ボックスのプロパティ]が表示されます。 フォーム内に文字入力をします。

ホームページ作成検定 サンプル問題１級解答手順 ５３ （４） （５） （６） （７） [テキストボックスのプロパティ]が表示されま す。[名前]と[文字の長さ]を入力し、[ＯＫ]をク リックします。 入力部品のラジオボタンを挿入します。 挿 入 さ せ た い 場 所 に カ ー ソ ル を 移 動 し [ツ ー ル ボックス]から[Input（Radio）]をダブルクリッ クし挿入します。 挿 入 さ れ た 入 力 部 品 を 右 ク リ ッ ク し [ フ ォ ー ム フィールドのプロパティ]をクリックします。 ※入力部品をダブルクリックしても[オプション ボタンのプロパティ]が表示されます。 [オプションボタンのプロパティ]が表示されま す。[グループ名]と[値]と[初期状態]を入力し、 [ＯＫ]をクリックします。 もう一つのラジオボタンも同様に設定を行いま す。

ホームページ作成検定 サンプル問題１級解答手順 ５４ （８） （９） （１０） 入力部品のテキストを挿入します。 挿 入 さ せ た い 場 所 に カ ー ソ ル を 移 動 し [ツ ー ル ボックス]から[Input（Text）]をダブルクリック し挿入し、（３）～（４）の手順で設定をしま す。 入力部品のオプションメニューを挿入します。 挿 入 さ せ た い 場 所 に カ ー ソ ル を 移 動 し [ツ ー ル ボックス]から[Drop-Down Box]をダブルクリック し挿入します。 挿 入 さ れ た 入 力 部 品 を 右 ク リ ッ ク し [ フ ォ ー ム フィールドのプロパティ]をクリックします。 ※入力部品をダブルクリックしても[ドロップダ ウンのプロパティ]が表示されます。

ホームページ作成検定 サンプル問題１級解答手順 ５５ （１１） （１２） （１３） （１４） [ドロップダウンのプロパティ]が表示されます。 [名前]を入力します。最初から選択肢に入ってい る設定を選択し[削除]をクリックします。 [追加]をクリックし、[選択肢の追加]のダイアロ グボックスを表示させます。 [選択肢の追加]のダイアログボックスが表示され たら[選択肢]の箇所に属性を入力し[値の指定]に チェックを入れ、値を入力します。[初期状態]は [選択された状態]にチェックをいれます。 もう一つのオプションメニューも（１０）～（１３） の手順で設定をします。 送信ボタンの入力部品を挿入させたい場所にカー ソルを移動し[ツールボックス]から[Input(Butto n)]をダブルクリックし挿入します。

ホームページ作成検定 サンプル問題１級解答手順 ５６ （１５） （１６） （１７） （１８） （１９） 挿 入 さ れ た 入 力 部 品 を 右 ク リ ッ ク し [ フ ォ ー ム フィールドのプロパティ]をクリックします。 ※入力部品をダブルクリックしても[ボタンのプ ロパティ]が表示されます。 [ボタンのプロパティ]のダイアログボックスが表 示されたら[名前]に表示されている文字を削除 し、[値/ラベル]に文字入力をします。[ボタンの 種類]を[送信]にチェックを入れ[ＯＫ]をクリッ クします。 リセットボタンも（１４）と同様に設定を行います。 挿 入 さ せ た い 場 所 に カ ー ソ ル を 移 動 し [ツ ー ル ボックス]から[Input(Button)]をダブルクリック し挿入します。 [名前]に表示されている文字を削除し、[値/ラベ ル]に文字入力をします。[ボタンの種類]を[リ セット]にチェックを入れ[ＯＫ]をクリックしま す。 すべての入力部品の設定が終わりました。 ブラウザー上で入力した文字がリセットボタンで リセットされるか確認をしてください。

ホームページ作成検定 サンプル問題１級解答手順 ５７

■JavaScript の挿入

＜処理条件＞ 文字入力をしなさい。 みどり公園 （スクリプト挿入） ※スクリプト挿入箇所に“JavaScript.txt”を基に日時表示のスクリプトを挿入しなさい。 （１）使用データフォルダ内の「JavaScript.txt」を開きます。 （２）JavaScript の構文を確認し、[コード]タブに切り替えて■で指示された場所にコピーして貼り付けをします。 （３）ソースを確認後、 をクリックしブラウザー上で動きを確認します。 ←<HEAD>～</HEAD>の間に挿入 ←<BODY>タグの中に挿入 ←表示させる場所に挿入 <BODY>タグの中に挿入するときに、以下の点に気を付けてください。 【正答】 <BODY.onLoad="formClock();"> ↑半角スペース 【誤答】 <BODYonLoad="formClock();"> ↑半角スペースがない <BODY・onLoad="formClock();"> ↑全角スペースが入っている ※BODY タグの中に挿入する場合には間に半角スペースを入れてください。

操作のポイント

み ど り 公 園 X XX\ HP3_受 験 番 号 _名 前 \in dex. htm l ※ブラウザー上で表示される日付はプレビューした 日にち、時間により異なります。

ホームページ作成検定 サンプル問題１級解答手順 ５８

■テキストファイルからの文章挿入

＜処理条件＞ 文字入力をしなさい。 店長より（見出し２） （文章挿入） ※文章挿入箇所に“notes.txt”を基に文章を挿入しなさい。 （１）使用データフォルダ内の「notes.txt」を開きます。 （２）挿入箇所を選択してコピーし、文章を貼り付けします。 ■ページ編集で文章を挿入する場合 ■HTML ソースで文章を挿入する場合

Microsoft Expression web 4 は米国 Microsoft Corporation の米国およびそのほかの国における登録商標または商標です。 Microsoft Corporation の許可を得て画面写真を使用しています。 その他、本書に登場する製品名は、一般に各開発メーカーの商標および登録商標です。 本文中には、 、®マークは明記しておりません。 コピーして 貼り付け コピーして貼り付け

ホームページ作成検定 サンプル問題１級解答手順 ５９

出題一覧表（作成ページ）

出題内容 要素 属性 ４級 ３級 ２級 １級 タイトル ページタイトル TITLE ○ ○ ○ ○ 文字 文字・記号の入力 P ○ ○ ○ ○ BR ○ ○ ○ ○ 文字サイズ FONT size ○ 文字色 FONT color ○ 太字 B ○ 斜体 I ○ 下線 U ○ 文字の配置（左揃え、中央揃え、右揃え） align ○ 水平線 区切り線（水平線）の挿入 HR ○ ○ ○ ○

背景 背景の設定 BODY background _bgcolor ○

画像 画像の挿入 IMG srcwidth height ○ ○ ○ ○ 画像の枠設定 IMG border ○ ○ ○ ○ 代替テキスト IMG alt ○ ○ ○ 画像の配置（左揃え、中央揃え、右揃え） align ○ イメージマップの編集 IMG usemap ○ MAP name AREA href target name shape coords alt 表 表 TABLE ○ ○ ○ ○ 表の枠設定 TABLE border ○ ○ ○ ○ 表の行 TR ○ ○ ○ ○ データセル TD ○ ○ ○ ○ セルの背景色 TD bgcolor ○ セルの配置 TD align ○ セルの結合 TD colspan rowspan ○ ○ ○ 見出し 見出し１から６ H1 H6 ○ ○ ○ リスト 番号付きリスト OL ○ ○ ○ 番号なしリスト UL ○ ○ ○ リスト項目 LI ○ ○ ○ リンク ページ間リンク A href="XXX.html" ○ ○ ○ ○ メールリンク A href="mailto:" ○ ○ ○ ラベルを付ける A name="ラベル名" ○ ○ ラベルへのリンク A href="#ラベル名" ○ ○ ＵＲＬへのリンク A href="http:" ○ ○ ターゲットリンク A target ○ ○ 各種ファイル A href="ファイル名" ○ マウスが上にあるリンク A :HOVER ○ ファイル ファイルの保存 ○ ○ ○ ○ ファイルの複製 ○ フォーム フォームの挿入 FORM ○ 1 行テキストボックス INPUT type="text" name size ○ ラジオボタン INPUT type="radio" name value ○

チェックボックス INPUT type="checkbox"name

value ○

送信ボタン INPUT type="submit" _value ○

リセットボタン INPUT type="reset" _value ○

プッシュボタン INPUT type="button" _value

複数行テキストボックス TEXTAREA name rows cols ○ リストボックス オプションメニュー SELECT name size ○ OPTION value 外部ファイルの利用 JavaScript ○ テキストファイル ○ ID・クラス ID の設定 id="ID 名" ○ クラスの設定 class="クラス名" ○ スタイルシートのリンク HTML ファイルにスタイルシートをリンク LINK rel="stylesheet" href type="text/css" ○ ○ ○

ホームページ作成検定 サンプル問題１級解答手順 ６０

出題一覧表（スタイルシートのプロパティ）

※３級はスタイルシートのリンクのみとし、プロパティの設定はしない。

出題内容 プロパティ 値 ３級 ２級 １級

文字

文字の属性：スタイル font-style normal：ふつう italic：斜体 ○ ○ ○ 文字の属性：太さ font-weight normal：ふつう bold：太い ○ ○ ○

文字サイズ font-size 数値で指定 ○ ○ ○

行間 line-height normal：ふつう

数値で指定 ○ ○ ○

文字飾り text-decoration none：なし underline：下線

overline：上線 line-through：取り消し線 ○

垂直方向の配置 vertical-align

baseline：ベースライン

top：上 middle：中央 bottom：下 数値で指定

○ ○ ○

水平方向の配置 text-align left：左 right：右 center：中央 ○ ○ ○ 文字色 color #XXXXXX もしくは rgb(XXX,XXX,XXX) ○ ○ ○ 背景 背景色 background-color #XXXXXX もしくは rgb(XXX,XXX,XXX) ○ ○ ○ 背景画像 background-image url(XXX.xxx) ○ ○ ○ 背景画像の属性 background-repeat repeat：繰り返す repeat-x：繰り返す（水平方向） repeat-y：繰り返す（垂直方向） no-repeat：繰り返さない ○ ○ ○

背景画像の位置 background-positiontop：上 bottom：下 center：中央

left：左 right：右 ○ マージン 上 margin-top 数値で指定 ○ 下 margin-bottom ○ 左 margin-left ○ 右 margin-right ○ ボーダー ボーダーの幅 上 border-top-width thin：薄い medium：標準 thick：厚い 数値で指定 ○ ○ ○ 下 border-bottom-width ○ ○ ○ 左 border-left-width ○ ○ ○ 右 border-right-width ○ ○ ○ ボーダーのスタイル 上 border-top-style none：なし dotted：点線 dashed：破線 solid：実線 double：二重線 ○ ○ ○ 下 border-bottom-style ○ ○ ○ 左 border-left-style ○ ○ ○ 右 border-right-style ○ ○ ○ ボーダーの色 上 border-top-color #XXXXXX もしくは rgb(XXX,XXX,XXX) ○ ○ ○ 下 border-bottom-color ○ ○ ○ 左 border-left-color ○ ○ ○ 右 border-right-color ○ ○ ○ パディング 上 padding-top 数値で指定 ○ 下 padding-bottom ○ 左 padding-left ○ 右 padding-right ○ リスト リストマークのタイプ list-style-type disc： 丸 circle：白丸 square：四角 decimal：数字 lower-roman：ローマ数字（小文字） upper-roman：ローマ数字（大文字） none： 表 ○ ○ ○ リストマークの画像 list-style-image none： 表 url(XXX.xxx)：表 ○ 位置

位置 position static：ふつう absolute：絶対的

relative：相対的 fixed：固定 ○ 回り込み float none：なし left：左 right：右 ○ 回り込み解除 clear left：左 right：右 both：両方 ○

左 left 数値で指定（position 設定時） ○

上 top 数値で指定（position 設定時） ○

幅 width 数値で指定 ○