18

3.2.1 HTML,CSS 概 要 第 3 部 第 2 章 HTML,CSS 私 達 が 普 段 見 ている Web ページは そのほぼ 全 てが HTML(HyperText Markup Language)と CSS(Cascading Style Sheets)をはじ めとするいくつかの 技 術 の 組 み 合 わせによって 作 られています そして 私 達 でも 簡 単 に Web ページを 作 ることができます この 章 では HTML と CSS に 関 して 皆 さんが 初 めて Web ページを 作 る 際 に 覚 えておくべきことを 解 説 します 順 を 追 ってひとつひと つ 解 説 する チュートリアル や 各 々の 要 素 について 詳 しく 説 明 する リファレンス ではありませんので 注 意 してください なお 次 章 で HTML や CSS を 簡 単 に 入 力 できるソフトウェア Dreamweaver について 解 説 していますので この 章 で 基 礎 を 抑 えてから 次 章 に 進 みましょう 図 2-1 Web ページは HTML をはじめとする 複 数 のファイルで 構 成 される 図 2-2 HTML の 例 図 2-3 CSS の 例 1. HTML はテキストエディタで 簡 単 に 作 れる HTML は ただの 文 書 に 段 落 見 た 目 属 性 などの 要 素 を 付 け 加 える 言 語 です 元 々はただの 文 書 (テキストファイル)ですから それ に 要 素 を 付 け 加 えた HTML ファイル(および CSS ファイル)は 一 般 的 なテキストエディタで 編 集 できます つまり 特 別 なソフトウェアなどがなくても 魅 力 的 な Web サイトを 作 ることができるのです これは Word ファイルや PDF ファイルと 大 きく 異 なる 点 であり HTML が 普 及 した 要 因 のひとつと 言 えるでしょう Campus System Guide- 49

2. HTML は 時 代 とともに 変 化 している HTML は 1989 年 スイスの 研 究 所 が 大 量 のデータを 効 率 的 に 管 理 するために 開 発 しました そしてインターネットの 普 及 とともに 発 展 した 結 果 画 像 動 画 音 楽 などを 扱 えるようになったほか ブログ SNS のように 情 報 発 信 も 行 えるようになりました これらの 変 化 の 過 程 で HTML の 書 き 方 も 変 化 しています 新 しい 書 き 方 には デザイン 面 以 外 にも 維 持 管 理 しやすい 様 々な 装 置 でも 使 いやす い 視 覚 に 障 害 のある 方 も 使 えるといった 利 点 があります キャンパスシステムガイドでは 2014 年 現 在 よく 使 われる 書 き 方 を 解 説 しています(HTML5,CSS3 を 基 準 に 互 換 性 に 問 題 が 少 ない 要 素 を 説 明 しています) 3. CSS を 覚 えよう いまから Web ページの 作 り 方 を 学 ぶ 皆 さんにとって HTML と 同 時 に CSS を 学 ぶことは 必 須 です HTML が 登 場 してしばらくの 間 は 文 字 の 色 や 大 きさなどは 全 て HTML 内 に 書 いていました しかし 書 き 方 が 非 常 に 煩 雑 であること ソ ースコードが 見 難 くなること デザインの 修 正 が 面 倒 になることなどから HTML には 内 容 と 構 造 のみ 書 き デザイン 面 の 記 述 をすべて 他 のファイルに 分 離 することになりました そうして 生 まれたのが CSS です CSS は Web ページの 見 た 目 に 関 して HTML とは 別 に 用 意 します CSS 側 で この 部 分 は 太 字 で 赤 この 部 分 は 大 きい 文 字 とい った 具 合 で 指 定 します 具 体 的 な 記 述 方 法 は 後 ほど 説 明 します この 構 造 とデザインの 分 離 はとても 大 切 です CSS を 用 いて 構 造 とデザインを 分 離 することには 次 のような 利 点 があります HTML のソースコードがわかりやすくなる 複 数 のページ(HTML)で 統 一 したデザインを 使 うことができる デザインの 変 更 を 一 括 で 行 える( 維 持 管 理 の 省 力 化 ) CSS を 切 り 替 えることで 様 々なデバイスでも 最 適 な 表 示 を 行 える 検 索 エンジンや 視 覚 障 害 者 向 けのソフトウェアが 解 析 しやすい 特 に 理 由 がない 限 り 構 造 とデザインの 分 離 は 徹 底 するべきです 最 新 の HTML である HTML5 ではさらに 構 造 とデザインの 分 離 を 強 化 する 要 素 が 追 加 されています 興 味 がある 方 は 調 べてみてく ださい (header タグ section タグ 等 ) 4. 他 の 人 が 作 ったサイトを 見 て 学 ぼう ここでは 最 初 に 学 ぶべきごくごく 簡 単 な 事 のみ 解 説 しています 解 説 していない 要 素 や 使 い 方 などが 多 数 あります また HTML の 仕 様 やトレンドは 絶 えず 進 化 しており ここに 書 いてある 内 容 も 時 代 遅 れになっていくでしょう HTML や CSS に 関 しては すべてを 列 挙 した 情 報 サイトがとてもたくさんあります また 企 業 など 他 の 人 が 作 ったホームページのソース コードを 参 考 にしてもよいでしょう 自 分 の 作 りたいサイトに 合 わせ いろいろなことを 学 んでみてください 5. 正 しいコードを 心 がけよう 実 は HTML や CSS のコードに 多 少 ミスがあっても ブラウザーはうまく 解 釈 し それっぽく 表 示 してしまうことがあります しかしそうした コードはエラーの 原 因 になりますし ブラウザーによっては 正 しく 表 示 されません 常 に 正 しいコードを 書 くことを 心 がけましょう コードの 文 法 が 正 しいかは 以 下 のサイト 等 でチェックしましょう 例 : http://validator.w3.org/, http://www.htmllint.net/html-lint/htmllint.html など 一 方 で 正 しい HTML にも 関 わらず ブラウザーのバグによって 正 しく 表 示 されないことがあります 特 に Internet Explorer の 古 いバー ジョンはバグが 多 いにも 関 わらず 利 用 者 が 多 く 問 題 になることもあります 場 合 によっては 他 の 方 法 を 使 うなど バグへの 対 応 が 必 要 になることもあります 50- Campus System Guide

