第 1 章 インターネットとホームページの 基 礎 知 識 この 章 では 日 常 的 に 使 っている 用 語 の 意 味 や 使 い 方 の 確 認 をします よくわからずに 使 っていたり 間 違 って 覚 えていたりすることは 珍 しくありません 最 初 に 正 しい 知 識 と 用 語 の

Web クリエイター 能 力 認 定 試 験 初 級 テキスト HTML 4.01 対 応 1 / 278

第 1 章 インターネットとホームページの 基 礎 知 識 この 章 では 日 常 的 に 使 っている 用 語 の 意 味 や 使 い 方 の 確 認 をします よくわからずに 使 っていたり 間 違 って 覚 えていたりすることは 珍 しくありません 最 初 に 正 しい 知 識 と 用 語 の 使 い 方 を 身 に 付 けましょう 出 てくる 用 語 は 英 単 語 が 元 になっているものがほとんどです そのまま 覚 えるのではなく 単 語 の 本 来 の 意 味 もいっしょに 覚 えましょう 初 めて 聞 く 用 語 や 略 語 でも 一 部 の 意 味 がわかればある 程 度 推 測 できるようになります わからない 用 語 が 出 てきたら インターネットで 検 索 をしてすぐに 意 味 を 調 べましょう 単 語 の 末 尾 に とは や 意 味 をつなげて 検 索 すると 解 説 が 見 つかりやすくなります HTML について 調 べたい 時 は HTML とは HTML 意 味 ' 間 にスペースを 挟 む( のように 検 索 キーワードを 入 力 してみてください 2 / 278

