第 7 章 Web クリエイター 能 力 認 定 試 験 初 級 Web クリエイタ 7-1. Web クリエイター 能 力 認 定 試 験 これは サーティファイ Web 利 用 技 術 認 定 委 員 会 が 実 施 している Web クリエイ ター 能 力 認 定 試 験 初 級 の 試 験 を 目 標 とする 教 材 である 教 科 書 として FOM 出 版 の よく わかるマスター Web クリエイター 能 力 認 定 試 験 初 級 公 認 テキスト& 問 題 集 改 訂 版 を 利 用 する このため 教 科 書 は 必 ず 購 入 すること この 教 科 書 には HTML と CSS の 初 歩 の 文 法 について 触 れるとともに Web クリエイ ター 能 力 認 定 試 験 初 級 の 過 去 問 が 収 録 されている 学 習 方 法 としては 教 科 書 添 付 の 過 去 問 題 を 解 き 知 識 を 向 上 させる 方 式 である 環 境 情 報 学 科 の 情 報 リテラシーでは 過 去 問 に 沿 って 授 業 を 展 開 する Web クリエイタ ー 能 力 認 定 試 験 を 目 指 さない 者 であっても 問 題 の 次 のページには 解 答 を 用 意 し 容 易 に 授 業 に 参 加 可 能 なように 考 慮 した この 認 定 試 験 では 8 個 の 規 定 問 題 ( 試 験 時 間 50 分 ) と 一 つの 自 由 問 題 ( 試 験 時 間 90 分 )が 出 題 される 環 境 情 報 学 科 では Web クリエイター 能 力 認 定 試 験 の 学 内 会 場 試 験 を 予 定 しているが 受 験 は 強 制 ではない 情 報 リテラシーの 成 績 評 価 としては 各 自 が 作 成 した Web の 発 表 を 求 め 評 価 する 各 自 の Web を 大 学 のサーバーに 構 築 することが 第 一 の 条 件 となる また Web の 記 述 条 件 については 後 段 において 述 べるが index.html と CSS を 利 用 することを 基 本 条 件 とす る この 講 義 では 全 員 が 購 入 した FOM 出 版 の よくわかるマスター Web クリエイター 能 力 認 定 試 験 初 級 公 認 テキスト& 問 題 集 改 訂 版 の 過 去 問 初 級 V パターンの 問 題 と 解 答 を 引 用 し 初 級 試 験 に 必 要 な 項 目 を 説 明 する (1) メモ 帳 による 編 集 作 業 メモ 帳 によりファイルを 編 集 するが デフォルトではウインドウの 右 端 を 越 えて 表 示 さ れ ウインドウを 右 へスクロールしないと 全 体 を 表 示 できない このため 書 式 か ら 右 端 で 折 り 返 す を ON とする( 図 7-0) 図 7-0 メモ 帳 の 設 定 136
(2) ファイルの 準 備 FOM 出 版 の よくわかるマスター Web クリエイター 能 力 認 定 試 験 初 級 公 認 テキ スト& 問 題 集 改 訂 版 に 添 付 された CD-ROM から 次 のファイルをコピーする 1 コピーするフォルダ CD-ROM の 中 の 第 2 回 (V パターン) をコピーする CD-ROM Web クリエイター 初 級 過 去 問 題 第 2 回 (V パターン) 2 コピー 先 各 自 の PC の C:ドライブに webcreator のフォルダーを 作 成 する フォルダ ーの 作 成 は ファイル エクスプローラーを 起 動 し コンピュータから C:ドライブ を 表 示 し 新 しいフォルダー をクリックし フォルダーを 作 る その 上 で フォル ダー 名 を webcreator へ 変 更 する (3) HTML の 用 語 要 素 Web ページを 構 成 する 様 々な 単 位 を 要 素 と 呼 ぶ タグ < >( 山 カッコ) で 囲 まれた 記 述 をタグと 呼 ぶ タグには 開 始 と 終 了 とのペアをな す 要 素 と 開 始 タグのみの 要 素 ( 空 要 素 )がある 終 了 タグには /(スラッシュ) が 付 く 属 性 と 値 要 素 に 追 加 する 情 報 を 属 性 と 呼 ぶ 属 性 は 開 始 タグの 中 に 記 述 し 属 性 の 前 には 半 角 スペースを 記 入 する 属 性 の 一 部 は 値 をともない 属 性 = 値 のように (ダ ブルクオーテーション) で 囲 む (4) HTML の 注 意 点 半 角 入 力 タグ 属 性 は 必 ず 半 角 で 記 述 する 大 文 字 と 小 文 字 の 区 別 半 角 英 字 の 大 文 字 と 小 文 字 の 区 別 はない 小 文 字 で 統 一 した 方 が 混 乱 しない インライン 要 素 とブロックレベル 要 素 137
要 素 として 一 つの 行 で 表 すインライン 要 素 と 一 つのまとまりで 機 能 するブロック レベル 要 素 がある インライン 要 素 は 必 ず ブロックレベル 要 素 の 内 側 に 記 述 す る 特 殊 記 号 HTML ではタグの 表 示 のため < >( 山 カッコ) を 利 用 しており 山 カッコなどの 特 殊 記 号 を 表 示 する 場 合 は 次 のような &(アンパサンド) で 始 まる 文 字 参 照 を 利 用 する 特 殊 な 記 号 や 文 字 読 み 文 字 参 照 半 角 空 白 スペース < 始 め 山 カッコ < > 閉 じ 山 カッコ > コピーライト R 登 録 商 標 トレードマーク ダブルクオーテーション " (5) HTML のファイル 名 半 角 英 数 字 と 小 文 字 HTML のファイル 名 には 必 ず 半 角 の 英 数 字 を 利 用 すること Web サーバーの 一 部 には ファイル 名 を 正 しく 認 識 しないものがある 空 白 と 記 号 は 禁 止 HTML のファイル 名 に 空 白 や 記 号 を 利 用 しない ただし _(アンダーバー) は 利 用 可 能 である 拡 張 子 は html 拡 張 しとして html と htm のいずれでも 良 いが 一 部 のプロバイダでは html を 条 件 とするものもある 混 乱 を 避 けるため html とすること トップページは index.html トップページを index.html とすると URL(ユニフォーム リソース ロケー た)の 指 定 の 際 に トップページの 記 述 を 省 略 できる すなわち http://www.edu.tuis.ac.jp/~e12xxxaa とすると http://www.edu.tuis.ac.jp/~312xxxaa/index.html へ 移 動 する 138
7-2. 規 定 問 題 (1) 規 定 問 題 1 フォルダー 問 題 1 の index.html と base.css をメモ 帳 で 開 き 以 下 の 指 示 に 従 い HTML ファイルと CSS ファイルを 完 成 させなさい 1 index.html のページタイトルに 受 験 番 号 (123456)を 半 角 で 表 示 しなさ い 2 base.css の body に 以 下 の 設 定 を 記 述 しなさい プロパティ 設 定 値 文 字 色 #0000ff( 青 ) 背 景 色 #ffccff( 淡 いピンク) 背 景 イメージ フォルダー images 内 の back.gif 3 index.html に CSS ファイル base.css への 参 照 を 設 定 しなさい index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css"> <h1> 京 都 の 花 案 内 </h1> <p> 桜 : 見 頃 /3 月 下 旬 ~4 月 中 旬 <br> 椿 : 見 頃 /4 月 上 旬 ~ 中 旬 <br> 牡 丹 : 見 頃 /4 月 中 旬 ~ 下 旬 </p> <p> 常 勝 寺 </p> <p> 拝 観 時 間 :8 時 30 分 ~17 時 <br> 拝 観 料 :300 円 <br> </p> base.css @charset "Shift_JIS"; body{ 139
規 定 問 題 1 解 答 (10 点 ) index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>123456</title> 3 href を 用 い <link>タグの 属 性 <h1> 京 都 の 花 案 内 </h1> が 正 しく 記 述 されている 2 点 <p> 桜 : 見 頃 /3 月 下 旬 ~4 月 中 旬 <br> 椿 : 見 頃 /4 月 上 旬 ~ 中 旬 <br> 1 受 験 番 号 が 半 角 で 入 力 され <title> 牡 丹 : 見 頃 /4 月 中 旬 ~ 下 旬 </p> <p> 常 勝 寺 </p> タグで 囲 まれている 2 点 <p> 拝 観 時 間 :8 時 30 分 ~17 時 <br> 拝 観 料 :300 円 <br> </p> base.css @charset "Shift_JIS"; body{ color:#0000ff; background-color:#ffccff; background-image:url("images/back.gif"); 2 body が 正 しく 記 述 されてい る 2 点 3 図 7-1 規 定 問 題 1 仕 上 がり 図 140
(2) 規 定 問 題 2 フォルダー 問 題 2 の index.html を 開 き 以 下 の 指 示 に 従 い HTML ファイル を 完 成 させなさい 1 文 字 列 ラーメン 激 戦 区 を 見 出 し1に 設 定 せよ 2 style 要 素 の h1 に 以 下 の 設 定 をせよ プロパティ 設 定 値 フォントサイズ 120 パーセント 文 字 色 #ff0000( 赤 ) 背 景 色 #ffff00( 黄 ) 3 style 要 素 にクラス bold を 追 加 し 以 下 の 設 定 を 記 述 しなさい プロパティ 設 定 値 文 字 列 の 太 さ 太 字 index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ --> </style> <title> 問 題 2</title> ラーメン 激 戦 区 <p> 新 宿 はラーメン 専 門 店 激 戦 区 の 街 として 知 られている <br> その 街 の 中 でも 名 代 ラーメン 大 洋 軒 は25 年 前 の 創 業 以 来 この 街 の 人 たちに 支 持 されている ここの 名 物 は 何 といってもチャーシュー <br> 厚 みのあるチャーシューが 惜 しげもなく 丼 の 表 面 を 覆 っている 麺 は 縮 れが 強 い 手 打 ち 麺 煮 干 のダシのきいたすっきりとした 後 味 のスープとの 相 性 も 抜 群 だ </p> 141
規 定 問 題 2 解 答 (12 点 ) index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ font-size:120%; color:#ff0000; background-color: #ffff00;.bold { font-weight:bold; --> </style> <title> 問 題 2</title> <h1>ラーメン 激 戦 区 </h1> 1 <h1>タグで 囲 む 2 点 2 3つの 設 定 2 点 3 クラス bold 2 点 4 <span>タグで 囲 み クラスを 指 定 2 点 <p> 新 宿 はラーメン 専 門 店 激 戦 区 の 街 として 知 られている <br> その 街 の 中 でも 名 代 ラーメン<span class="bold"> 大 洋 軒 </span>は25 年 前 の 創 業 以 来 こ の 街 の 人 たちに 支 持 されている ここの 名 物 は 何 といってもチャーシュー <br> 厚 みのあるチャーシ ューが 惜 しげもなく 丼 の 表 面 を 覆 っている 麺 は 縮 れが 強 い 手 打 ち 麺 煮 干 のダシのきいたすっ きりとした 後 味 のスープとの 相 性 も 抜 群 だ </p> 図 7-2 規 定 問 題 2の 仕 上 がり 図 142
(3) 規 定 問 題 3 フォルダー 問 題 3 の index.html を 開 き 以 下 の 指 示 に 従 い HTML ファイル を 完 成 させなさい 1 文 字 列 日 本 国 内 で 撮 影 した 宛 先 は 下 記 の 通 りです と 宛 先 : 東 京 都 (03)-1020-3040 までを それぞれ 段 落 に 設 定 しなさい 2 仕 上 がりイメージを 参 考 にして 見 出 し1 人 物 写 真 大 賞 と 段 落 宛 先 は 下 記 の 通 りです の 下 に 水 平 線 (2 本 )を 挿 入 しなさい 3 文 字 列 編 集 部 までお 送 りください どちらでも 構 いません 作 品 は 対 象 外 です 本 誌 誌 上 に 掲 載 いたします 千 代 田 区 1-1-1 人 物 写 真 係 の 後 ろに 段 落 を 作 成 しない 改 行 を 挿 入 せよ Index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 問 題 3</title> <h1> 人 物 写 真 大 賞 </h1> 日 本 国 内 で 撮 影 した 人 物 写 真 に 限 ります 風 景 が 主 体 となるポートレートや ペットの 写 真 など 人 物 の 範 疇 に 入 らない 写 真 は 対 象 外 となります あなたの 身 近 にいる 家 族 ご 近 所 の 名 物 おじさん 旅 先 で 見 かけたハッとするような 横 顔 あなたがいいなと 感 じた 人 が 見 せる 一 瞬 の 表 情 を 編 集 部 までお 送 りください 作 品 はカラーまたは 白 黒 のどちらでも 構 いません 他 のコンテストや 雑 誌 等 に 発 表 された 作 品 は 対 象 外 です 締 め 切 りは2007 年 3 月 31 日 上 位 入 賞 作 品 は 本 誌 誌 上 に 掲 載 いたします 沢 山 の 方 々のご 応 募 をお 待 ちしております 宛 先 は 下 記 の 通 りです 宛 先 : 東 京 都 千 代 田 区 1-1-1 月 刊 写 真 の 極 意 編 集 部 人 物 写 真 係 電 話 番 号 :(03)-1020-3040 図 7-3 規 定 問 題 3 143
規 定 問 題 3 解 答 (10 点 ) index.html 2 <hr>タグで <html lang="ja"> 水 平 線 2 点 1 <p>タグで 囲 む <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 2 点 <title> 問 題 3</title> <h1> 人 物 写 真 大 賞 </h1> <hr> <p> 日 本 国 内 で 撮 影 した 人 物 写 真 に 限 ります 風 景 が 主 体 となるポートレートや ペットの 写 真 など 人 物 の 範 疇 に 入 らない 写 真 は 対 象 外 となります あなたの 身 近 にいる 家 族 ご 近 所 の 名 物 おじさん 旅 先 で 見 かけたハッとするような 横 顔 あなたがいいなと 感 じた 人 が 見 せる 一 瞬 の 表 情 を 編 集 部 までお 送 りください <br> 作 品 はカラーまたは 白 黒 のどちらでも 構 いません <br> 他 のコンテストや 雑 誌 等 に 発 表 された 作 品 は 対 象 外 です <br> 締 め 切 りは2007 年 3 月 31 日 上 位 入 賞 作 品 は 本 誌 誌 上 に 掲 載 いたします <br> 沢 山 の 方 々のご 応 募 をお 待 ちしております 宛 先 は 下 記 の 通 りです </p> <hr> <p> 宛 先 : 東 京 都 千 代 田 区 1-1-1<br> 3 <br>タグを 後 ろに 入 れ 月 刊 写 真 の 極 意 編 集 部 人 物 写 真 係 <br> 改 行 で 囲 む 1 点 6 電 話 番 号 :(03)-1020-3040</p> 2 <p>タグで 囲 む 2 <hr>タグで 2 点 水 平 線 2 点 144
(4) 規 定 問 題 4 問 題 4 フォルダの index.html service.html を 開 き 以 下 の 指 示 に 従 い HTML ファイルを 完 成 させなさい 1 仕 上 がりイメージを 参 考 にして index.html の 文 字 列 おすすめオプション に service.html へのリンクを 設 定 しなさい 2 service.html の 文 字 列 部 屋 タイプ に 以 下 の 設 定 でマーカーを 設 定 しなさい 3 index.html の 文 字 列 こちらから に service.html のマーカー heya へのリンクを 設 定 しなさい 4 index.html の 文 字 列 E-mail をクリックしたときに メールアドレス seven@xxx.net へメールが 送 られるように 設 定 しなさい このメールアド レスは 仮 想 のものです 5 index.html の style 要 素 に 疑 似 クラス a:link a:visited a:hover a:active に 以 下 の 設 定 を 記 述 しなさい プロパティ 属 性 名 前 設 定 値 index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ font-size:140%; a:link{ a:visited{ a:hover{ a:active{ 設 定 値 heya 未 アクセスのリンク 部 分 の 文 字 色 #ff0000( 赤 色 ) 未 アクセスのリンク 部 分 の 背 景 色 #ffffff( 白 色 ) アクセス 済 のリンク 部 分 の 文 字 色 #006600( 濃 緑 ) アクセス 済 のリンク 部 分 の 背 景 色 #ffffff( 白 色 ) ポイント 時 のリンク 部 分 の 文 字 装 飾 #ffffff( 白 ) ポイント 時 のリンク 部 分 の 背 景 色 #ff0000( 赤 ) ポイント 時 のリンク 部 分 の 文 字 装 飾 なし クリック 時 のリンク 部 分 の 文 字 色 #990099( 紫 色 ) クリック 時 のリンク 部 分 の 背 景 色 #cccccc( 灰 色 ) 145
--> </style> <title> 問 題 4</title> <h1> 横 浜 ホテル ザ セブンシー </h1> <p> 横 浜 ベイエリアを 一 望 できる 眺 望 抜 群 のホテル <br> アールデコ 調 の 内 装 や 全 室 総 大 理 石 のバスルームなど 慌 しい 日 常 を 離 れ<br> 優 雅 な 雰 囲 気 の 中 でゆったりくつろいでみませんか </p> <p>12/29~1/3までの 間 に 宿 泊 のご 予 約 を 頂 いたお 客 様 には おすすめオプションもございます ぜひ ご 家 族 でお 越 し 下 さい <br> お 部 屋 のタイプはこちらからお 選 びいただけます </p> <p>ご 宿 泊 のご 予 約 は E-mailでもお 受 けいたしております </p> service.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ font-size:140%; h2{ font-size:120%; font-style: italic; h3 { font-size: 100%; text-decoration: underline; --> </style> <title> 問 題 4</title> <h1> 横 浜 ホテル ザ セブンシー </h1> <h2>おすすめoption</h2> <h3>ハーフシャンパンのルームサービス<br> +\7,246/1 本 </h3> <p> 人 気 の 銘 柄 モエ ドンペリニャンをルームサービスで <br> すっきりした 辛 口 のシャンパンは とっておきの 時 間 を<br> より 華 やかに 演 出 してくれるでしょう (2 名 様 から 注 文 可 )</p> <h3>24 時 間 ステイ(チェックイン/チェックアウト14:00)<br> +\2,000/1 名 </h3> <p> 通 常 15:00からのチェックインが14:00から 12:00までのチェックアウトが14:00まで 延 長 可 能 に <br> 146
横 浜 ベイエリアでのショッピングや ちょっと 足 をのばして 中 華 街 を 散 策 してもよし 時 間 を 有 効 に お 使 い 頂 けます </p> <h2> 部 屋 タイプ</h2> <h3>aタイプ</h3> <p>マイアミスタンダードダブルは キングサイズのベッドが <br> バスルームからは 海 も 眺 められます </p> <h3>bタイプ</h3> <p>グレードアップしたラグジュアリーダブルは 1 名 様 より\11,000~<br> キングサイズのベッドや 広 いリビングスペースが 好 評 です </p> <h3>cタイプ</h3> <p>バルコニーはもちろん バスルームの 窓 からも 外 が 眺 められるデラックスツインルーム <br> シックなインテリアが 配 された 空 間 は 広 々としています </p> 図 7-4a index.html 図 7-4b service.html のおすすめ 図 7-4c service.html の 部 屋 タイプ 147
規 定 問 題 4 解 答 (16 点 ) index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ font-size:140%; a:link{ color:#ff0000; background-color:#ffffff; a:visited{ color:#006600; background-color:#ffffff; a:hover{ color:#ffffff; background-color:#ff0000; text-decoration:none; a:active{ color:#990099; background-color:#cccccc; --> </style> <title> 問 題 4</title> 点 <h1> 横 浜 ホテル ザ セブンシー </h1> <p> 横 浜 ベイエリアを 一 望 できる 眺 望 抜 群 のホテル <br> アールデコ 調 の 内 装 や 全 室 総 大 理 石 のバスルームなど 慌 しい 日 常 を 離 れ<br> 優 雅 な 雰 囲 気 の 中 でゆったりくつろいでみませんか </p> <p>12/29~1/3までの 間 に 宿 泊 のご 予 約 を 頂 いたお 客 様 には <a href="service.html">おす すめオプション</a>もございます ぜひ ご 家 族 でお 越 し 下 さい <br> お 部 屋 のタイプは<a href="service.html#heya">こちらから</a>お 選 びいただけます </p> <p>ご 宿 泊 のご 予 約 は <a href="mailto:seven@xxx.net">e-mail</a>でもお 受 けいたしており ます </p> 3 <a href= service.html#heya >タブで 囲 む 2 点 1 <a href= service.html >タブで 囲 む 2 4 <a href= mailto:seven@xxx.net > タブ で 囲 む 2 点 5 疑 似 クラスの 文 字 色 背 景 色 を 設 定 する 2 点 4 148
service.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ font-size:140%; h2{ font-size:120%; font-style: italic; h3 { font-size: 100%; text-decoration: underline; --> </style> <title> 問 題 4</title> <h1> 横 浜 ホテル ザ セブンシー </h1> <h2>おすすめoption</h2> <h3>ハーフシャンパンのルームサービス<br> +\7,246/1 本 </h3> <p> 人 気 の 銘 柄 モエ ドンペリニャンをルームサービスで <br> すっきりした 辛 口 のシャンパンは とっておきの 時 間 を<br> より 華 やかに 演 出 してくれるでしょう (2 名 様 から 注 文 可 )</p> <h3>24 時 間 ステイ(チェックイン/チェックアウト14:00)<br> +\2,000/1 名 </h3> <p> 通 常 15:00からのチェックインが14:00から 12:00までのチェックアウトが14:00まで 延 長 可 能 に <br> 横 浜 ベイエリアでのショッピングや ちょっと 足 をのばして 中 華 街 を 散 策 してもよし 時 間 を 有 効 に お 使 い 頂 けます </p> <h2><a name="heya"> 部 屋 タイプ</a></h2> 2<a name= heya >で 囲 む 2 点 <h3>aタイプ</h3> <p>マイアミスタンダードダブルは キングサイズのベッドが <br> バスルームからは 海 も 眺 められます </p> <h3>bタイプ</h3> <p>グレードアップしたラグジュアリーダブルは 1 名 様 より\11,000~<br> キングサイズのベッドや 広 いリビングスペースが 好 評 です </p> <h3>cタイプ</h3> <p>バルコニーはもちろん バスルームの 窓 からも 外 が 眺 められるデラックスツインルーム <br> シックなインテリアが 配 された 空 間 は 広 々としています </p> 149
(5) 規 定 問 題 5 問 題 5の index.html を 開 き 以 下 の 指 示 に 従 い HTML ファイルを 完 成 させなさい 1 文 字 列 興 福 寺 五 重 塔 ( 高 校 の 修 学 旅 行 で) の 前 に フォルダ image のイメ ージ tera.jpg を 配 置 し 以 下 の 設 定 を 記 述 しなさい 属 性 イメージの 代 替 文 字 イメージの 幅 イメージの 高 さ 設 定 値 五 重 塔 235 ピクセル 250 ピクセル 2 style 要 素 に img を 追 加 し 以 下 の 設 定 を 記 述 しなさい プロパティ マージン( 右 ) 設 定 値 30 ピクセル index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- --> </style> <title> 問 題 5</title> <p> 興 福 寺 五 重 塔 ( 高 校 の 修 学 旅 行 で)</p> 150
規 定 問 題 5 解 答 (8 点 ) index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- img{ margin-right:15px; 2style 要 素 に img を 追 加 3 点 --> </style> 1 <img>タグの 挿 入 5 点 <title> 問 題 5</title> <p><img src="images/tera.jpg" alt=" 五 重 塔 " width="235" height="250"> 興 福 寺 五 重 塔 ( 高 校 の 修 学 旅 行 で)</p> 図 7-5 規 定 問 題 仕 上 がり 図 151
(6) 規 定 問 題 6 問 題 6の index.html を 開 き 以 下 の 指 示 に 従 い HTML ファイルを 完 成 させなさい 1 文 字 列 湯 を 沸 かして になったら 取 り 出 す を 番 号 付 きリストに 設 定 し なさい 2 次 の 文 字 列 をそれぞれリストの 項 目 に 設 定 せよ 湯 を 沸 かして 酢 塩 を 入 れる 卵 を 静 かに 湯 に 割 りいれる 卵 白 をまとめながらゆでる 半 熟 状 になったら 取 り 出 す index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 問 題 6</title> <h1>ポーチドエッグの 作 り 方 </h1> 湯 を 沸 かして 酢 塩 を 入 れる 卵 を 静 かに 湯 に 割 り 入 れる 卵 白 をまとめながらゆでる 半 熟 状 になったら 取 り 出 す 152
規 定 問 題 6 解 答 (6 点 ) index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 問 題 6</title> 1 <ol>タグで 全 体 を 囲 む 2 点 <h1>ポーチドエッグの 作 り 方 </h1> <ol> <li> 湯 を 沸 かして 酢 塩 を 入 れる </li> <li> 卵 を 静 かに 湯 に 割 り 入 れる </li> <li> 卵 白 をまとめながらゆでる </li> 2<li>タグで 4 項 目 を 囲 む <li> 半 熟 状 になったら 取 り 出 す </li> 1 点 4 </ol> 図 7-6 規 定 問 題 6 仕 上 がり 図 153
(7) 規 定 問 題 7 問 題 7の index.html を 開 き 以 下 の 指 示 に 従 い HTML ファイルを 完 成 させなさい 1 仕 上 がりイメージを 参 考 にして 2 行 4 列 のテーブルを 作 成 し 文 字 列 を 配 置 しなさい 1 行 目 は 見 出 しセルにすること 2 仕 上 がり 図 を 参 考 にして テーブルタイトルに 曜 日 別 サークル を 設 定 せよ 3 style 要 素 に table に 以 下 の 設 定 を 記 述 しなさい プロパティ 設 定 値 枠 線 のスタイル double( 二 重 線 ) 枠 線 の 幅 2 ピクセル 枠 線 の 色 #000000( 黒 ) 4 style 要 素 に th に 以 下 の 設 定 を 記 述 しなさい プロパティ 設 定 値 文 字 色 #990000( 赤 茶 色 ) 背 景 色 #ffff00( 黄 色 ) 幅 150 ピクセル 5 style 要 素 に td を 追 加 し 以 下 の 設 定 を 記 述 しなさい プロパティ 設 定 値 水 平 方 向 位 置 中 央 index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ font-size:large; table{ th{ td{ --> </style> <title> 問 題 7</title> <h1> 公 民 館 利 用 サークル</h1> 154
規 定 問 題 7 解 答 (22 点 ) index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h1{ 3 style 要 素 の table を 記 述 す font-size:large; る 6 点 table{ border-style:double; border-width:2px; border-color:#000000; 4 style 要 素 の th を 記 述 する 6 点 th{ color:#990000; background-color:#ffff00; width:150px; 4 style 要 素 の td を 記 述 する 2 点 td{ text-align:center; --> </style> 2 テーブルタイトル <title> 問 題 7</title> を 置 く 2 点 <h1> 公 民 館 利 用 サークル</h1> <table> <caption> 曜 日 別 サークル</caption> <tr> <th> 月 曜 日 </th> <th> 火 曜 日 </th> <th> 木 曜 日 </th> <th> 土 曜 日 </th> </tr> <tr> 1 2 行 4 列 のテーブ <td>フラダンス 日 本 舞 踊 </td> ルを 作 成 する 4 点 <td> 手 話 陶 芸 </td> <td> 和 太 鼓 コーラス</td> 1 行 目 に 見 出 しセ <td> 卓 球 ヨガ</td> </tr> ルを 置 く 2 点 </table> 図 7-7 規 定 問 題 委 7 仕 上 がり 図 155
(8) 規 定 問 題 8 問 題 8の index.html を 開 き 以 下 の 指 示 に 従 い HTML ファイルを 完 成 させなさい 1 style 要 素 のクラス left に 以 下 の 設 定 を 記 述 しなさい プロパティ 設 定 値 幅 350 ピクセル 高 さ 320 ピクセル 回 り 込 みの 指 定 左 2 style 要 素 のクラス right に 以 下 の 設 定 を 記 述 しなさい プロパティ 設 定 値 マージン( 左 ) 370 ピクセル 幅 200 ピクセル 高 さ 320 ピクセル 3 仕 上 がりイメージを 参 考 にして 段 落 日 本 を 代 表 するオペラ 団 体 か ら 段 落 やみつきになることもあるのだ までに クラス left を 設 定 しなさい 4 仕 上 がりイメージを 参 考 にして 見 出 し2 演 目 から 段 落 構 成 文 / 月 刊 オ ペラ までに クラス right を 設 定 しなさい 図 7-8 規 定 問 題 8 仕 上 がり 図 156
Index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h2 { font-size: large;.left{ color:#000000; background-color:#ffcc99;.right{ color:#000000; background-color:#ccffff; --> </style> <title> 問 題 8</title> <h1>オペラ 公 演 </h1> <div> <p> 日 本 を 代 表 するオペラ 団 体 五 期 会 の 公 演 主 役 は 今 回 が 本 格 的 なオペラデビュー となる 小 山 由 美 子 と 昨 年 ベルギー 国 際 コンクールで2 位 に 輝 いたプリマ 大 下 美 穂 子 演 出 家 生 活 半 世 紀 の 桃 山 正 春 の 舞 台 は 日 本 の 様 式 美 を 徹 底 的 に 追 求 したもので 見 ていて 安 心 </p> <h2>=オペラの 楽 しみ 方 =</h2> <p>ほとんどのオペラは 男 女 の 愛 の 物 語 ドラマの 展 開 を 味 わい 圧 倒 的 な 声 の 力 を 堪 能 するには 物 語 が 分 かりやすく 耳 に 馴 染 みがある 音 楽 の 演 目 がよいかもしれない また 事 前 に 物 語 を 把 握 しておくと より 分 かりやすい オペラは 好 きでも 演 奏 会 には 行 かない 人 も 多 いが 実 際 に 足 を 運 べば やみつきになることもあるのだ </p> </div> <div> <h2> 演 目 </h2> <p> バン ジョバンニ <br> 桜 姫 <br> ワリキュール </p> <h2> 公 演 日 </h2> <p>6 月 14 日 ( 水 )~23 日 ( 金 )</p> <p> 構 成 文 / 月 刊 オペラ</p> </div> 157
規 定 問 題 8 解 答 (16 点 ) index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- h2 { font-size: large;.left{ color:#000000; background-color:#ffcc99; padding:10px; width:350px; height:320px; float:left;.right{ color:#000000; background-color:#ccffff; padding:10px; margin-left:370px; width:200px; height:320px; --> </style> <title> 問 題 8</title> <h1>オペラ 公 演 </h1> <div class="left"> <p> 日 本 を 代 表 するオペラ 団 体 五 期 会 の 公 演 主 役 は 今 回 が 本 格 的 なオペラデビュー となる 小 山 由 美 子 と 昨 年 ベルギー 国 際 コンクールで2 位 に 輝 いたプリマ 大 下 美 穂 子 演 出 家 生 活 半 世 紀 の 桃 山 正 春 の 舞 台 は 日 本 の 様 式 美 を 徹 底 的 に 追 求 したもので 見 ていて 安 心 </p> <h2>=オペラの 楽 しみ 方 =</h2> <p>ほとんどのオペラは 男 女 の 愛 の 物 語 ドラマの 展 開 を 味 わい 圧 倒 的 な 声 の 力 を 堪 能 するには 物 語 が 分 かりやすく 耳 に 馴 染 みがある 音 楽 の 演 目 がよいかもしれない また 事 前 に 物 語 を 把 握 しておくと より 分 かりやすい オペラは 好 きでも 演 奏 会 には 行 かない 人 も 多 いが 実 際 に 足 を 運 べば やみつきになることもあるのだ </p> </div> <div class="right"> <h2> 演 目 </h2> <p> バン ジョバンニ <br> 桜 姫 <br> ワリキュール </p> <h2> 公 演 日 </h2> <p>6 月 14 日 ( 水 )~23 日 ( 金 )</p> <p> 構 成 文 / 月 刊 オペラ</p> </div> 158 1 クラス left に 指 定 の 値 を 記 入 する 6 点 2 クラス right に 指 定 の 値 を 記 入 する 6 点 3 クラス left の 設 定 2 点 4 クラス right の 設 定 2 点
7-3 自 由 問 題 (1) 問 題 以 下 の 仕 様 を 読 み Web ページを 完 成 させなさい テーマ 犬 専 用 のショップ&ホテルの Web のイメージである トップページ には イメージとサイトのナビゲーションを 載 せる ショップ 案 内 のページでは イメージ 写 真 と 取 り 扱 い 商 品 を 載 せる ホテル 案 内 のページでは 愛 犬 を 預 かる 場 合 の 基 本 料 金 を 載 せる 会 社 案 内 のページでは 会 社 の 概 要 と 周 辺 地 図 を 掲 載 する ページ 構 成 トップページから 各 ページへリンクを 張 ること また スタイルシートのファイルを 別 途 設 定 すること トップページ index.html style.css スタイルシート チョコレートの 効 能 店 舗 案 内 effect.html チョコレートに 合 う 飲 み 物 shop.html drinks.html 159
(2) CSS ファイル(style.css)の 仕 様 と 解 説 ファイルとして 与 えられる style.css @charset "Shift_JIS"; /* 全 ページ 共 通 のデザイン 用 */ body{ h1{ h2{ li{ /* リンク 部 分 のデザイン 用 */ a{ a:hover{ /* テーブルのデザイン 用 */ caption{ th { td { /* 配 置 レイアウト 用 */.page{.cent{.exp{.lead{ 160
(3) CSS ファイル style.css の /* 全 ページ 共 通 のデザイン 用 */ に 以 下 のスタイ ルを 記 述 しなさい 1 ページ 本 文 (セレクタ: 要 素 body ) 文 字 色 背 景 色 #990000 #ffccff 背 景 イメージ back.jpg 2 見 出 し1(セレクタ: 要 素 h1 ) フォントの 種 類 MS ゴシック, Osaka- 等 幅 フォントサイズ 150 パーセント MS ゴシック は 全 角 MS と ゴシック の 間 に 半 角 スペース Osaka は 半 角 は 全 角 のマイナス 3 見 出 し2(セレクタ: 要 素 h2 ) フォントの 種 類 MS P 明 朝, 細 明 朝 体, ヒラギノ 明 朝 Pro W3 フォントサイズ 120 パーセント MS P は 全 角 MS と P の 間 に 半 角 スペース ヒラギノ は 全 角 Pro W3 は 半 角 Pro の 前 後 に 半 角 スペース 4 リスト 項 目 (セレクタ: 要 素 li ) マージン( 左 ) フォントサイズ 15 ピクセル 120 パーセント 161
/* 全 ページ 共 通 のデザイン 用 */ 解 答 (15 点 ) @charset "Shift_JIS"; /* 全 ページ 共 通 のデザイン 用 */ body{ color:#990000; 1 ページ 本 文 background-color:#ffccff; background-image:url("images/back.jpg"); h1{ 2 見 出 し1 font-family:"ms ゴシック","Osaka- 等 幅 "; font-size:150%; h2{ font-family:"ms P 明 朝 "," 細 明 朝 体 ","ヒラギノ 明 朝 Pro W3"; font-size:120%; 3 見 出 し2 li{ margin:15px; 4 リスト 項 目 font-size:120%; 162
(4) CSS ファイル style.css の /*リンク 部 分 のデザイン 用 */ に 以 下 のスタイル を 記 述 しなさい (ア) リンク 部 分 (セレクタ: 要 素 a ) 文 字 色 背 景 色 #ffffff #663300 (イ) ポイント 時 のリンク 部 分 (セレクタ: 疑 似 クラス a:hover ) 文 字 色 背 景 色 #ffffff #663300 文 字 列 の 太 さ 太 字 文 字 装 飾 なし /* リンク 部 分 のデザイン 用 */ 解 答 (3 点 ) /* リンク 部 分 のデザイン 用 */ a{ color:#ffffff; background-color:#663300; a:hover{ color:#ffffff; background-color:#663300; font-weight:bold; text-decoration:none; 1 リンク 部 2 ポイント 時 のリンク 部 163
(5) CSS ファイル style.css の /*テーブルのデザイン 用 */ に 以 下 のスタイルを 記 述 しなさい (ア) テーブルのタイトル(セレクタ: 要 素 caption ) フォントの 種 類 MS ゴシック, Osaka- 等 幅 フォントサイズ 120 パーセント 文 字 列 の 太 さ 太 字 MS ゴシック は 全 角 MS と ゴシック の 間 に 半 角 スペース Osaka は 半 角 は 全 角 のマイナス (イ) 見 出 しセル(セレクタ: 要 素 th ) 枠 線 のスタイル solid( 実 線 ) 枠 線 の 太 さ 1ピクセル 枠 線 の 色 #000000 内 容 と 枠 線 の 間 隔 5 ピクセル 幅 30 パーセント 水 平 方 向 位 置 左 (ウ) セル(セレクタ: 要 素 td ) 枠 線 のスタイル solid( 実 線 ) 枠 線 の 太 さ 1ピクセル 枠 線 の 色 #000000 内 容 と 枠 線 の 間 隔 5 ピクセル /* テーブルのデザイン 用 */ 解 答 (9 点 ) /* テーブルのデザイン 用 */ caption{ font-family:"ms ゴシック","Osaka- 等 幅 "; font-size:120%; font-weight:bold; th{ border-style:solid; border-width:1px; border-color:#000000; padding:5px; width:30%; text-align:left; td{ border-style:solid; 1 テーブルのタイトル caption 2 見 出 しセル th border-width:1px; border-color:#000000; padding:5px; 3 セル td 164
(6) CSS ファイル style.css の /* 配 置 レイアウト 用 */ に 以 下 のスタイルを 記 述 しなさい (ア) ページ(セレクタ:クラス page ) 幅 600 ピクセル (イ) 一 部 の 要 素 (セレクタ:クラス cent ) 水 平 方 向 位 置 中 央 (ウ) 一 部 の 要 素 (セレクタ:クラス exp ) フォントの 種 類 MS P 明 朝, 細 明 朝 体, ヒラギノ 明 朝 Pro W3 フォントサイズ medium マージン( 左 ) 10 ピクセル MS P は 全 角 MS と P の 間 に 半 角 スペース ヒラギノ は 全 角 Pro W3 は 半 角 Pro の 前 後 に 半 角 スペース (エ) 一 部 の 要 素 (セレクタ:クラス lead ) フォントサイズ マージン( 右 ) 文 字 列 の 太 さ 幅 120 パーセント 10 ピクセル 太 字 580 ピクセル /* 配 置 レイアウト 用 */ 解 答 (4 点 ) /* 配 置 レイアウト 用 */.page{ width:600px;.cent{ text-align:center;.exp{ font-family:"ms P 明 朝 "," 細 明 朝 体 ","ヒラギノ 明 朝 Pro W3"; font-size:medium; margin-left:10px;.lead{ font-size:120%; margin-left:10px; font-weight:bold; width:580px; 1 ページ クラス page 2 クラス cent 3 クラス exp 4 クラス lead 165
(7) トップページ(index.html)の 仕 様 と 解 説 B A ファイルとして 与 えられる index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css"> チョコレートは 大 人 から 子 供 まで 幅 広 く 食 べられているものです ここではその 身 近 なチョコレートをもっと 知 ってもらう 為 に チョコレートのもつ 驚 きの 健 康 パワーや チョコレートに 合 う 意 外 な 飲 み 物 を 紹 介 します <p> 誕 生 日 ケーキ 等 のご 予 約 はこちらから </p> 1 CSS ファイルへの 参 照 を 設 定 CSS ファイル style.css 2 ページのタイトルを 設 定 タイトル チョコレートの 部 屋 トップページ 3 仕 上 がり 図 を 参 考 にして イメージ title.jpg を 配 置 代 替 文 字 タイトル 幅 600 ピクセル 高 さ 40 ピクセル 166
4 仕 上 がり 図 を 参 考 にして 文 字 列 チョコレートは 飲 み 物 を 紹 介 します を 段 落 に 設 定 し クラス lead を 設 定 必 要 に 応 じて 段 落 を 分 けない 改 行 を 挿 入 すること 5 仕 上 がり 図 を 参 考 にして イメージ top_icon.jpg を 配 置 し 段 落 に 設 定 代 替 文 字 アイコン 幅 278 ピクセル 高 さ 278 ピクセル 6 仕 上 がり 図 を 参 考 にして イメージ effect_bt.jpg drink_bt.jpg shop_bt.jpg を 配 置 し 3つのイメージを 一 つの 段 落 に 設 定 イメージ effect_bt.jpg 代 替 文 字 効 果 幅 120ピクセル 高 さ 60ピクセル イメージ drink_bt.jpg 代 替 文 字 幅 高 さ 飲 み 物 120ピクセル 60ピクセル イメージ shop_bt.jpg 代 替 文 字 幅 高 さ 店 舗 120ピクセル 60ピクセル 7 イメージ effect_bt.jpg drink_bt.jpg shop_bt.jpg にリンクを 設 定 イメージ effect_bt.jpg リンク 先 : effect.html イメージ drink_bt.jpg リンク 先 : drinks.html イメージ shop_bt.jpg リンク 先 : shop.html 8 仕 上 がり 図 を 参 考 にして 文 字 列 こちらから にリンクを 設 定 ただし メー ルアドレス chocola@xxx.net は 仮 想 のアドレスである リンク 先 メールアドレス chocola@xxx.net にメールが 送 られる 9 ページ 内 容 ( 仕 上 がり 図 の B)にクラス cent を 設 定 10 ページ 本 文 全 体 ( 仕 上 がり 図 の A)にクラス page を 設 定 167
index.html の 解 答 1 ページのタイトル <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>チョコレートの 部 屋 トップページ</title> <div class="page"> <img src="images/title.jpg" alt="タイトル" width="600" height="40"> <div class="cent"> 5 クラス cent <p class="lead">チョコレートは 大 人 から 子 供 まで 幅 広 く 食 べられているものです <br> ここではその 身 近 なチョコレートをもっと 知 ってもらう 為 に <br> チョコレートのもつ 驚 きの 健 康 パワーや チョコレートに 合 う<br> 意 外 な 飲 み 物 を 紹 介 します </p> 7 イメージ top_icon.jpg <p><img src="images/top_icon.jpg" alt="アイコン" width="278" height="278"></p> <p> <a href="effect.html"><img src="images/effect_bt.jpg" alt=" 効 果 " width="120" height="60"></a> <a href="drinks.html"><img src="images/drink_bt.jpg" alt=" 飲 み 物 " width="120" height="60"></a> <a href="shop.html"><img src="images/shop_bt.jpg" alt=" 店 舗 " width="120" height="60"></a> </p> <p> 誕 生 日 ケーキ 等 のご 予 約 は<a href="mailto:chocola@xxx.net">こちらから</a> </p> </div> </div> 3 クラス page 2 CSS ファイルへリンク 4 title.jpg の 配 置 6 クラス lead 8 イメージ 9 リンク 10 メールへのリンク 168
(8) チョコレートの 効 能 ページ(effect.html)の 仕 様 と 解 説 ファイルとして 与 えられる effect.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css"> チョコレートの 効 能 動 脈 硬 化 予 防 チョコレートの 中 に 含 まれるポリフェノールは 活 性 酸 素 による 障 害 を 防 ぐといわれてお り これが 動 脈 硬 化 にいい 働 きをするのです 集 中 力 記 憶 力 アップチョコレートの 甘 い 香 りには 集 中 力 や 記 憶 力 を 高 める 効 果 があります 試 験 前 などにうまく 活 用 してみるのもいいでしょう 虫 歯 予 防 甘 いものを 食 べると 虫 歯 になる と 思 われていますが チョコレートには 主 成 分 のカカオマス に 含 まれる 物 質 が 虫 歯 の 原 因 歯 垢 を 強 力 に 抑 え 虫 歯 になるのを 防 いでいます ミネラル 食 物 繊 維 がとれるチョコレートの 原 料 であるカカオ 豆 にはカルシウム 鉄 マグネシウム 亜 鉛 などのミネラルがバランスよく 含 まれています 特 に 女 性 が 不 足 しがちな 鉄 分 も 補 うことができ 食 物 繊 維 が 多 く 含 まれている 点 も 見 逃 せません Q.いつ 食 べたらよいでしょうか? A. 試 験 前 に 食 べるなら 1 時 間 前 に チョコレートを 食 べると 食 後 だいたい1 時 間 で 血 糖 値 や 抗 酸 化 作 用 のピークを 迎 え 2 時 間 後 には 徐 々に 下 がっていきます そのことから 食 べるタイミングは 試 験 の 始 まる1 時 間 前 がいいでしょう 1 CSS ファイルへの 参 照 を 設 定 CSS ファイル style.css 2 ページのタイトルを 設 定 タイトル チョコレートの 部 屋 効 能 169
3 仕 上 がり 図 を 参 考 にして イメージ title.jpg を 配 置 代 替 文 字 タイトル 幅 600 ピクセル 高 さ 40 ピクセル 4 仕 上 がり 図 を 参 考 にして 文 字 列 チョコレートの 効 能 を 見 出 し1に 設 定 5 仕 上 がり 図 を 参 考 にして 4 行 2 列 のテーブルを 作 成 し 各 セルに 文 字 列 を 配 置 する なお 1 列 目 のセルを 見 出 しセルにすること 6 仕 上 がり 図 を 参 考 にして テーブルタイトルを 入 力 して 配 置 テーブルタイトル チョコレートにはこんな 効 能 があります 7 仕 上 がり 図 を 参 考 にして 文 字 列 Q.いつ 食 べたらよいでしょうか? A. 試 験 前 に 食 べるなら 1 時 間 前 に をそれぞれ 見 出 し2に 設 定 8 文 字 列 チョコレートを 食 べると 1 時 間 前 がいいでしょう を 段 落 に 設 定 し クラス exp を 設 定 必 要 に 応 じて 段 落 に 分 けない 改 行 を 挿 入 すること 9 ページ 本 文 全 体 ( 仕 上 がり 図 )にクラス page を 設 定 170
effect.html 解 答 <html lang="ja"> 1 style.css へのリンク <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> 2 ページタイ <link rel="stylesheet" type="text/css" href="style.css"> トル <title>チョコレートの 部 屋 効 能 </title> 3 クラス page 4 title.jpg の 配 置 <div class="page"> <img src="images/title.jpg" alt="タイトル" width="600" height="40"> <h1>チョコレートの 効 能 </h1> 5 見 出 し1 <table> 6 4 行 2 列 テーブル 7 テーブルタイトル <caption>チョコレートにはこんな 効 能 があります </caption> <tr><th> 動 脈 硬 化 予 防 </th><td>チョコレートの 中 に 含 まれるポリフェノールは 活 性 酸 素 によ る 障 害 を 防 ぐといわれており これが 動 脈 硬 化 にいい 働 きをするのです </td></tr> <tr><th> 集 中 力 記 憶 力 アップ</th><td>チョコレートの 甘 い 香 りには 集 中 力 や 記 憶 力 を 高 める 効 果 があります 試 験 前 などにうまく 活 用 してみるのもいいでしょう </td></tr> <tr><th> 虫 歯 予 防 </th><td> 甘 いものを 食 べると 虫 歯 になる と 思 われていますが チョコレート には 主 成 分 のカカオマスに 含 まれる 物 質 が 虫 歯 の 原 因 歯 垢 を 強 力 に 抑 え 虫 歯 になるのを 防 いでいます </td></tr> <tr><th>ミネラル 食 物 繊 維 がとれる</th><td>チョコレートの 原 料 であるカカオ 豆 にはカルシウム 鉄 マグネシウム 亜 鉛 などのミネラルがバランスよく 含 まれています 特 に 女 性 が 不 足 しがちな 鉄 分 も 補 うことができ 食 物 繊 維 が 多 く 含 まれている 点 も 見 逃 せません </td></tr> </table> 8 見 出 し2 <h2>q.いつ 食 べたらよいでしょうか?</h2> <h2>a. 試 験 前 に 食 べるなら 1 時 間 前 に </h2> <p class="exp">チョコレートを 食 べると 食 後 だいたい1 時 間 で 血 糖 値 や 抗 酸 化 作 用 のピーク を 迎 え <br> 9 クラス exp 2 時 間 後 には 徐 々に 下 がっていきます <br> そのことから 食 べるタイミングは 試 験 の 始 まる1 時 間 前 がいいでしょう </p> </div> 171
(9) チョコレートに 会 う 飲 み 物 ページ(drinks.html)の 仕 様 と 解 説 ファイルとして 与 えられる drinks.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css"> 意 外 と 合 う?お 酒 のつまみにチョコレート ビターチョコレート 相 性 のいい 飲 み 物 ビール, 赤 ワイン,シャンパン ミルクチョコレート 相 性 のいい 飲 み 物 ウィスキー ブランデー カクテル ホワイトチョコ 相 性 のいい 飲 み 物 焼 酎 白 ワイン チョコレートは 基 本 的 に コーヒー 紅 茶 とも 合 うと 言 われています ちょっと 変 り 種 としてはココア 入 りコーヒー(ミルクココアとコーヒーを 同 量 ずつ 入 れたもの)も 合 います 試 してみて 下 さい 1 CSS ファイルへの 参 照 を 設 定 CSS ファイル style.css 2 ページのタイトルを 設 定 タイトル チョコレートの 部 屋 飲 み 物 172
3 仕 上 がり 図 を 参 考 にして イメージ title.jpg を 配 置 代 替 文 字 タイトル 幅 600 ピクセル 高 さ 40 ピクセル 4 仕 上 がり 図 を 参 考 にして 文 字 列 意 外 と 合 う? つまみにチョコレート の 前 にイメージ heart.gif を 配 置 し イメージと 文 字 列 を 一 つの 見 出 し1に 設 定 代 替 文 字 ハートマーク 幅 32 ピクセル 高 さ 30 ピクセル 5 仕 上 がり 図 を 参 考 にして 文 字 列 ビターチョコレート 焼 酎 白 ワイン を 行 頭 記 号 付 きリストに 設 定 6 仕 上 がり 図 を 参 考 にして 次 の 文 字 列 をリストの 項 目 に 設 定 ビターチョコレート シャンパン ミルクチョコレート カクテル ホワイトチョコレート 白 ワイン 7 仕 上 がり 図 を 参 考 にして イメージ cocktail.gif を 配 置 し 段 落 に 設 定 して ク ラス cent を 設 定 代 替 文 字 カクテル 幅 500 ピクセル 高 さ 273 ピクセル 8 仕 上 がり 図 を 参 考 にして 文 字 列 チョコレートは 試 してみてください を 段 落 に 設 定 し クラス cent を 設 定 必 要 に 応 じて 段 落 を 分 けない 改 行 を 挿 入 すること 9 ページ 本 文 全 体 ( 仕 上 がり 図 )にクラス page を 設 定 173
drinks.html 解 答 1 style.css へのリンク <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>チョコレートの 部 屋 飲 み 物 </title> 2 ページのタイトル 3 クラス page 4 title.jpg の 配 置 <div class="page"> <img src="images/title.jpg" alt="タイトル" width="600" height="40"> <h1><img src="images/heart.gif" alt="ハートマーク" width="32" height="30"> 意 外 と 合 う?お 酒 のつまみにチョコレート</h1> <ul> <li>ビターチョコレート<br> 相 性 のいい 飲 み 物 ビール, 赤 ワイン,シャンパン</li> <li>ミルクチョコレート<br> 相 性 のいい 飲 み 物 ウィスキー ブランデー カクテル</li> <li>ホワイトチョコ<br> 5 heart.jpg の 配 置 と 見 出 し1 6 行 頭 記 号 付 きリスト 7 リスト 項 目 相 性 のいい 飲 み 物 焼 酎 白 ワイン</li> 8 イメージは 位 置 とクラス cent </ul> <p class="cent"><img src="images/cocktail.gif" alt="カクテル" width="500" height="273"></p> <p class="cent">チョコレートは 基 本 的 に コーヒー 紅 茶 とも 合 うと 言 われています <br> ちょっと 変 り 種 としてはココア 入 りコーヒー(ミルクココアとコーヒーを<br> 同 量 ずつ 入 れたもの)も 合 います 試 してみて 下 さい </p> </div> 9 段 落 設 定 とクラス cent 174
(10) 会 社 案 内 ページ(shop.html)の 仕 様 と 解 説 ファイルとして 与 えられる shop.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css"> 本 格 的 なチョコレートを 味 わいたいなら このお 店 店 内 にはゆっくりくつろげるカフェもございます ぜひ お 越 し 下 さい ボーヌ ド ショコラ 地 下 鉄 千 代 田 線 茂 木 公 園 南 口 を 直 進 徒 歩 7 分 住 所 : 東 京 都 渋 谷 区 神 明 1-2-3 TEL:03-1234-5678 [ 営 業 時 間 ]10:00~20:00 [ 休 ] 毎 週 火 曜 日 当 店 では 生 ケーキも 多 数 取 り 揃 えております 1 CSS ファイルへの 参 照 を 設 定 CSS ファイル style.css 2 ページのタイトルを 設 定 タイトル チョコレートの 部 屋 店 舗 案 内 3 仕 上 がり 図 を 参 考 にして イメージ title.jpg を 配 置 代 替 文 字 タイトル 幅 600 ピクセル 高 さ 40 ピクセル 175
4 仕 上 がり 図 を 参 考 にして 文 字 列 本 格 的 なチョコレート ぜひお 越 しくださ い を 段 落 に 設 定 し クラス lead を 設 定 5 仕 上 がり 図 を 参 考 にして イメージ map.jpg を 配 置 し 段 落 に 設 定 代 替 文 字 幅 高 さ 地 図 375 ピクセル 242 ピクセル 6 仕 上 がり 図 を 参 考 にして 文 字 列 ボーヌ ド ショコラ を 見 出 し1に 設 定 7 仕 上 がり 図 を 参 考 にして 文 字 列 地 下 鉄 千 代 田 線 毎 週 火 曜 日 を 段 落 に 設 定 し クラス exp を 設 定 必 要 に 応 じて 段 落 を 分 けない 改 行 を 挿 入 すること 8 仕 上 がり 図 を 参 考 にして 文 字 列 当 店 では 揃 えております を 段 落 に 設 定 9 ページ 本 文 全 体 ( 仕 上 がり 図 )にクラス page を 設 定 176
shop.html 解 答 <html lang="ja"> 1 style.css へのリンク <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>チョコレートの 部 屋 店 舗 案 内 </title> 2 ページタイトル 3 クラス page 4 title.jpg の 配 置 <div class="page"> <img src="images/title.jpg" alt="タイトル" width="600" height="40"> <p class="lead"> 本 格 的 なチョコレートを 味 わいたいなら このお 店 店 内 にはゆっくりくつろげるカフ 5 段 落 クラス lead ェもございます ぜひお 越 し 下 さい </p> <p><img src="images/map.jpg" alt=" 地 図 " width="375" height="242"></p> <h1>ボーヌ ド ショコラ</h1> 6 map.jpg 配 置 段 落 <p class="exp"> 地 下 鉄 千 代 田 線 茂 木 公 園 南 口 を 直 進 <br> 徒 歩 7 分 <br> 7 見 出 し1 住 所 : 東 京 都 渋 谷 区 神 明 1-2-3<br> TEL:03-1234-5678<br> 8 段 落 クラス exp [ 営 業 時 間 ]10:00~20:00<br> [ 休 ] 毎 週 火 曜 日 </p> <p> 当 店 では 生 ケーキも 多 数 取 り 揃 えております </p> 9 段 落 </div> 177
7-4 HTML 文 法 基 礎 ここでは Web クリエイター 能 力 認 定 試 験 の 初 級 に 必 要 な 文 法 の 基 礎 について 紹 介 する (1) HTML と CSS HTML(Hyper Text Markup Language:ハイパー テキスト マークアップ ラン グエージ)とは Web ページを 作 成 するための 言 語 である これまで HTML のバージ ョンが 更 新 され 1999 年 の HTML4.01 が 最 も 標 準 的 な HTML となっている HTML4.01 で 記 述 すると ほとんどの Web ブラウザにより 表 示 可 能 である 一 方 CSS(Cascading Style Sheets:カスケーディング スタイル シート)とは Web ページのフォントサイズ 背 景 などの 体 裁 を 設 定 するための 言 語 である CSS のみ を 記 述 したファイルの 拡 張 子 は css である 7-2 の(1) 規 定 問 題 は index.html と base.css の 組 み 合 わせ 例 である 以 下 に 示 す 通 り index.html において CSS ファイルである base.css との 連 携 を 指 示 し 同 じ フォルダ 内 に base.css を 置 く この 結 果 図 7-9 に 示 すように Web ページとして 表 示 される index.html <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>123456</title> <h1> 京 都 の 花 案 内 </h1> <p> 桜 : 見 頃 /3 月 下 旬 ~4 月 中 旬 <br> 椿 : 見 頃 /4 月 上 旬 ~ 中 旬 <br> 牡 丹 : 見 頃 /4 月 中 旬 ~ 下 旬 </p> <p> 常 勝 寺 </p> <p> 拝 観 時 間 :8 時 30 分 ~17 時 <br> 拝 観 料 :300 円 <br> </p> base.css @charset "Shift_JIS"; body{ color:#0000ff; background-color:#ffccff; background-image: url("images/back.gif"); 図 7-9 規 定 問 題 1の 仕 上 がり 図 178
*Web クリエイター 能 力 認 定 試 験 初 級 の 出 題 範 囲 外 の 知 識 : 1 HTML の 文 書 型 宣 言 として 以 下 の3つの 文 書 宣 言 がある Strict DTD( 厳 格 なドキュメント タイプ 定 義 ) 最 も 厳 格 な 文 書 宣 言 であり Web クリエイター 能 力 認 定 試 験 初 級 において 利 用 されるが 予 め 問 題 の 中 に 記 述 されている Transitional DTD( 変 遷 型 のドキュメント タイプ 定 義 ) Strict DTD に 加 え 非 推 奨 要 素 属 性 も 利 用 可 能 である <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Frameset DTD Transitional DTD に 加 え フレームに 関 する 要 素 属 性 も 利 用 可 能 である <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> 2 HTML と CSS のコメント 記 述 の 方 法 が 異 なるので 注 意 すること HTML <!-- コメント 文 --> CSS /* コメント 文 */ 179
(2) HTML 要 素 科 目 項 目 要 素 属 性 機 能 一 般 定 義 HTML 文 書 指 定 <html> HTML 文 書 であることの 明 示 開 始 位 置 <html> 終 了 位 置 ヘッダー 情 報 ページタイトルやサーバー が 利 用 する 情 報 を 指 定 の 間 の 内 容 は 表 示 されない タイトル <title> ページタイトルを 指 定 title 要 素 は head 要 素 内 に 記 述 する 例 ) <title> 受 験 番 号 </title> 規 定 課 題 1 ページ 本 文 ページとして 表 示 される 内 容 を 指 定 本 文 を 記 述 する の 内 容 が 表 示 される <html> HTML の 基 本 情 報 head 要 素 <title> </title> title 要 素 html 要 素 HTML の 本 文 body 要 素 文 字 装 飾 見 出 し <h1> - <h6> 見 出 しの 指 定 <h#> </h#>により 囲 まれた 文 字 列 イメージを 見 出 しとす る #は1から6まで 1が 最 上 位 の 見 出 しで 文 字 列 が 大 きく 表 示 される 規 定 問 題 22 文 字 列 のスタイ <strong> より 強 い 強 調 ル <b> 太 字 <i> イタリック 開 始 タグと 終 了 タグにより 囲 まれた 文 字 のスタイルを 指 定 す る 例 ) <strong> 文 字 列 </strong> 特 殊 文 字 &エンティティ 名  : 改 行 なしの 空 白 スペース < < レスザン > > グレーターザン " ダブルクオーテーション 180
科 目 項 目 要 素 属 性 機 能 仕 切 り 段 落 <p> 段 落 を 作 成 <br> 段 落 を 作 成 しない 改 行 <p> </p> 囲 まれた 文 字 列 を 段 落 とする <br> 空 要 素 なので 終 了 タグをともなわない リンク 例 ) <p> 宛 先 : 東 京 都 千 代 田 区 1-1-1<br> 月 刊 写 真 の 極 意 編 集 部 人 物 写 真 係 <br> 電 話 番 号 :(03)-1020-3040</p> 規 定 問 題 3 水 平 線 <hr> 水 平 線 ( 区 切 り 線 )を 指 定 規 定 問 題 3 他 サイトへのリ ンク イメージ/マルチメディア インラインイメ ージの 表 示 <a> リンクの 作 成 href H リファレンス サイトの URL を 指 定 /マー カー 指 定 href= mailto:メー ルアドレス HTML 文 書 内 にメールを 送 信 するホットテキストの 設 定 name ネーム HTML 文 書 内 にマーカー 名 を 指 定 a 要 素 は 単 独 で 使 用 せずに href あるいは name 属 性 とともに 利 用 する 例 ) 規 定 問 題 4 <a href="service.html">おすすめオプション</a> 規 定 問 題 4 <a href="mailto:seven@xxx.net">e-mail</a> <a name="heya"> 部 屋 タイプ</a> <img> 指 定 したイメージデータを インライン 表 示 src ソース 表 示 するイメージファイル の URL を 指 定 alt オルタネート イメージの 代 替 文 字 width ウイト ス イメージの 幅 height ハイト イメージ 高 さ img 要 素 は 単 独 で 使 用 せずに src 属 性 とともに 利 用 する 例 ) <img src="images/tera.jpg" alt=" 五 重 塔 " width="235" height="250"> 規 定 問 題 5 src 属 性 は ファイル 名 をダブルクオーテーションで 囲 み 使 用 する 例 では images フォルダの tera.jpg を 指 定 する alt 属 性 は イメージを 表 示 できない 時 の 代 替 (だいたい) 文 字 を 指 定 する 例 では 五 重 塔 である 181
科 目 項 目 要 素 属 性 機 能 リスト 行 頭 記 号 付 リス ト <ul> 行 頭 記 号 を 付 けたリストの 作 成 番 号 付 きリスト <ol> 番 号 付 きリストの 作 成 リスト 項 目 <li> リスト 項 目 の 指 定 <ul> 要 素 と<ol> 要 素 は 単 独 で 利 用 するのではなく <li>のリス ト 要 素 とともに 利 用 する 例 ) 規 定 問 題 6 <ol> <li> 湯 を 沸 かして 酢 塩 を 入 れる </li> <li> 卵 を 静 かに 湯 に 割 り 入 れる </li> <li> 卵 白 をまとめながらゆでる </li> <li> 半 熟 状 になったら 取 り 出 す </li> </ol> 182
科 目 項 目 要 素 属 性 機 能 テーブル テーブルの 定 義 <table> テーブルの 定 義 border ホ ータ ー 枠 線 の 追 加 枠 線 の 幅 ( 枠 線 の 3D 効 果 ) width ウィト ス テーブル 全 体 の 幅 <tr> テーフ ルロー テーブル 組 の 行 を 定 義 align アライン セル 内 容 の 水 平 方 向 位 置 valign V アライン セル 内 容 の 垂 直 方 向 位 置 <th> テーフ ルヘッタ 見 出 しセルの 定 義 align アライン セル 内 容 の 水 平 方 向 位 置 valign V アライン セル 内 容 の 垂 直 方 向 位 置 <td> テーフ ルテ ータ データセルの 定 義 align アライン セル 内 容 の 水 平 方 向 位 置 valign V アライン セル 内 容 の 垂 直 方 向 位 置 <caption> キャフ ション テーブルのタイトル 付 加 例 ) 規 定 問 題 7 <table> <caption> 曜 日 別 サークル</caption> <tr> <th> 月 曜 日 </th> <th> 火 曜 日 </th> 見 出 し 行 <th> 木 曜 日 </th> <th> 土 曜 日 </th> </tr> <tr> <td>フラダンス 日 本 舞 踊 </td> <td> 手 話 陶 芸 </td> データ 行 <td> 和 太 鼓 コーラス</td> <td> 卓 球 ヨガ</td> </tr> </table> キャプション(テーブルのタイトル) <table> <tr> <tr> <tr> </table> 見 出 しセル(ヘッダ) <caption> </caption> <th> </th> <th> </th> <th> </th> </tr> <td> </td> <td> </td> <td> </td> </tr> <td> </td> <td> </td> <td> </td> </tr> データセル 183
科 目 項 目 要 素 属 性 機 能 スタイルシート 関 連 の HTML タグ 別 の 文 書 との 関 <link> 別 の 文 書 との 関 係 を 指 定 係 を 指 定 rel リラティフ 参 照 元 の 文 書 と 参 照 先 の 文 書 との 関 係 (CSS は stylesheet) href H リファレンス.css ファイルの URL type タイフ 参 照 先 の 文 書 のタイプを 指 定 (CSS は text/css) link 要 素 は に 記 述 し rel と type により 別 ファイルの CSS へリンクすることを 示 す スタイルシート を 表 す 例 ) 規 定 問 題 1 <link rel="stylesheet" type="text/css" href="base.css"> ここでは base.css が 別 ファイルに 定 義 された CSS である <style> スタイルシートを 表 す type スタイルシートの 言 語 を 指 定 (CSS は text/css) style 要 素 は HTML 文 書 の の 間 に 記 述 し 直 接 CSS を 記 述 する 場 合 に 利 用 する 例 ) 規 定 問 題 2 <style type="text/css"> <!-- h1{ font-size:120%; color:#ff0000; background-color: #ffff00;.bold { font-weight:bold; --> </style> 184
項 目 要 素 属 性 機 能 要 素 のグループ 化 <div> 要 素 のグループ 化 (ブロッ クレベル 要 素 ) style スタイルシートを 指 定 class クラスを 指 定 id 文 書 中 で 一 意 の 名 前 を 指 定 div 要 素 は ひとまとまりの 範 囲 を 指 定 する class 属 性 をとも ない style シートとの 対 応 をとる div 要 素 により 指 定 された 範 囲 はブロックレベル 要 素 となるので 前 後 が 改 行 される 例 ) 規 定 課 題 8 <style type="text/css">.left{ color:#000000;.right{ color:#000000; </style> <title> 問 題 8</title> <div class="left"> <p> 日 本 を 代 表 見 ていて 安 心 </p> </div> <div class="right"> <p> バン ジョバンニ 文 / 月 刊 オペラ</p> </div> <span> 要 素 のグループ 化 (インラ イン 要 素 ) Style スタイルシートを 指 定 Class クラスを 指 定 Id 文 書 中 で 一 意 の 名 前 を 指 定 span 要 素 は インライン 要 素 として ひとまとまりの 範 囲 を 指 定 する class 属 性 をともない style シートとの 対 応 をとる 例 ) 規 定 課 題 2 <style type="text/css">.bold {font-weight:bold; </style> <title> 問 題 2</title> <h1>ラーメン 激 戦 区 </h1> <p> の 街 の 中 でも 名 代 ラーメン<span class="bold"> 大 洋 軒 </span>は25 年 前 </p> 185
(3) CSS プロパティ 科 目 項 目 プロパティ 値 テキスト 文 字 色 の 指 定 color カラー #RRGGBB/rgb()/ 色 名 文 字 列 の 色 を 指 定 するための 機 能 であり 値 として 色 コー ド(10 進 数 /16 進 数 ) あるいは 色 名 を 利 用 する 例 :color#0000ff( 青 色 ) 規 定 問 題 1 他 16 進 数 色 コード #RRGGBB のように 赤 (RR) 緑 (GG) 青 (BB)とし それぞ れ 00(16 進 数 で 0)から ff(16 進 数 で 255)までの 値 を 指 定 する #ff0000= 赤 色 #00ff00= 緑 色 #0000ff= 青 色 10 進 数 色 コード 例 ) color:rgb(0,0,255) = 青 色 色 名 例 ) color:blue = 青 色 水 平 方 向 位 置 text-align テキストアライン left/center/right/justify 文 字 列 の 配 置 を 指 定 する 選 択 肢 として left 左 (レフト) center 中 央 (センター) right 右 (ライト) justify 両 端 揃 い(シ ャスティファイ) 例 ) text-align:center 規 定 問 題 75 文 字 装 飾 text-decoration underline/line-through/none テキストテ コレーション 文 字 列 の 装 飾 を 指 定 する 選 択 肢 として none 装 飾 なし(ノン) underline 下 線 (アンタ ーライン) line-through 取 り 消 し 線 (ライン スルー) overline 上 線 (オーハ ーライン) blink 点 滅 (フ リンク) 例 )text-decoration:none 規 定 問 題 4 5 フォント フォントの 指 定 font-family フォントファミリ フォント 名 / 一 般 名 (serif など) フォントの 種 類 を 指 定 する フォント 名 の 前 後 を ダブル クオーテーションで 囲 む 例 ) font-family:"ms ゴシック","Osaka- 等 幅 "; 自 由 問 題 フォントサイズ font-size フォントサイス 数 値 + 単 位 /パーセント フォントのサイズを 指 定 する 例 ) font-size:120%; 規 定 問 題 22 文 字 の 太 さの 指 定 font-weight フォントウエイト bold/bolder/lighter/normal フォントの 太 さを 指 定 する normal(ノーマル) 普 通 文 字 bold (ボールド) 太 字 bolder (ボールダー) 一 段 太 くする lighter(ライター) 一 段 細 くする 例 ) font-weight:bold; 規 定 問 題 23 斜 体 の 設 定 font-style フォントスタイル normal/italic/oblique 斜 体 文 字 とする 例 ) font-style:italic; 186
背 景 背 景 の 色 背 景 画 像 の 指 定 画 像 繰 り 返 し 方 法 背 景 画 像 の 位 置 background-color #RRGGBB/rgb()/ 色 名 /transparent ハ ックク ラウント カラー 背 景 色 を 指 定 する 文 字 色 と 同 じ 指 定 transparent(トランスパーレント) = 透 過 例 ) background-color:#ffccff; 規 定 問 題 1 background-image イメーシ url()/none 背 景 イメージを 指 定 する url( )を 利 用 し ファイルへのパ スを 指 定 する 背 景 全 体 にタイル 状 にイメージが 繰 り 返 して 表 示 される 例 ) background-image:url("images/back.gif"); 規 定 問 題 1 background-repeat repeat/repeat-x/repeat-y/ リヒ ート no-repeat 背 景 イメージの 繰 返 し 方 法 を 指 定 する background-image に 引 き 続 き 例 のように 指 定 する Repeat (リピート) 画 面 全 体 に 繰 り 返 す Repeat-x (リピート X) 水 平 方 向 に 繰 り 返 す Repeat-y (リピート Y) 垂 直 方 向 に 繰 り 返 す No-repeat (ノーリピート) 一 つのみ 表 示 例 ) background-repeat:repeat-x; background-position 数 値 + 単 位 /% top/center/ ホ シ ション bottom/left/center/right 背 景 イメージの 位 置 を 指 定 する background-image に 引 き 続 き 例 のように 指 定 する 水 平 方 向 位 置 :left center right 垂 直 方 向 位 置 :top center bottom 数 値 指 定 :50px =50 ピクセル 例 ) background-position:50px 30px スクリーン 東 京 情 報 大 学 余 白 ( 左 ) 枠 線 ( 右 ) (マージン) (ボーダー) 図 7-10 ボックスの 概 念 図 間 隔 ( 左 )(パディング) 枠 線 と 文 字 との 間 の 間 隔 187
ボックス 枠 線 のスタイル 枠 線 の 太 さ border-style solid/double/groove/ridge/ ホ ータ ースタイル inset/outset/none/hidden/ border-top-style トッフ dashed/dotted border-right-style ライト border-bottom-style ホ ト border-left-style レフト Solid (ソリッド) 実 線 Double (ダブル) 二 重 線 Groove (グル ブ) 立 体 くぼみ 線 例 ) border-style:double; 規 定 問 題 7 border-width 数 値 + 単 位 ホ ータ ーウィト ス Thin/medium/thick border-top-width トッフ border-right-width ライト border-bottom-width ホ トム border-left-width レフト 例 ) border-width:2px; 規 定 問 題 7 枠 線 の 色 border-color ホ ータ ーカラー #RRGGBB/rgb()/transparent 例 ) border-color:#000000; 規 定 問 題 7 マージンの 設 定 margin マーシ ン 数 値 + 単 位 /auto margin-top -トッフ margin-right -ライト margin-bottom -ホ トム margin-left -レフト 例 ) margin-right:15px; 規 定 問 題 5 配 置 テキストボックス の 間 隔 Padding ハ テ ィンク 数 値 + 単 位 /auto Padding-top -トッフ Padding-right -ライト Padding-bottom -ホ トム Padding-left -レフト 例 ) padding:10px; 規 定 問 題 8 ボックス 要 素 高 さ height ハイト 数 値 + 単 位 /%/auto イメージなど 表 示 する 領 域 の 高 さを 指 定 する ボックス 要 素 幅 width ウィト ス 数 値 + 単 位 /%/auto イメージなど 表 示 する 領 域 の 幅 を 指 定 する 回 り 込 み 指 定 float フロート left/right/none 要 素 の 周 辺 の 文 字 やイメージの 回 り 込 みを 指 定 する 回 り 込 み 解 除 clear クリア left/right/both/none 要 素 の 周 辺 の 文 字 やイメージの 回 り 込 みを 解 除 する 188
(4) 疑 似 クラス 科 目 項 目 説 明 疑 似 クラス 名 :link <a>タグで 作 成 されたリンクの 内 未 アクセスのもの コロン リンク :visited <a>タグで 作 成 されたリンクの 内 アクセス 済 であるもの ヒ シ テェト :hover マウスでポイントしたオブジェクト H オーハ ー :active マウスボタンが 押 されているアクティブなオブジェクト アクティフ 疑 似 クラスは CSS にあらかじめ 用 意 されている 機 能 である リンクを 示 す a 要 素 と :(コロン) で 接 続 する 例 :a:visited 規 定 問 題 4 考 え 方 : 1 CSS あるいは style 記 述 部 分 に a:link などの 疑 似 クラスについて 文 字 色 背 景 色 を 定 義 する 2 HTML の 部 分 において <a href= service.html > </a> などのリンクを 記 述 する 3 この 結 果 HTML の a リンクが 選 択 されたとき 1の 記 述 のように 表 示 され リンクへ 移 動 する 189