3.2.2 HTML,CSS の 編 集 の 仕 方 第 3 部 第 2 章 HTML,CSS HTML や CSS は テキストエディタで 編 集 し ブラウザーで 確 認 する その 繰 り 返 しで 作 ります テキストエディタではただ 文 字 の 羅 列 だ ったものが ブラウザーではその 指 示 通 りレイアウトや 装 飾 がされ 表 示 されます HTML の 編 集 にはテキストエディタを 用 います Windows に 付 属 しているメモ 帳 では 力 不 足 なので Terapad や 秀 丸 エディタ Sublime text2 などを 使 用 してくだ さい これらのソフトウェアは 横 浜 キャンパスの 演 習 室 の PC にあらかじめインスト ールされています また 自 宅 等 で 使 いたい 場 合 は インターネットから 自 由 にダウ ンロード 可 能 です また Dreamweaver やホームページビルダーといったホームページ 作 成 ソフト を 使 用 することもできます なお Word はテキストエディタではありませんので 使 用 できません ここでは 例 として Terapad での 操 作 方 法 を 説 明 しますが 他 のテキストエディタ でも 編 集 方 法 は 変 わりません 図 2-4 Web 制 作 の 基 本 フロー 補 足 : 拡 張 子 の 表 示 この 設 定 は 学 外 の PC で HTML を 編 集 する 場 合 に 必 要 です 横 浜 キャンパスの PC では 初 めから 設 定 されています Windows でファイルを 扱 う 際 拡 張 子 が 表 示 されていないと 様 々なエラーの 原 因 となります ( 拡 張 子 とは ファイル 名 末 尾 の.html.css.txt.jpg といった 部 分 ) 画 像 を 参 考 に 拡 張 子 が 表 示 されるよう 設 定 して 下 さい 図 2-5 拡 張 子 の 表 示 1. Terapad の 起 動 それでは スタートメニューから Terapad を 起 動 し てみましょう 次 のように 操 作 します 図 2-6 Terapad の 起 動 ここで 文 字 を 書 き 始 めれば 新 しいファイルとして 編 集 をはじめることが 出 来 ます Campus System Guide- 51

2. ファイルを 開 く 既 存 のファイルを 開 くには 表 示 させたいファイルを Terapad のウィンドウにドラッグ&ドロップして 下 さい ファイルの 内 容 が 表 示 され 編 集 できるようになったはずです 3. ファイルの 新 規 保 存 図 2-7 Terapad でファイルを 開 く 新 規 ファイルの 場 合 次 のように 操 作 します 名 前 をつけて 保 存 から 保 存 すると 文 字 コードの 設 定 が 行 えず 文 字 化 けの 原 因 となります 注 意 してください 52- Campus System Guide 図 2-8 Terapad 文 字 / 改 行 コード 指 定 保 存

4. ファイルの 上 書 き 保 存 第 3 部 第 2 章 HTML,CSS 既 存 のファイルの 場 合 Terapad の 上 部 メニュー ファイル から 上 書 き 保 存 をクリックすれば 保 存 されます 図 2-9 Terapad 上 書 き 保 存 編 集 中 にキーボードの Ctrl キーと S キー(Save の S)を 押 すことで 素 早 く 保 存 することもできます 5. ブラウザーの 起 動 ブラウザーを 起 動 するには 画 面 最 下 部 にあるタスクバーの Internet Explorer ロゴマークをクリックします 図 2-10 InternetExplorer 起 動 方 法 6. ブラウザーで HTML を 開 く 表 示 させたいファイルを Internet Explorer のウィンドウにドラッグ&ドロップして 下 さい HTML ファイルが 表 示 されたはずです 7. ブラウザーの 画 面 を 更 新 する 図 2-11 InternetExplorer HTML を 開 く Internet Explorer でページを 表 示 した 場 合 その 後 にテキストエディタでファイルを 更 新 しても 自 動 的 には 反 映 されません 更 新 ボタンまたはキーボードの F5 キーを 押 し 再 読 み 込 みを 行 いましょう Campus System Guide- 53

図 2-12 InternetExplorer 再 読 み 込 み これ 以 降 は 図 2-4 の 通 り エディタで 編 集 保 存 を 行 い ブラウザーで 再 読 み 込 み 内 容 の 確 認 を 行 うことの 繰 り 返 しで 作 っていきま す 8. アップロードと 確 認 作 った Web ページを 誰 にでも 見 られる 状 態 にするには Web サーバーにアップロードする 必 要 があります Web サーバーは Web サイトを 設 置 するのに 特 化 したコンピュータで 個 人 であれば 専 門 業 者 からレンタルして 使 うのが 普 通 です とい っても サーバー 自 体 を 借 りるのではなく 専 門 業 者 が 設 置 しているサーバーにデータをアップロードするだけです 企 業 であれば 自 社 でサーバーを 持 っていることもあります 普 通 のパソコンを Web サーバーとして 使 うことも 可 能 ですが セキュリティなどに 問 題 がある ためおすすめしません また 横 浜 キャンパスの 学 生 には 各 個 人 が 使 えるサーバーが 用 意 されていますので これを 使 うことも 可 能 です 使 い 方 に 関 しては 情 報 基 盤 センターHP 等 を 参 照 してください 54- Campus System Guide