第 1 節 インターネット 全 世 界 のネットワークを 網 の 目 のように 接 続 した 地 球 規 模 の 巨 大 なコンピュータネットワークです インターネットにかかわる 用 語 の 多 くにも ウェブ'Web( という 言 葉 が 混 じっています 'ウェブブラウザ ウェブメールなど( 私 たちはこのネットワークを 介 して 電 子 メール やホームページなどの 情 報 をやりとりしています スマートフォンでメールや 検 索 ができるのも この ネットワークにつながっているからです 最 近 はパソコンだけではなく 携 帯 電 話 やスマ ートフォン ゲーム 機 から 家 電 製 品 に 至 るまで さ まざまな 機 器 がインターネットにつながるようになり ました みなさんの 家 にある 大 画 面 液 晶 テレビでも YouTube などの 動 画 サイトを 見 ることができると 思 います 画 面 の 大 きさや 解 像 度 ' 画 面 のきめ 細 かさ(が 多 様 になりましたので 近 年 ホームページを 作 る 時 には それぞれの 機 器 で 思 い 通 りに 表 示 されているのか 十 分 に 検 証 する 必 要 があります 3 / 278

ウェブサイト(web site) インターネット 上 にあるホームページのことです 一 画 面 に 表 示 されるウェブページが 何 枚 か 集 まって ウェブサイトを 構 成 します そのウェブページのうち 最 初 に 表 示 される ページを 決 めることができるのですが そのペ ージは 特 別 にホームページと 呼 びます 本 来 の 意 味 では 正 しくないのですが いつから かウェブサイト 全 体 を ホームページと 呼 ぶよう になりました サイトには 用 地 や 場 所 という 意 味 があります ウェブサーバー(web server) ウェブサイトを 構 成 するファイルをまとめて 保 存 し 外 部 か らの 要 求 に 応 じて 提 供 するコンピュータです 止 まるとウェブサイトが 見 られなくなってしまうので 24 時 間 稼 働 が 求 められます 通 常 のパソコンよりも 信 頼 性 の 高 い ハードウェアやソフトウェアが 用 いられます もし 一 部 の 部 品 が 壊 れても 予 備 の 部 品 で 停 止 すること なく 動 き 続 けるなど 特 殊 な 機 能 を 持 たせています そのぶ んとても 高 価 なシステムになりがちです 個 人 でウェブサイトを 公 開 する 場 合 は 専 門 業 者 が 格 安 提 供 しているレンタルサーバーなどを 利 用 するのがお 薦 め です サーバー server には 仕 える 人 給 仕 する 人 という 意 味 があります 4 / 278

ウェブブラウザ ウェブサイトを 閲 覧 するためのソフトウェアです URL'アドレス(を 入 力 してウェブサーバーに 接 続 し 必 要 なファイルの 提 供 を 受 け ブラウザの 画 面 に 表 示 する 機 能 を 持 っています OS に 標 準 で 入 っているブラウザもあれば 別 途 インストールして 使 うブラウザもあります 代 表 的 なものは Internet Explorer'Windows 標 準 ( Safari'OSX iphone 標 準 ( Firefox Google Chrome などがあります 年 々 進 歩 しているので 古 いブラウザのままだとうまく 見 られないウェブサイトがあったりします 古 いままだと 安 全 面 でも 問 題 が 出 てくるので できるだけ 新 しいブラウザを 使 うようにしましょう ブラウズ browse には 拾 い 読 みや 本 棚 などを 漁 るという 意 味 があります 5 / 278

第 2 節 ウェブサイトを 作 成 する ウェブサイトを 構 成 する 最 小 単 位 がウェブページ 最 初 に 表 示 される 表 紙 に 当 たるウェブページをホームページ'トップページ( これらのウェブページがまとまって ひとつのウェブサイトになります 次 に ウェブサイトを 理 解 する 上 で 必 要 な 用 語 や 技 術 を 確 認 してみましょう 6 / 278

HTML Hypertext Markup Language エイチ ティー エム エル は ウェブページを 作 成 するために 開 発 された 言 語 です ハイパーテキストとは 従 来 の 文 章 を 超 える 文 章 という 意 味 が 含 まれています それまでは 表 示 された 順 番 に 読 むことしかできな かった 文 章 に リンクという 機 能 を 付 け 加 えることで 複 数 の 文 章 を 相 互 に 連 結 できるようになりました マークアップは 目 印 をつける という 意 味 がありま す 文 章 を 複 数 の 項 目 ' 要 素 (に 分 解 して それぞ れにどのような 意 味 や 機 能 があるのかを 明 確 にしま す みなさんが 読 んでいる 紙 に 印 刷 された 本 も 複 数 の 構 造 に 分 かれています 表 紙 目 次 本 文 奥 付 章 節 項 注 釈 補 足 HTML は 情 報 の 構 造 をわかりやすく 定 義 するための 言 語 と 考 えてください 初 期 の HTML では 論 理 構 造 に 加 えて 文 字 の 大 きさなどの 見 た 目 を 表 現 することができたので 好 きなレイアウトや 色 遣 いなどを 表 現 することができました 現 在 では 後 述 する CSS ファイルが 見 た 目 や 装 飾 を 受 け 持 つようになったため HTML は 構 造 を 表 すことのみに 用 いるべきとされています 7 / 278

CSS Cascading Style Sheets カスケーディング スタイル シート ウェブページのスタイル' 見 た 目 (を 決 めるために さまざまな 指 示 をすることができる 言 語 です HTML で 構 造 化 した 文 章 に CSS で 見 た 目 を 良 くしてさらに 読 みやすくしたりできます HTML でも 見 た 目 を 指 示 することはできますが あちこちで 同 じような 見 た 目 を 使 う 場 合 には 指 示 を 書 くのに 手 間 がかかります CSS は 見 た 目 の 指 示 を 別 の 場 所 にまとめて 書 い ておける 技 術 です 必 要 な 時 にその 指 示 を 見 に 行 くことで 適 切 に 見 た 目 を 変 えることができるように なりました 指 示 をまとめて 管 理 できるので 編 集 や 更 新 が 楽 になります ウェブサイト 全 体 の 見 た 目 を 揃 えて 統 一 感 を 出 すという 効 果 もあります カスケード cascade には 階 段 のように 連 続 する 滝 という 意 味 があります 8 / 278

ハイパーリンク Hyperlink 単 にリンク'link(と 呼 ぶ 場 合 もあります ウェブページ 内 の 文 字 列 や 画 像 などに 他 のウ ェブページを 紐 付 けして マウスのクリックなどで ページ 間 の 移 動 ができる 技 術 です 同 じウェブサイト 内 のページ 移 動 だけではなく インターネット 上 で 公 開 されている 他 のウェブサイ トにも 同 様 に 移 動 できます 他 のページの 位 置 情 報 を 埋 め 込 んで 連 結 する ことができる それがハイパーリンクだと 覚 えてくだ さい このハイパーリンクを 利 用 して 世 界 中 にある 多 くのウェブページが 結 び 付 けられているので インターネットは WWW'ワールドワイドウェブ(とも 呼 ばれています 9 / 278

画 像 ファイル(イメージファイル) イラストや 写 真 アニメーションなど 多 彩 な 表 現 ができるデータです 主 に 下 記 の3 種 類 が 用 いられていて それぞれに 得 意 不 得 意 な 画 像 があります その 特 徴 を 活 かして うまく 使 い 分 けてください GIF'ジフ( 256 色 まで 使 える 方 式 容 量 が 小 さいのが 特 徴 ベタ 塗 りのイラストに 最 適 背 景 が 透 けて 見 える 透 過 色 の 指 定 や アニメーションが 可 能 JPEG'ジェイペグ( 約 1670 万 色 まで 使 える 方 式 写 真 などの 細 かい 階 調 表 現 が 可 能 容 量 がそこそこ 小 さいのが 特 徴 ベタ 塗 りや 極 端 な 色 の 変 化 に 弱 い' 劣 化 ( 透 過 色 は 扱 えない PNG'ピング ピーエヌジー( 上 記 ふたつの 長 所 を 取 り 入 れた 方 式 ベタ 塗 りも 細 かい 階 調 も 適 切 に 扱 える 容 量 がそこそこ 小 さいのが 特 徴 透 過 色 の 指 定 やアニメーションが 可 能 10 / 278

第 3 節 ウェブサイトの 公 開 ウェブサイトはいろんなファイルを 集 めて 作 成 します インターネット 上 の 他 の 機 器 から 見 られるようにするには ウェブサーバーにファイルを 転 送 する 必 要 があります ファイルの 転 送 には FTP クライアントと 呼 ばれるソフトを 利 用 します 1 手 元 のパソコンでウェブサイトの 作 成 2 FTP クライアントソフトで FTP サーバーに データを 送 る という 手 順 で 転 送 することができます FTP サーバーの 中 にあるファイルをウェブサーバーが 外 部 に 公 開 することで わたしたちの 手 元 に ある 端 末 にファイルが 届 くようになります 手 元 のパソコンでウェブサイトを 更 新 した 場 合 は 必 ずこの 手 順 を 繰 り 返 してサーバー 内 のファイル を 最 新 のものに 置 き 換 える 必 要 があります 11 / 278

補 足 キーワード HTML5 HTML4.01 からさらに 発 展 した 最 新 の HTML これまで 実 現 が 難 しかったブラウザ 単 体 での 動 画 音 声 グラフィック 描 画 ができる ようになり ウェブアプリケーションと 呼 ばれるブラウザ 上 で 動 く 高 機 能 なソフトウェア の 作 成 が 可 能 になった 構 造 的 にも 整 理 が 進 み より 書 きやすくわかりやすくなった シネマグラフ GIF アニメーションの 一 形 態 単 なる 静 止 画 のように 見 えるけれども ごく 一 部 だけ 動 いている 静 止 画 よりも 印 象 に 残 りやすいので 目 立 たせたい 部 分 に 使 うと 効 果 的 ファイル 容 量 が 大 きくなりがちで 再 生 する 側 にも 負 荷 がかかるのが 難 点 シングルページ 1 ページで 完 結 しているウェブサイト 縦 に 長 いページで 大 きな 画 像 やテキストを 使 い シンプルに 表 現 する スクロールに 合 わせてアニメーションによる 視 覚 効 果 を 加 えることも 多 い スマートフォンなどのモバイル 端 末 でも 見 やすいのが 特 徴 12 / 278

第 2 章 HTML の 記 述 この 章 では 実 際 にテキストエディタ'Windows 標 準 のメモ 帳 (を 使 って HTML を 記 述 していきます 初 めて 見 ると 呪 文 のように 感 じられるかもしれません この 章 が 終 わる 頃 には 意 味 がわかるようになりますので 少 しずつ 学 んでいきましょう 13 / 278

第 1 節 基 本 ルール 要 素 (エレメント) ウェブページを 構 成 する 文 字 列 や 画 像 など 配 置 されている 部 品 のことです 開 始 タグと 終 了 タグ その 間 に 挟 まれている 内 容 すべてを 要 素 と 呼 びます 下 記 の 例 は Web クリエイター という 文 字 列 を 段 落 として 表 示 する' 上 下 に 改 行 を 入 れる( という 意 味 です 要 素 <p>web クリエイター</p> 開 始 タグ 終 了 タグ タグ 要 素 に 意 味 や 機 能 を 持 たせるための 記 号 です 通 常 は 開 始 タグと 終 了 タグで 文 字 列 などを 囲 ん で 利 用 します サンドイッチのように 挟 んで 使 うと 覚 えてください 一 部 のタグ'img タグなど(は 開 始 タグだけで 使 え るものもあります このように 終 了 タグが 要 らないもの は 特 別 に 空 'から( 要 素 と 呼 びます かならず 半 角 英 数 字 で 記 入 する 必 要 があります 日 本 語 などの 全 角 文 字 をタグで 囲 む 時 に 間 違 え て 全 角 文 字 でタグまで 書 いてしまうので 注 意 してく ださい 半 角 なら 大 文 字 小 文 字 どちらでも 使 えますが ここでは 小 文 字 に 統 一 して 話 を 進 めます 14 / 278

属 性 (アトリビュート) 要 素 に 追 加 する 情 報 で 開 始 タグの 中 に 追 加 します この 属 性 を 用 いて さらに 機 能 を 追 加 することができます ひとつの 開 始 タグに 複 数 の 属 性 を 追 加 することも 可 能 です タグ 自 体 や 他 の 属 性 と 区 別 するために 半 角 スペースを 入 れる 必 要 があります 適 切 に 半 角 スペースが 入 っていないと どこで 属 性 や 値 を 切 り 分 けていいのかわからないので ブラウザで 正 しく 表 示 されないことがあります 属 性 属 性 <img src="test.gif" alt="テスト"> 値 'あたい( 値 'あたい( 値 属 性 に 入 力 して さまざまな 機 能 を 付 け 加 えます 画 像 を 表 示 したい 場 合 には img タグの src 属 性 に どこにどんなファイル 名 の 画 像 があるのか と いう 情 報 を 値 'ファイルパス(として 入 力 します 'src は source' 源 泉 情 報 源 ( の 略 語 ( 値 は 通 常 ダブルクォーテーション 記 号 ' (で 囲 んで イコール 記 号 '=(を 使 って 属 性 に 入 力 します 15 / 278

要 素 はその 役 割 に 応 じて2 種 類 に 分 けられます ブロックレベル 要 素 見 出 し 段 落 表 など ひとつの 部 品 'ブロック かたまり(として 扱 われる 要 素 です ブラウザ 上 ではブロックレベル 要 素 の 前 後 に 自 動 的 に 改 行 が 挿 入 されます 今 回 の 試 験 に 出 てくるブロックレベル 要 素 には 以 下 のものがあります <div> <h1>~<h6> <hr> <ol> <p> <table> <ul> ブロックレベルグループ 見 出 し 水 平 線 順 序 ありリスト 段 落 表 順 序 なしリスト 16 / 278

インライン 要 素 ブロックレベル 要 素 の 中 で 使 われる 要 素 です 段 落 にある 一 部 の 文 字 列 を 選 んで 強 調 したりすることができます ブロックレベル 要 素 のように 前 後 に 改 行 が 挿 入 されず そのまま 表 示 されます インライン'in-line(は 言 葉 の 通 り 行 の 中 と 考 えれば わかりやすいでしょう インライン 要 素 は 単 独 で 使 用 することができません かならずブロックレベル 要 素 でインライン 要 素 を 囲 む 必 要 があります <body> <p><img src="test.gif" alt="テスト"></p> </body> 今 回 の 試 験 に 出 てくるインライン 要 素 には 以 下 のものがあります <a> <b> <br> <em> <i> <img> <span> <strong> ハイパーリンク 太 字 改 行 強 調 イタリック 体 イメージ 画 像 インライングループ より 強 調 17 / 278

親 子 関 係 要 素 はまるで 親 子 のように ある 要 素 が 他 の 要 素 を 包 み 込 むように 含 むことができます 階 層 的 な 構 造 を 作 るのでそれぞれの 関 係 を 示 すために 親 要 素 子 要 素 孫 要 素 のように 表 現 します このような 構 造 を 入 れ 子 構 造 と 呼 びます 利 用 するときには 構 造 をしっかり 把 握 して 親 子 関 係 を 崩 さないようにする 必 要 があります <p>web<em>クリエイター<strong> 初 級 </strong></em></p> 親 要 素 開 始 タグ 子 要 素 開 始 タグ 孫 要 素 開 始 タグ 孫 要 素 終 了 タグ 子 要 素 終 了 タグ 親 要 素 終 了 タグ 18 / 278

文 字 参 照 HTML では 複 数 の 文 字 たとえばタグで 使 われている 半 角 の < や > などに 特 別 な 意 味 を もたせています 半 角 の < や > などをそのまま 本 文 に 使 おうとしても その 記 号 をタグと 間 違 えてしまって 正 しく 表 示 できません そのためそれらの 文 字 を 扱 うには 文 字 参 照 という 別 の 方 法 を 用 いる 必 要 があります 例 えば 半 角 の < は < と 記 入 します 'lt は less than'~ 未 満 ( の 略 語 です( 半 角 スペース 小 なり 記 号 < 大 なり 記 号 > アンド 記 号 & ダブルクォーテーション 記 号 " < > & " Web クリエイター 能 力 認 定 試 験 < 初 級 > と 表 示 するには <p>web クリエイター 能 力 認 定 試 験 < 初 級 ></p> と 記 入 します 試 しにメモ 帳 を 使 って 入 力 してみましょう index.html というファイル 名 で 保 存 してから ブラウザで 開 いてみると 確 認 できます 文 字 参 照 をやめて <p>web クリエイター 能 力 認 定 試 験 < 初 級 ></p> と 書 いても ちゃんと 表 示 できてしまいます これは<>の 中 が 日 本 語 ' 全 角 文 字 (なので ブラウザがタグではないと 解 釈 したからです <>の 中 身 を 半 角 の syokyu などにすると 何 らかのタグと 判 断 して 表 示 されなくなってしまいます 19 / 278

ファイル 名 の 注 意 半 角 英 数 字 の 小 文 字 を 用 いる ひらがな カタカナ 漢 字 はファイル 名 に 使 用 しないようにしましょう ウェブサーバーが 正 しく 認 識 できなくて 正 常 に 表 示 できない 場 合 があります サーバーによっては 大 文 字 小 文 字 を 区 別 する 場 合 もあるので ここでは 小 文 字 に 統 一 します 記 号 はアンダーバー _ だけ 半 角 スペースなどにも 特 別 な 意 味 が 割 り 当 てられている 場 合 があります 使 用 できるのはアンダーバー _ だけだと 覚 えておいてください 入 力 するにはシフトキーを 押 しながら ろ キーを 押 します 'キーボードの 右 シフトキーあたり( 拡 張 子 は html ファイル 名 の 末 尾 につける 拡 張 子 には html'4 文 字 ( htm'3 文 字 ( の 2 種 類 があります ここではhtmlに 統 一 します トップページは index.html index.html と 名 付 けられたファイルがあると ウェブサーバーはこのファイルを トップページとして 扱 います 最 初 に 表 示 したいウェブページのファイル 名 には index.html と 付 けておきましょう 20 / 278

第 2 節 一 般 定 義 文 書 型 宣 言 その HTML ファイルがどのようなルールにしたがって 書 かれているのかを 宣 言 します HTML の 一 番 初 めの 行 に 記 入 して このウェブページは このルールにしたがって 書 いています と ブラウザに 知 らせるためのものです ブラウザは 宣 言 されたルールに 合 わせて HTML を 解 釈 して 表 示 します 途 中 で 改 行 せずにすべてを 1 行 で 記 入 します 文 字 が 多 くなるとウィンドウのサイズによっては 端 で 表 示 が 折 り 返 される 場 合 もあります 実 際 の 試 験 ではあらかじめ 記 入 されているので 丸 覚 えする 必 要 はありません 問 題 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> このファイルをブラウザで 開 いてみても 何 も 表 示 されません タイトルにはファイル 名 が 表 示 されています 21 / 278

<html> HTML 文 書 の 宣 言 HTML 文 書 では <html> <head> <body> の 3 種 類 のタグで 大 枠 の 文 書 構 造 を 定 義 します <html>はその 文 書 が HTML 文 書 であることを 宣 言 します 文 書 型 宣 言 の 以 降 の 内 容 はすべて <html>~</html>の 中 に 配 置 します 問 題 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> </html> このファイルをブラウザで 開 いてみても 先 ほどと 同 じようにまだ 何 も 表 示 されません 22 / 278

lang= ja html タグに 入 力 する 情 報 で 言 語 コードを 指 定 します 言 語 コードを 指 定 することで ドキュメントで 使 用 している 言 語 を 明 らかにし ブラウザの 表 示 に 利 用 します Google などの 検 索 サービスは 言 語 を 指 定 して 検 索 結 果 を 絞 り 込 むことができますが その 際 にも この 設 定 が 利 用 されているので 適 切 な 言 語 を 指 定 しておきましょう 問 題 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> </html> 言 語 コードの 代 表 例 ja en es ru zh 日 本 語 英 語 スペイン 語 ロシア 語 中 国 語 23 / 278

<head> ヘッダ 情 報 ヘッダには その 文 書 のさまざまな 情 報 を 記 載 します 主 に 文 書 のタイトル スタイルシートの 指 定 などが 該 当 します 次 に 説 明 する<title>タグで 指 定 するタイトル 以 外 は ほとんどブラウザ 上 に 表 示 されません 問 題 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> </head> </html> 24 / 278

文 字 コード 宣 言 文 字 コード'キャラクタコード(とは コンピュータで 扱 う 文 字 や 記 号 ひとつひとつに 割 り 当 てられた 固 有 の 数 字 のことです 複 数 の 文 字 コード 体 系 があり 適 切 なコードを 指 定 しないとブラウザは 文 字 化 けしてしまいます 今 回 の 試 験 ではシフト JIS コードが 指 定 されているので HTML にもそのように 記 載 します 実 際 の 試 験 ではあらかじめ 記 入 されているので 丸 覚 えする 必 要 はありません 問 題 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset= Shift_JIS"> </head> </html> 代 表 的 な 日 本 語 の 文 字 コードには シフト JIS'しふとじす( <meta http-equiv="content-type" content="text/html; charset=shift_jis"> EUC'いーゆーしー( <meta http-equiv="content-type" content="text/html; charset=euc-jp"> Unicode'ゆにこーど( <meta http-equiv="content-type" content="text/html; charset=utf-8"> の 3 種 類 があります 25 / 278

ブラウザの 表 示 メニュー エンコード を 開 いて 現 在 の 文 字 コードを 確 認 したり 他 の 文 字 コードを 指 定 することもできます html ファイルを 保 存 する 時 に 指 定 した 文 字 コードと 合 っていない 場 合 は ブラウザで 文 字 化 けが 発 生 します ウェブページを 閲 覧 していて 文 字 化 けが 発 生 した 時 は このメニューで 他 の 文 字 コード を 選 んでみると 正 しく 表 示 されることがあります 文 字 コードがわかっている 場 合 コードから 文 字 に 直 接 変 換 することもできます メモ 帳 で 日 本 語 入 力 に 切 り 替 えてから 半 角 で 2603 と 入 力 して F5 キーを 押 してみましょう 雪 だるまのような 絵 文 字 が 表 示 されます 26 / 278

<title> 文 書 のタイトル 文 書 にタイトルをつけるタグで 省 略 できない 要 素 です かならずひとつは<head>タグ 内 に 記 載 する 必 要 があります ここで 指 定 されたタイトルはブラウザのウィンドウタイトルに 表 示 されます お 気 に 入 り'ブックマーク(や 検 索 エンジンの 検 索 結 果 などにも 用 いられるため ウェブページの タイトルはとても 重 要 な 要 素 です 問 題 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset= Shift_jis"> <title> 坊 っちゃん</title> </head> </html> ここでようやくブラウザ 画 面 に 変 化 が 表 れます タブに 指 定 したタイトルが 表 示 されました 27 / 278

<body> 本 文 <body>タグには ブラウザに 表 示 される 文 書 の 本 体 を 記 述 します この 中 に 書 かれている 内 容 が ブラウザのウィンドウに 表 示 されます 問 題 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset= Shift_jis"> <title> 坊 っちゃん</title> </head> <body> <p> 親 譲 りの 無 鉄 砲 で 小 供 の 時 から 損 ばかりしている </p> </body> </html> ブラウザのウィンドウに 入 力 したテキストが 表 示 されました 28 / 278

文 字 化 けの 確 認 今 開 いている index.html ファイルはシフト JIS で 作 成 保 存 されています ブラウザの 表 示 メニュー エンコード を 開 いて その 他 から 違 う 文 字 コードを 選 んでみましょう シフト JIS の 文 字 コードを 指 定 した 言 語 の 文 字 コード 表 で 無 理 やり 変 換 するので 文 字 化 けが 起 きてしまいます 再 読 み 込 みすれば 文 字 コード 宣 言 も 再 度 認 識 するので 文 字 化 けは 解 消 します html ファイルや css ファイルなどを 保 存 するときに 指 定 した 文 字 コードと ファイル 内 で 指 定 した 文 字 コードはかならず 一 致 させるようにしてください Windows のメモ 帳 で 作 成 した 場 合 は 特 に 指 定 しない 限 りシフト JIS で 保 存 されます 29 / 278

第 3 節 本 文 の 仕 切 り <p> 段 落 指 定 した 範 囲 を 段 落 としてまとめて 扱 います 前 後 に 改 行 が 自 動 的 に 挿 入 されます 段 落 という 意 味 の Paragraph の 略 p が 用 いられているので ピー パラグラフ と 読 みます 問 題 02-p の index.html をメモ 帳 で 開 いて 適 切 に 編 集 してみましょう 問 題 02-p <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>こころ</title> </head> <body> <p> 先 生 と 私 </p> <p> 私 はその 人 を 常 に 先 生 と 呼 んでいた </p> <p>だからここでもただ 先 生 と 書 くだけで 本 名 は 打 ち 明 けない </p> <p>これは 世 間 を 憚 る 遠 慮 というよりも その 方 が 私 にとって 自 然 だからである </p> </body> </html> 30 / 278