3.2.3 HTML まずは HTML の 書 き 方 について 学 びましょう CSS で 装 飾 したり JavaScript で 動 かしたりするためにも 土 台 である HTML をしっかり 作 ることはとても 大 切 です 第 3 部 第 2 章 HTML,CSS 1. HTML の 基 本 HTML タグ HTML ファイルは 単 純 に 言 えば 文 書 の 各 所 を タグ で 囲 み 意 味 をもたせたものです 図 2-13 HTML の 表 示 例 <~>が 開 始 タグ </~>が 終 了 タグです ( br など 終 了 タグが 存 在 しないタグもあります) タグは 基 本 的 には 間 に 挟 んだもの( 文 字 や 画 像 )に 効 果 を 与 えます タグとそれに 囲 まれた 部 分 を 要 素 と 呼 びます ~ 部 分 の 示 す 役 割 を 知 れば 自 ずと HTML が 理 解 できることになります 上 の 図 では h1 タグは 見 出 し p タグは 段 落 strong タグは 強 調 を 表 します 開 始 タグ 内 には 複 数 の 属 性 を 付 けることができます たとえば 上 記 の 例 では html タグの lang が 属 性 名 ja が 属 性 値 です 属 性 値 は 基 本 的 にダブルクォーテーション で 囲 みます また タグは 入 れ 子 にすることができます 入 れ 子 にした 場 合 要 素 同 士 で 親 子 関 係 ができます 図 2-14 ツリー 構 造 を 成 す HTML Campus System Guide- 55

HTML 内 では 改 行 と 行 頭 の 半 角 スペース タブは 無 視 されます これらは 自 分 が 見 やすいコードを 書 くために 利 用 できます 上 記 の 画 像 のようにインデントを 行 い( 行 頭 にタブ 記 号 や 半 角 スペースを 入 れることで 入 れ 子 構 造 をわかりやすくする) 見 やすいコー ドにしておくことで タグの 対 応 関 係 がわかりやすくなり 管 理 修 正 が 楽 になります なおこの 解 説 では 行 頭 のインデントを 横 棒 で 表 し ています ハイフンではありませんので 入 力 しないでください 一 方 全 角 文 字 (スペース 含 む)の 扱 いには 注 意 しなければなりません HTML CSS ファイルや 画 像 ファイルの 名 前 に 全 角 文 字 は 使 えません また CSS 内 では 全 角 文 字 を 使 うことが 出 来 ません HTML 内 でも 全 角 文 字 を 使 えない 場 所 があります(コンピュータが 処 理 できないため そのまま 表 示 される 部 分 以 外 に 使 うことが 出 来 ない) 特 にタグを 全 角 文 字 で 書 いたり 行 頭 に 全 角 のスペースを 置 いたりすると 正 常 に 処 理 されなくなってしまいます HTML4.01 と 比 べ HTML5 で 意 味 が 変 化 するタグや 削 除 されたタグがあります 例 :hr タグ( 水 平 線 話 題 の 区 切 り) b タグ( 太 字 強 調 ではない 太 字 ) i タグ( 斜 体 特 に 意 味 のない 斜 体 ) small タグ( 文 字 を 小 さく 注 釈 など) em タグ( 強 調 強 勢 ) 一 部 タグは 省 略 可 能 ですが 理 解 を 深 めるため 省 略 しないほうがよいでしょう ここではすべて 省 略 せずに 解 説 しています 例 :head,body,p タグの 終 了 タグ 2. 骨 格 を 成 すタグ HTML ファイルは 図 2-15 のような 構 成 になっています 全 体 を html タグで 囲 み その 中 に head 要 素 と body 要 素 をおきます 各 々の 要 素 については 後 ほ ど 説 明 します この 他 html タグの 前 に doctype 宣 言 というものを 書 く 必 要 があります(<!DOCTYPE html>)の 部 分 ブラウザー 側 に HTML のバージョンを 認 識 させるために 書 きますが とりあえずこのように 書 いておけばよいでしょう 図 2-15 HTML の 全 体 像 3. HEAD タグの 中 には 文 書 の 情 報 を 書 く head 要 素 にはファイルに 関 する 情 報 を 書 きます 例 えばページのタイトルや 中 身 の 簡 単 な 説 明 などです また ページ 全 体 に 関 わる CSS や JavaScript なども head 要 素 内 に 書 きます title 要 素 :ページのタイトル title 要 素 (ページのタイトル)のみ 必 須 です title 要 素 を 指 定 すると ブラウザーで 表 示 した 際 にそのタイトルがタイトルバーに 表 示 さ れます meta charset: 文 字 コードの 指 定 また 文 字 化 けを 防 ぐため 文 字 コードに 関 する 指 定 も 行 ったほうがよいでしょう <meta charset="utf-8"> と 書 くことで ブラウザーはそのページが UTF-8 という 文 字 コードで 書 かれていることを 認 識 します UTF-8 以 外 の 文 字 コード(Shift-JIS 等 )を 使 用 することはおすすめしません meta タグは 文 書 に 関 する 様 々な 情 報 を 含 めることができるタグで 中 身 の 説 明 や 著 者 名 などを 書 くことも 出 来 ます 図 2-16 meta 要 素 56- Campus System Guide

4. BODY タグの 中 には 文 書 の 内 容 を 書 く 第 3 部 第 2 章 HTML,CSS いよいよ body 要 素 です body 要 素 に 書 いたことが ブラウザーに 表 示 されます しかし デザイン( 見 た 目 )に 関 することは HTML では 書 きません 見 た 目 はあとで CSS を 使 い 指 定 します p 要 素 : 段 落 文 章 を 書 く 際 は p タグを 使 います p タグは パラグラフ= 段 落 を 意 味 するタグです 文 章 の 段 落 ごとに p タグにおさめていくのが 正 しい 書 き 方 です br タグ: 改 行 HTML は 文 書 の 中 身 と 構 造 を 司 る 言 語 ですから 文 章 のどこで 改 行 するかというのは 本 来 ブラウザーが 判 断 するものです br タグ を 用 いれば 改 行 は 可 能 ですが 基 本 的 には 使 いません ちなみに br タグには 終 了 タグは 必 要 ありません 大 きな 間 隔 を 開 けたい 場 合 でも br タグは 連 続 して 使 ってはいけません なお HTML ファイルを 作 る 際 に Enter キー 等 で 改 行 しても その 改 行 は 無 視 されます 5. リンクを 作 ってみよう やはり Web ページといえば 他 のサイトやページへのリンクです そのリンクを 作 ってみましょう a 要 素 :リンク a タグで 囲 んだ 部 分 はリンクとなり クリックできるようになります また href 属 性 を 使 用 し リンク 先 の URL を 指 定 します a タグには 開 くウィンドウを 指 定 する target 属 性 マウスを 乗 せた 際 の 説 明 を 表 示 する title 属 性 などが 存 在 します 図 2-17 a 要 素 6. 画 像 を 貼 ってみよう 画 像 を 貼 るためには img タグを 使 用 します img 要 素 : 画 像 src 属 性 を 使 用 し 画 像 のアドレスを 指 定 します 終 了 タグは 必 要 ありません 図 2-18 img 要 素 alt 属 性 は 代 替 テキストです 画 像 を 表 示 できない 場 合 などに 表 示 されるもので 画 像 の 内 容 を 詳 細 に 説 明 する 必 要 があります バ リアフリーの 観 点 からも なるべく 書 き 込 むようにしましょう なお img 要 素 を a 要 素 の 中 におくことで 画 像 リンクを 作 成 することが 出 来 ます 補 足 : 絶 対 パス 相 対 パス ファイルの 場 所 の 指 定 として 絶 対 パス と 相 対 パス があります 絶 対 パスは 住 所 で 言 えば 日 本 国 神 奈 川 県 都 筑 区 牛 久 保 西 というようにどこからでも 唯 一 の 場 所 指 定 を 指 します ですから ネット 上 では http://www.yc.tcu.ac.jp/ のように 場 所 を 指 定 する 方 法 です 対 する 相 対 パスですが これは 相 対 的 なパス つまりファイル 自 身 から 見 た 別 のファイルの 位 置 の 指 定 方 法 です ですから 住 所 Campus System Guide- 57

で 言 えば お 隣 の さん や 隣 町 の 八 百 屋 さん といったような 他 の 場 所 へ 行 けば 違 うものを 指 すことになってしまうような 指 定 方 法 です 相 対 パスの 記 述 においては 最 初 に 現 在 の( 自 分 自 身 の)フォルダを 表 す./ を 書 き その 後 にディレクトリ(フォルダ) 名 やファイ ル 名 を 書 いていきます 自 分 より 上 のフォルダを 表 すには../ と 書 きます 1 自 分 自 身 (HTML ファイル 等 )と 同 じディレクトリにあるファイルを 指 定 するには 単 にファイル 名 のみを 書 きます 例 :../sample1.html 2 自 分 自 身 (HTML ファイル 等 )から 見 て 下 のディレクトリのファイルを 指 定 するには../ディレクトリ 名 /ファイル 名 と 書 きます 例 :../dir/sample2.html 3 自 分 自 身 (HTML ファイル 等 )から 見 て 上 のディレクトリのファイルを 指 定 するには../../ファイル 名 と 書 きます 例 :../../sample3.html 7. 表 を 作 ってみよう 表 を 作 るには table tr th td といったタグを 使 います table,tr,th,td:テーブル( 表 組 み) 表 組 みは 少 々 複 雑 です Table タグの 中 に 行 を 意 味 する tr タグを 入 れ その 中 にセルを 意 味 する th タグ( 見 出 し)または td タグ( 通 常 )を 入 れていきます また td タグに colspan 属 性 や rowspan 属 性 を 指 定 することで 複 数 のセルを 結 合 することも 出 来 ます 図 2-19 テーブル テーブル 要 素 をこのまま 設 置 しても 枠 線 は 表 示 されません 枠 線 の 表 示 は CSS で 行 います(このあと 解 説 しています) テーブルタグを 使 用 することでコンテンツを 容 易 に 上 下 左 右 に 並 べられますが テーブルをデザイン 目 的 で 用 いてはいけません 8. その 他 のタグ その 他 よく 使 うタグをご 紹 介 します strong,b,i,em,cite:テキストの 意 味 付 け strong 要 素 はその 部 分 が 重 要 であることを 意 味 します 一 方 b 要 素 は 太 字 で 表 示 するべき 内 容 であることを 意 味 し 重 要 という 意 味 は 持 ちません キーワードなどに 使 います(この 解 説 文 で もキーワードは 太 字 で 表 しています) 同 じく i 要 素 は 斜 体 で 表 示 するべき 内 容 であることを 意 味 し 何 らかの 意 味 は 持 ちません em 要 素 は 強 勢 を 意 味 します 日 本 語 文 書 では 通 常 使 いません 論 文 等 で 作 品 名 等 を 書 く 際 に 斜 体 で 表 記 することがありますが これには cite 要 素 を 使 います u 要 素 を 使 うと 下 線 が 引 かれます 58- Campus System Guide

第 3 部 第 2 章 HTML,CSS 図 2-20 テキストの 意 味 付 け いくつかのタグで 見 た 目 が 同 じになっていますが これはあくまで 一 般 的 なブラウザーでたまたま 同 じように 表 示 されるだけです 意 味 を 考 えて 使 うようにしましょう 単 純 に 見 た 目 を 変 えたいだけの 場 合 span タグで 囲 み CSS で 設 定 するべきです h1~h6: 見 出 し h1,h2,h3 などのタグを 使 うと 見 出 しを 作 ることができます h1 タグは 基 本 的 にページのタイトルとして その 下 の 小 見 出 しは h2 さらに 下 の 小 見 出 しには h3 を 使 います 見 出 しタグを 使 うと 文 字 の 大 きさが 変 わりますが 文 字 の 大 きさを 変 えるためだけに 使 ってはいけません ol,ul,li:リスト( 箇 条 書 き) ol 要 素 ( 順 序 の 関 係 ないリスト)または ul 要 素 ( 順 序 付 きリスト)の 中 に li 要 素 を 並 べると 箇 条 書 きのように 項 目 を 列 挙 することができ ます 箇 条 書 きを 行 う 際 には 基 本 的 にリストタグを 使 いましょう コメントアウト ソースコード 上 にコメントを 書 きたい 場 合 は <!-- -->という 表 記 を 使 いコメントアウトします 図 2-21 コメントアウト ソースコード 上 にこのように 書 くと ブラウザー 上 では 表 示 されません 自 分 のためのコメントの 他 一 時 的 に 消 しておきたい 項 目 などをコメントタグで 囲 うと 便 利 です 9. ブロック 要 素 とインライン 要 素 body タグ 内 に 書 く 要 素 のほとんどは ブロック 要 素 とインライン 要 素 に 分 類 されます 覚 えておきましょう ブロック 要 素 は ( 基 本 的 に) 縦 に 並 びます また 縦 横 の 大 きさを 決 めることもできます インライン 要 素 は 文 字 のように 横 に 並 びます 基 本 的 に 縦 横 の 大 きさを 決 めることはできません インライン 要 素 の 中 に ブロック 要 素 を 含 めることはできません 図 2-22 ブロック 要 素 とインライン 要 素 HTML5 では この 分 類 は 廃 止 され 7 種 類 のカテゴリに 分 類 されます これはとても 複 雑 であり 覚 えにくく 使 いにくいものです 使 い 方 はほとんど 変 わっていませんから 現 在 の 2 分 類 を 覚 えておくとよいでしょう Campus System Guide- 59

10. span 要 素 と div 要 素 次 は 汎 用 要 素 と 呼 ばれる span 要 素 と div 要 素 について 解 説 します div,span: 汎 用 要 素 div 要 素 は なんの 意 味 も 持 たないブロック 要 素 です span 要 素 は なんの 意 味 も 持 たないインライン 要 素 です その 部 分 を 囲 ってまとめてスタイルを 指 定 したい 場 合 や JavaScript で 操 作 したい 場 合 に 使 用 します 具 体 的 な 使 い 方 はこの 先 03.2.5 実 際 に Web ページを 作 る で 説 明 していきます 11. id と class ほぼすべての HTML タグには id と class という 属 性 をつけることができます id は 要 素 につける 名 前 です 複 数 の 要 素 に 同 じ id をつけることはできません その 要 素 の 固 有 の 名 前 になります class は 要 素 につける 種 別 名 です 複 数 の 要 素 に 同 じ class 名 をつけることができます イメージ としてはまさに 学 校 のクラス 分 けで 同 じ 仲 間 に 同 じ class 名 をつけ まとめて 操 作 する 際 に 使 いま 図 2-23 id と class す 具 体 的 な 使 い 方 はこの 先 03.2.5 実 際 に Web ページを 作 る で 説 明 しています 12. HTML のまとめ 以 上 で 紹 介 したものが 主 な HTML 要 素,タグです これらを 実 際 にどのように 使 うのかについては 03.2.5 実 際 に Web ページを 作 る にて 解 説 しています 今 回 紹 介 した 以 外 にも 要 素,タグには 沢 山 の 種 類 があります 興 味 がある 方 は 調 べてみてください ただし 構 造 とデザインの 分 離 に 反 するものなど 現 在 では 非 推 奨 とされているタグは 使 わないようにしましょう 非 推 奨 とされるタグの 例 :<font>( 文 字 の 色 などを 指 定 ) <center>( 中 央 揃 え) 60- Campus System Guide

3.2.4 CSS 第 3 部 第 2 章 HTML,CSS ここからは CSS について 説 明 します CSS は どの 部 分 をどのような 見 た 目 にするか を 設 定 していくシンプルな 言 語 です 1. 書 き 方 の 基 本 CSS はどのように 書 くか 次 のように 記 述 します 図 2-24 CSS の 表 示 例 画 像 のとおり どの 部 分 にどのようなスタイルを 適 用 するかを 書 いていきます CSS の 記 述 は 図 のようになっています 図 2-25 CSS の 書 き 方 2. どこに 書 くか CSS を HTML に 対 して 適 用 するには 3 パターンの 方 法 があります 別 ファイルに 書 く HTML ファイルとは 別 に CSS ファイルを 作 り そこに CSS を 書 くことができます この 場 合 link タグを 使 って HTML ファイルから CSS ファイルにリンクを 貼 ります 通 常 この 方 法 を 使 うべきです 図 2-26 別 の CSS ファイルを 参 照 している 例 head 内 に 書 く HTML の head 内 に style タグをおき 内 部 に CSS を 書 くことができます ページごとに CSS を 変 更 したい 時 に 使 います Campus System Guide- 61

図 2-27 head 要 素 内 に Style タグを 配 置 した 例 各 タグの style 属 性 に 書 く HTML 要 素 のスタイルを 個 別 に 書 く 場 合 要 素 の style 属 性 に CSS を 書 くことができます この 場 合 セレクタ( 後 述 )は 必 要 ありません 図 2-28 要 素 に 直 接 スタイルを 指 定 する 例 3. セレクタ スタイルを 適 用 する 対 象 を 指 定 するのがセレクタです ここで 先 ほど 説 明 した id と class が 登 場 します セレクタは 次 の 三 種 類 が 基 本 です タグを 指 定 : タグ 名 をそのまま 書 く id を 指 定 : #を 先 頭 に 書 く class を 指 定 :.(ドット)を 先 頭 に 書 く この 他 にもさまざまな 種 類 のセレクタがあります 図 2-29 セレクタ なお CSS で 指 定 したスタイルは 指 定 された HTML 要 素 の 子 孫 全 てに 継 承 されます( 例 外 あり) 62- Campus System Guide

第 3 部 第 2 章 HTML,CSS 図 2-30 CSS の 継 承 4. プロパティ セレクタで 対 象 の 要 素 を 選 んだら そのプロパティに 値 を 設 定 します プロパティには 様 々な 種 類 があり 様 々な HTML 要 素 に 対 して 使 えるものから 一 部 の HTML 要 素 専 用 のものまであります ここではいくつかのプロパティを 例 に 解 説 しますが その 他 のプロパティについても 必 要 に 応 じて 調 べ 使 用 してください 5. 文 字 の 見 た 目 を 変 えてみよう 文 字 の 見 た 目 を 変 えるには 次 に 挙 げるプロパティを 使 用 します 文 字 の 大 きさ : font-size 文 字 の 色 : color 文 字 の 太 さ( 太 字 ) : font-weight 図 2-31 文 字 の 装 飾 (CSS) この 他 斜 体 にする font-style 書 体 を 指 定 する font-family 下 線 や 取 消 線 をつける text-decoration などのプロパティがあります またこれらを 統 合 省 略 した font プロパティを 使 うことも 出 来 ます これらのプロパティを 文 字 を 含 む 要 素 に 指 定 すれば 見 た 目 を 自 由 に 変 えることができます ここで 設 定 できる 項 目 は 以 前 は HTML の font タグで 設 定 できたものです 構 造 とデザインの 分 離 に 従 い font タグは HTML5 で 削 除 されました 補 足 :カラーコード CSS 内 で 色 を 表 す 場 合 基 本 的 な 色 は 英 語 でその 色 の 名 前 を 書 くだけで 表 示 させることが 出 来 ます(red,green,orange 等 ) 色 名 には 多 くの 種 類 がありますから 興 味 がある 方 は 調 べてみてください 細 かい 色 を 表 したい 場 合 は #で 始 まる 16 進 数 6 桁 (または 3 桁 )のカラーコードで 表 します Campus System Guide- 63

図 2-32 カラーコードの 例 補 足 : 単 位 CSS で 文 字 や 要 素 を 設 定 する 際 いくつかの 単 位 を 使 用 することが 出 来 ます 基 本 的 には 以 下 の2 種 類 を 使 います 代 表 的 な 単 位 は px(ピクセル)です 基 本 的 に 1pxは 画 面 の 1 ドットを 表 します 行 間 の 指 定 などにはよく em を 利 用 します 1em はフォントの 大 きさを 基 準 とするので 行 間 (line-height)を 2em に 指 定 すれば 文 字 の 下 の1 行 分 の 行 間 があくことになります 6. ページの 背 景 を 変 えてみよう 図 2-33 CSS で 使 える 単 位 ページ 全 体 の 設 定 をするためには body 要 素 にスタイルを 設 定 します 背 景 に 関 するプロパティをいくつか 挙 げます 背 景 色 :background-color 背 景 画 像 :background-image 図 2-34 背 景 色 と 背 景 画 像 上 記 のほか 背 景 画 像 の 繰 り 返 しを 指 定 する background-repeat 背 景 画 像 の 位 置 を 指 定 する background-position などのプロ 64- Campus System Guide

パティがあります またこれらを 統 合 省 略 した background プロパティを 使 うことも 出 来 ます 第 3 部 第 2 章 HTML,CSS 画 像 を 指 定 する 場 合 は HTML ファイルを 基 準 に 画 像 ファイルを 指 定 する 必 要 があります これらのプロパティは 一 般 的 なブロック 要 素 では 概 ね 使 用 可 能 です 7. 枠 線 をつけてみよう ブロック 要 素 には 枠 線 をつけることも 出 来 ます 一 般 的 には border プロパティを 使 用 します border プロパティでは 太 さ 色 スタイルをまとめて 指 定 します 順 番 は 関 係 ありません 図 2-35 枠 線 border-left プロパティ 等 を 使 い 上 下 左 右 の 枠 線 を 別 々に 指 定 することも 出 来 ます また 最 近 のブラウザーでは 枠 線 の 角 を 丸 くす る border-radius プロパティを 使 える 場 合 があります 8. テーブルに 枠 線 を 表 示 しよう HTML でテーブル 要 素 を 設 置 しただけでは ブラウザーでは 枠 線 が 表 示 されません セレクタはカンマ 区 切 りで 複 数 記 述 することにより それぞれのセレクタに 合 致 する 要 素 すべてにスタイルを 適 用 することができます そこで ページ 内 の table 要 素 td 要 素 th 要 素 の 全 てに 枠 線 を 設 定 することで 表 に 枠 線 が 表 示 されるようにしてみましょう 図 2-36 テーブルに 枠 線 を 表 示 これで 枠 線 は 表 示 されますが 線 が 太 くなってしまいました これは 1px の 枠 線 をもったセル 同 士 が 並 ぶことで 見 た 目 上 2px になっ てしまったのが 原 因 です table 要 素 に border-collapse プロパティで 枠 線 同 士 を 重 ねるよう に 設 定 します 図 2-37 枠 線 同 士 を 重 ねる これで ページ 内 の 全 ての 表 に 正 しく 枠 線 が 表 示 されます Campus System Guide- 65

発 展 :いろいろなセレクタ セレクタはカンマ 区 切 り 以 外 にも 様 々な 指 定 方 法 があります 調 べてみてください 図 2-38 いろいろなセレクタ 9. マウスを 乗 せたら 見 た 目 が 変 わるようにしてみよう CSS を 使 えば 例 えばマウスポインタが 乗 った 時 だけ 色 が 変 わる 文 字 を 作 ることも 出 来 ます それには 擬 似 クラスを 使 います 以 下 に 例 を 載 せます 図 2-39 マウスオンで 見 た 目 が 変 わる 上 記 のように 書 くと class sample の 要 素 の 上 にマウスポインタを 乗 せた 時 だけ 文 字 が 緑 色 になります ここで 使 ったのが hover 擬 似 クラスです CSS のセレクタは 条 件 に 合 致 する 要 素 を 探 すものですが 例 えば 上 記 の 例 では class が sample で hover 状 態 にある(マウスが 乗 っ ている) 要 素 を 探 す セレクタになっていると 解 釈 してください 擬 似 クラスには クリックされている 要 素 を 表 す active 擬 似 クラスなどもあります 10. 要 素 の 大 きさを 変 えてみよう ブロック 要 素 は 自 由 に 大 きさを 変 えることが 出 来 ます 以 下 の 2 つのプロパティを 用 います 幅 : width 高 さ: height 図 2-40 要 素 の 大 きさを 変 える 大 きさをきっちりと 決 めず 最 小 値 や 最 大 値 のみを 定 める min-width,max-width といったプロパティもあります 66- Campus System Guide

11. margin と padding 第 3 部 第 2 章 HTML,CSS ブロック 要 素 には margin(マージン)と padding(パディング)をつけることが 出 来 ます margin は 外 側 の 余 白 padding は 内 側 の 余 白 です margin 同 士 は 重 なりあうという 特 性 を 持 っています 12. CSS のまとめ 図 2-41 margin と padding 以 上 で 紹 介 したものが 主 な CSS の 使 い 方 およびプロパティです 実 際 にどのように HTML と 組 み 合 わせて 使 うのかについては 次 の 章 にて 解 説 しています ここで 紹 介 した 以 外 にも CSS のプロパティには 様 々なものがあります 中 には 一 部 のブラウザーでしかサポートされていないものや 実 験 的 に 採 用 されている 先 進 的 なものなどもあります 興 味 がある 方 は 調 べてみてください Campus System Guide- 67

3.2.5 実 際 に Web ページを 作 る ここまでで 主 な HTML 要 素 および CSS プロパティを 紹 介 してきました この 章 ではそれらをどのように 組 み 合 わせて Web ページを 作 るのかについて 例 を 挙 げて 説 明 します 1. 完 成 形 をイメージする サイトを 作 る 際 は 早 速 HTML や CSS を 書 き 始 めるのではなく 完 成 形 をイメージすることが 大 事 です たとえば 図 2-43 のようなものを 紙 に 書 いてみましょう 2. div を 並 べていく 完 成 形 ができたら 今 度 はその 図 に 構 成 を 書 き 加 えていきま す ここで 登 場 するのが 汎 用 ブロック 要 素 div です 今 回 は まず 上 下 に header middle の2つの div を 配 置 し 図 2-42 まずは 紙 に 書 いてみる 後 者 の 中 に 左 右 に left content の div を 配 置 します おおまかな 構 成 が 決 まったら 細 かい 部 分 も 決 めていきましょう どこまで 細 かく 決 めておくかは 好 みで 問 題 ありません 3. 中 身 を 作 る 図 2-43 div の 配 置 を 考 える この 段 階 では いよいよパソコンを 使 い 実 際 に HTML を 打 ち 込 んでいきます 図 2-44 実 際 の HTML,CSS にしていく まず おおまかな 構 成 にそって 骨 組 みを 作 っていきます この 段 階 では 各 要 素 は 空 っぽ 構 いませんが ここではダミーとして を 並 べてあります まずは HTML を 作 り CSS で 並 べたのち 微 調 整 していきましょう 68- Campus System Guide

第 3 部 第 2 章 HTML,CSS 骨 組 みができたら 今 度 は 中 身 を 入 力 していきます HTML と CSS を 同 時 進 行 で 細 かい 部 分 を 調 整 しながら 完 成 させていきます 最 終 的 に 以 下 のようなソースになりました (div に 関 連 する 重 要 な 部 分 のみ 抜 粋 しています ) 図 2-45 ソースコード Campus System Guide- 69

3.2.6 付 録 ここでは 本 文 で 解 説 した 覚 えておくべき こと 以 外 に 覚 えておくとよいことをいくつか 説 明 しています 1. 文 字 実 体 参 照 HTML タグでは < > などの 記 号 を 用 います これらが 本 文 中 にあるとどこがタグなのか 分 からなくなってしまうため 使 うことがで きません ただし 本 文 中 に 文 字 実 体 参 照 という 形 で 記 入 すれば 表 示 することが 出 来 ます 主 な 文 字 実 体 参 照 には 次 のようなものがあります 2. よく 使 うファイル 名 について 図 2-46 文 字 実 体 参 照 の 例 Web サイトにおいて トップページは 通 常 index.html とします これは Web サーバーの 仕 様 で ファイル 名 を 省 略 してアクセスした 際 に 通 常 このファイルが 開 かれるためです サイト 全 体 で 統 一 して 使 う CSS は common.css や style.css とすることが 多 くあります 3. ディレクトリを 用 いたファイル 整 理 のすすめ Web サイトを 作 る 際 ファイルは 整 理 しておかなければなりません Web サイトは 様 々なページが 相 互 にリンクを 張 り 合 うことで 成 り 立 っています また HTML ファイル CSS ファイル 画 像 ファイル スクリ プトファイルなど 多 くのファイルを 管 理 する 必 要 があります サイト 全 体 で 使 うものに 関 しては image,css,script といったディレクトリを 用 意 し まとめて 管 理 しましょう 4. CSS の 優 先 度 同 じ 項 目 に 違 うスタイルを 適 用 した 場 合 どのスタイルが 優 先 されるのでしょうか 答 えは より 後 に 読 み 込 まれたスタイル になりま す 同 じファイルの 中 では 下 の 方 で 書 いた CSS が 優 先 されます また HTML 内 に 直 接 スタイルを 記 述 した 場 合 でも 後 から 指 定 したも のが 優 先 されます 5. デフォルト CSS 図 2-47 CSS を 用 意 しなくても 例 えば h1 タグ 内 の 文 字 は 大 きくなりますし p( 段 落 )タグは 適 当 な 間 隔 を 開 けて 並 びます これはユーザーが 指 定 していない 項 目 のデフォルトの 値 ( 初 期 値 )を 決 めるデフォルト CSS によるものです 70- Campus System Guide

第 3 部 第 2 章 HTML,CSS 各 ブラウザーにはそれぞれデフォルト CSS が 設 定 されているため ユーザーが 何 らかの 設 定 をしなくてもある 程 度 のスタイルを 適 用 し てくれます しかしデフォルト CSS にはブラウザーごとに 差 異 があるため たとえば Internet Explorer での 表 示 と Firefox での 表 示 が 違 うといったことはよくあります 6. 開 発 ツール HTML や CSS は エディタで 書 いて 保 存 して その 都 度 ブラウザーで 確 認 する 必 要 があります これを 面 倒 に 感 じる 場 合 は 専 門 の 開 発 ツールを 使 うことで 楽 になるかもしれません Adobe Dreamweaver( 前 章 で 解 説 )やホームページビルダーといった 有 料 ソフトを 使 えば 見 た 目 を 確 認 しながら HTML を 書 くことが できます また Google Chrome や Firefox にも 拡 張 機 能 として Web 制 作 支 援 ツールがあります 興 味 がある 方 は 調 べてみてください コラム:HTML4 HTML5 と XHTML 文 中 で 何 度 か 登 場 した HTML5 とはなんでしょうか HTML は 登 場 後 何 度 か 改 良 が 加 えられ 1999 年 に 勧 告 (リリース)されたものが HTML4.01 です それから 約 15 年 かけ 満 を 持 して 登 場 したが HTML5 です 検 索 サイトや SNS Web アプリケーションなど 最 新 の Web 動 向 を 反 映 し それらを 便 利 に 使 える ように 作 られているのです HTML5 は 正 式 に 勧 告 (リリース)されたばかりです そのためブラウザーごとに 対 応 の 度 合 いが 異 なります 実 は HTML5 の 前 に HTML4.01 の 後 継 として 作 られた XHTML1.0 という 規 格 がありました XHTML1.0 は 厳 密 な 文 法 が 必 要 と され またブラウザーの 対 応 にも 問 題 が 多 いものでした 結 果 として 移 行 が 進 まず 改 良 版 の XHTML2.0 の 開 発 は 打 ち 切 られ HTML5 に 統 合 されてしまったのです この 裏 には 従 来 HTML や XHTML を 開 発 してきた Web の 中 心 的 な 団 体 W3C と それに 対 立 し 作 られ HTML5 を 提 案 した 団 体 WHATWG(Apple,Mozilla,Opera が 設 立 )の 対 立 や 協 力 といった 事 情 があるようです Campus System Guide- 71