HTML5 による Web ページ 作 成 のための 基 本 資 料 HTML5 & CSS3 リファレンス について 大 阪 教 育 大 学 教 養 学 科 情 報 科 学 講 座 武 内 良 樹 1.はじめに 皆 さんは Web ページはどのようにして 作 成 されていますか? 現 在 では, 大 学 の Web ページもほとんどが 外 注 で, 専 門 業 者 により 作 成 されているようです 教 職 員 の 公 的 な Web ページは 業 者 による 作 成 が 増 える 一 方 で,インターネットによる 個 人 的 な 情 報 発 信 のツールも Web ページ 以 外 にも 色 々と 便 利 なものが 利 用 できるようになっていますので, 以 前 に 比 べて 自 分 で Web ページを 作 成 する 機 会 は 減 ってきているかもしれません しかし,また 一 方 で, 私 たちの 日 常 生 活 で Web ページを 利 用 する 機 会 は, 減 るどころか, 間 違 いなく 増 えています 調 べ 物 をするときは,まず 真 っ 先 に,Web ページ 検 索 を 使 用 しますし, 私 の 場 合, 買 い 物 についても 最 近 は 店 舗 での 購 入 よりインターネット 通 販 を 利 用 する 機 会 の 方 が 多 い 状 況 になっています ご 存 知 の 方 も 多 いと 思 いますが,すでに 2014 年 10 月 28 日 に W3C によって,HTML5 の 最 終 的 な 仕 様 が 発 表 され, 勧 告 が 実 施 されました HTML = HyperText Markup Language は Web ページ の 記 述 用 言 語 であり,HTML5 はその 最 新 バージョンです この HTML5 では, 動 画 やアニメーシ ョンをプラグインなしでブラウザー 上 に 表 示 したり,JavaScript によりページ 内 に 図 形 を 描 画 した り,GPS を Web ページ 上 で 利 用 したりなどする 機 能 があります ( 日 経 BP マーケッティング HTML5 でアプリ 開 発 レビュー ISBN978-4-8222-2274-1 参 照 ) また, 機 能 拡 張 された CSS = Cascading Style Sheets の 最 新 バージョン CSS3 とともに 用 いることで, 要 素 を 回 転 したり,3D 変 換 したり, 影 をつけたりなどすることも 容 易 に 可 能 になっています 一 般 的 には,HTML5 や CSS3 は 機 能 的 に 高 度 となるとともに,Web ページや Web ソフト 開 発 の 専 門 家 のためのものとなり, 初 心 者 が 使 うにはハードルが 高 いという 考 え 方 が 多 いように 思 い ます 確 かに,HTML5 では,フォントの 色 やサイズを 変 えるときにも, 行 の 左 寄 せ, 右 寄 せ, 中 央 揃 えを 指 定 するときにも,すべて CSS を 使 う 必 要 があります それで,そのように 思 われるの かもしれません しかし, 実 際 のところ, 過 去 に HTML4.01 までを 使 って 自 分 で 作 成 したページ と 同 レベルのものであれば,むしろ,それらより 簡 単 に 作 成 できます このレベルでは, 単 に 慣 れの 問 題 でしかありません 例 えば, 私 の 担 当 する 実 習 授 業 で 学 生 達 が 作 成 する Web ページの 状 況 を 見 てみますと,HTML4.01 までを 使 っていた 平 成 23 年 度 までより,HTML の 文 法 上 も 見 栄 え の 上 でも, 明 らかにレベルアップしているようです それに 一 役 買 っているのが,ここで 取 り 上 げる HTML5 による Web ページ 作 成 のための 資 料 である HTML5 & CSS3 リファレンス です この HTML5 & CSS3 リファレンス は, 単 に 私 の 授 業 で 使 用 するために 作 成 されたものでは なく,Web ページ 作 成 のための 資 料 として, 学 内 やさらにはインターネットを 通 じてその 情 報 を -29-
必 要 としている 人 を 対 象 として, 広 範 囲 の 情 報 提 供 をすることを 目 標 としています なお, 平 成 23 年 度 ~ 平 成 26 年 度 までの4 年 間 は, 教 養 学 科 の 部 局 活 性 化 経 費 の 支 援 を 受 けました 本 稿 は,この HTML5 & CSS3 リファレンス について 紹 介 して,より 多 くのかつ 広 範 囲 の 利 用 を 行 っていただくことをその 目 的 とします 2. HTML5 & CSS3 リファレンス 作 成 の 背 景 今 から5 年 ほど 前, 平 成 23 年 (2011 年 )の 初 めに 翌 年 度 ( 平 成 23 年 度 )のシラバスを 準 備 し ているとき,インターネットで W3C による HTML5 の 勧 告 時 期 に 関 する 記 事 を 見 つけました 今 後 の 実 習 授 業 で 参 考 になるかもと, 軽 い 気 持 ちで 読 んでみると 2012 年 中 に W3C による HTML5 の 勧 告 が 予 定 されている とのことです 2012 年 というとその 翌 年 になりますが,HTML5 の 勧 告 で 予 定 されている 内 容 を 見 て,さらに 驚 きました そこには,HTML5 の 勧 告 後 は, 新 規 の Web ページの 作 成 には HTML5 のみを 使 用 する HTML4.01 までは, 既 存 の Web ページの 更 新 処 理 のみに 使 用 する とされていました HTML5 の 言 語 仕 様 を 見 てみると,HTML4.01 までとは 大 幅 な 変 更 があり, HTML は, 文 書 の 論 理 構 造 を 記 述 する 用 途 のみに 使 用 する 色,サイズ,レイアウトなど, 見 栄 えや 装 飾 にかかわる 部 分 は,すべて CSS を 用 いる と 書 いてあります これは 当 時 の 私 にとっては 一 大 事 です というのも,その 時 点 で 担 当 していた 電 子 計 算 機 入 門 では Web ページ 作 成 を 実 習 の 主 要 な 項 目 としていました しかも,CSS については ほとんど 触 れることなく,HTML のみによる Web ページ 作 成 を 指 導 していたのです それだと, 約 1 年 後 には 全 く 使 えない 知 識 に 変 ってしまうことになります すでに 使 えなくなっている HTML4.01 以 前 による Web ページ 作 成 を 教 えるわけには 行 きませんので,これはどうしても 平 成 24 年 度 からは HTML5 へ 切 り 替 える 準 備 をする 必 要 がある ということになりました (ただし, 実 際 には,W3C による HTML5 の 勧 告 は 約 2 年 間 遅 れました ) そこで, HTML5 による Web ページ 作 成 を 実 習 授 業 で 取 り 上 げることを 前 提 に, 参 考 資 料 を 探 し 始 めました ところが,その 時 点 では,まだ,HTML5 の 仕 様 は 草 稿 (http://www.w3.org/tr/2011/wd-html5-20110113/)の 状 態 で 勧 告 候 補 にさえなっておりません でした それで,インターネットで 調 べてみても,W3C によるその 草 稿 ( 英 語 )を 除 けば,HTML5 に 関 する 情 報 のほとんどが,HTML4.01 以 前 の 解 説 ページに, 付 け 足 しとして HTML5 では となる 予 定 などと 書 かれている 程 度 です HTML5 による Web ページ 作 成 の 際 に 参 考 とし て 使 用 できるまとまったリファレンス 資 料 がなかったのです 幸 いにして, 書 籍 を 探 してみると, かなりまとまったものが 数 冊 あることがわかりました しかし,これらも 必 要 な 情 報 が 欠 けてい るものが 多 くて, 実 習 授 業 のテキストや 参 考 書 とするには 情 報 不 足 か 高 価 で 難 しすぎる かのどちらかでした ということで, 平 成 24 年 度 から HTML5 による Web ページ 作 成 を 実 習 授 業 で 取 り 上 げるた めには, 平 成 23 年 度 中 に 独 自 の HTML5 & CSS3 リファレンス を 作 成 して 利 用 できるように することが 必 須 の 条 件 ということになりました そこで, 平 成 23 年 度 には, 部 局 活 性 化 経 費 で 情 -30-
報 処 理 関 連 科 目 の 実 習 用 資 料 教 材 の 充 実 と 整 理 なる 事 業 名 で 経 費 支 援 を 受 けて,その 主 要 な 項 目 として HTML5 & CSS3 リファレンス の 作 成 を 開 始 することになったわけです 3. HTML5 & CSS3 リファレンス の 開 発 目 標 と 特 徴 一 般 的 に,Web ページを 作 成 する 方 法 としては, 次 の3 種 類 があります (1) 知 人 や Web ページ 作 成 業 者 に 依 頼 する 有 料 で Web ページ 作 成 を 代 行 する 多 くの 業 者 があります (2) Web ページ 作 成 ソフトで 作 成 する IBM 社 の ホームページ ビルダー など Web ページの 作 成 支 援 をするソフトが 各 社 から 発 売 されています フリーのものやシェアウェアなどもあります (3) テキストエディタや HTML エディタで 作 成 する Web ページ 作 成 用 の 言 語 である HTML を 用 いて, 要 素 や 属 性 を 直 接 記 述 します いうまでもなく, HTML5 & CSS3 リファレンス は (3) による Web ページ 作 成 作 業 を 支 援 する ためのものです まず 最 初 に, HTML5 & CSS3 リファレンス に 収 録 する 資 料 の 範 囲 形 態 として, (i) HTML の 要 素 と 属 性,CSS のプロパティのすべてについて,それぞれ 独 立 したページとして, 要 点, 解 説, 使 用 例 などを 収 録 する という 基 本 方 針 を 決 めました また,HTML と CSS のバージョンとしては, (ii) HTML5 以 前 や CSS3 以 前 のもので,すでに 廃 止 されたものも 収 録 する ことにしました とくに,(i) については, 当 時 HTML5 や CSS3 は 策 定 の 準 備 段 階 であり, 最 終 的 な 規 格 となるまでには, 廃 止 や 追 加 等 の 変 更 は 避 けられないことが 予 測 され, 実 際 にそれ 以 降 HTML5 の 勧 告 までには, 多 くの 変 更 が 行 われました それらの 変 更 に 柔 軟 に 対 応 するためには, HTML の 要 素 と 属 性,CSS のプロパティ 毎 に 独 立 したページであることが 好 ましいということで, そう 決 めました また,あえて (ii) としたのは, 廃 止 された HTML の 要 素 と 属 性 などに 慣 れてい る 利 用 者 が,これらの 廃 止 された 項 目 のページにアクセスすることで, それらが HTML5 では 廃 止 されていて 使 用 できないこと 選 択 項 目 について,HTML5 による CSS などを 用 いた 代 替 方 法 などについての 情 報 を 適 切 なタイミングで 利 用 者 に 知 らせることができると 考 えたからです この 収 録 内 容 範 囲 についての 基 本 方 針 の 決 定 後, 次 に 問 題 となったのは 各 項 目 ページへの アクセス 方 法 です 当 然,ハイパーリンク 等 を 備 えた メニュー により, 目 的 項 目 の 表 示 や 変 更 を 行 うことになります 作 成 する 以 上 は, 内 容 的 に 充 実 していてかつ 使 い 易 いものにしたい ということから,この メニュー に 関 する 基 本 方 針 として, 以 下 のようなことを 決 めました すべてのメニュー 選 択 項 目 を 集 約 する (HTML の 要 素 と 属 性,CSS のプロパティのすべて) ブラウザー 上 での 占 有 サイズを 小 さくする ( 標 準 的 なウィンドウ サイズの4 分 の1 程 度 ) 選 択 項 目 にかかわらず 常 にページ 内 に 表 示 する (HTML5 や CSS3 の 基 本 事 項 のページでも) -31-
これらは, 他 者 により 公 開 されている 既 存 のリファレンスを 使 ったときの 私 の 感 想 に 基 づいて 決 めたものです とはいえ, 当 然 ながら, 通 常 は 選 択 項 目 の 数 が 増 えれば, 選 択 操 作 に 割 り 当 て るスペースも 多 くなりますので, 当 初 はなかなか 答 えが 見 つかりませんでした 平 成 23 年 度 の 後 半 になって,ようやくドロップダウンリストをいくつか 上 部 に 並 べる 現 在 の 形 を 思 いつきました これだと,スペースをとらない 上,よく 見 られるツリー 式 のメニューのように 展 開 した 枝 を 再 度 折 りたたまないと 別 の 枝 の 項 目 が 選 択 できないというようなことは 起 きません( 図 1 参 照 ) 以 上 の 概 要,すなわち, 収 録 内 容 形 態 とそれらをアクセスするためのメニューの 形 式 が 決 ま りますと,その 後 は,HTML の 各 要 素 と 属 性,CSS の 各 プロパティについて, 大 学 院 生 や 学 生 に よる 規 格 や 使 用 法 と 使 用 例 等 の 情 報 収 集 の 作 業 に 合 わせて, 実 際 に 各 項 目 毎 の Web ページを 作 成 する 作 業 を 行 っていきました 平 成 23 年 度 から, 現 時 点 までの 作 業 履 歴 の 概 要 は 表 1のようになります 表 1 HTML5 & CSS3 リファレンス 作 成 の 履 歴 ( 平 成 23 年 度 ~) 年 度 平 成 23 年 度 平 成 24 年 度 平 成 25 年 度 平 成 26 年 度 平 成 27 年 度 作 業 項 目 HTML の 要 素 (タグ), 属 性 (コンテンツ 属 性 )と CSS のプロパティは 廃 止 されたも のを 含 めてすべて 収 録 する 方 針 を 決 定. メニューは 常 時 表 示 とし,ドロップダウンによる 選 択 機 能 を 提 供 することを 決 定. HTML5 の 各 要 素 と 属 性 について,それぞれ,W3C の 仕 様 ( 草 稿 )にある 内 容 を 表 にま とめて 整 理 したものを 収 録. HTML5 の 要 素 の 解 説 や 使 用 例 については, とほほの WWW 入 門 を 参 考 に,HTML5 により 更 新 された 部 分 については 新 たに 追 加. HTML5 の 属 性 の 解 説 や 使 用 例 については, 書 籍 等 による 情 報 収 集 結 果 を 参 考 に 作 成. とほほの WWW 入 門 の 作 者 杜 甫 々 氏 より, 転 載 許 可 と 学 内 サーバーでの 公 開 の 許 可 を 取 得. CSS3 で 予 定 されている 全 プロパティについて,W3C の 仕 様 ( 草 稿 )にある 内 容 を 表 に まとめて 整 理 したものを 収 録. CSS のプロパティのうち, 使 用 頻 度 や 重 要 度 が 高 いものについて, 解 説 や 使 用 例 を 作 成. 引 き 続 き HTML5 の 要 素 の 解 説 や 使 用 例 については,オリジナルなものを 新 たに 追 加. メニュー 部 分 のユーザー インターフェースの 改 良 ( 選 択 状 態 の 保 持, 他 項 目 への 移 動 ) 杜 甫 々 氏 より,インターネット 公 開 の 許 可 を 取 得. W3C の HTML5 勧 告 候 補 の 内 容 に 沿 って, 更 新 部 分 を 修 正. 引 き 続 き CSS のプロパティの 解 説 や 使 用 例 を 作 成 追 加. 逆 引 きメニュー を 上 部 メニューとは 別 コンテンツとして 作 成. 引 き 続 き CSS のプロパティの 解 説 や 使 用 例 を 作 成 追 加. メニュー 部 分 のユーザー インターフェースの 改 良 (モード 切 替, 表 示 位 置 指 定 ) 逆 引 きメニュー を 既 存 の 上 部 メニューと 切 り 替 えて 表 示 する 形 で 追 加. W3C の HTML5 勧 告 の 内 容 に 沿 って, 勧 告 候 補 からの 変 更 部 分 を 修 正. 引 き 続 き CSS のプロパティの 解 説 や 使 用 例 を 作 成 追 加.( 現 在 利 用 可 能 な CSS プロ パティについては,ほぼすべてのものについて 収 録 を 完 了 ) メニュー 部 分 のユーザー インターフェースの 改 良 (モード 切 替, 表 示 位 置 指 定, 逆 引 きメニューの 選 択 項 目 が 別 項 目 の 表 示 に 切 り 替 えても 維 持 されるように 修 正 ). なお, 表 1に 記 載 はありませんが, [1] HTML5 および HTML の 基 本 事 項 の 解 説 ページ(ファイル:index.html) [2] CSS3 に 関 する 基 本 事 項 の 解 説 ページ(ファイル:CSS\css3.html) の 作 成 も 行 い,これらのページの 上 部 に 選 択 メニューに 続 いて 表 示 される 表 の 各 項 目 がハイパー -32-
リンクにより,[1] と [2] のためのメニューとして 機 能 します( 図 1 参 照 ) 図 1 HTML5 & CSS3 リファレンス のトップ ページ 4. HTML5 & CSS3 リファレンス の 利 用 方 法 とインターフェースの 特 徴 上 述 の 通 り, HTML5 & CSS3 リファレンス は,すでにインターネット 上 に 公 開 されていま す このため, 学 内, 学 外 を 問 わず,インターネット 接 続 が 可 能 な 状 態 であれば,IE などのブラ -33-
ウザーに 次 の URL を 入 力 することで, 自 由 に 表 示 して 利 用 できます HTML の URL:https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/ ただし, 一 般 的 には, 上 記 URL を 記 憶 したり, 入 力 したりすることなく, 次 のようにする 方 が, より 簡 単 だと 思 われます HTML5 & CSS3 リファレンス の 表 示 方 法 : (1) Google 検 索 (https://www.google.co.jp/)で, HTML5 & CSS3 リファレンス をキーワード として 検 索 を 実 行 します( 検 索 するときには, は 付 けません) (2) 一 覧 の 上 位 に HTML5 & CSS3 リファレンス - 大 阪 教 育 大 学 が 表 示 されますので,これ をクリックします (3) HTML5 & CSS3 リファレンス のトップ ページ( 図 1)が 表 示 されます なお,この 方 法 ですと,(1) で 多 少 キーワードが 違 っていても, 少 し 順 位 が 下 がるかもしれません が, HTML5 & CSS3 リファレンス - 大 阪 教 育 大 学 が 検 出 項 目 として 表 示 されますので,そ の 点 でも 簡 単 です (URL の 場 合 は1 文 字 でも 間 違 っていると 表 示 できません ) 私 の 場 合, 自 分 で 作 成 公 開 したページではありますが, 普 通 この 方 法 で 表 示 して 利 用 しています (もち ろん,ブラウザーのブックマークに 登 録 しておくのも 良 いでしょう ) 前 述 の 通 り, HTML5 & CSS3 リファレンス はテキストエディタや HTML エディタを 使 って HTML 文 書 を 作 成 するときに 利 用 することを 前 提 としています なお, 私 の 授 業 では,Microsoft Visual Studio Express 2012 for Web を HTML エディタとして 今 年 度 まで 使 用 して 来 ました HTML 文 書 の 雛 形 の 自 動 入 力, 要 素 (タグ)や 属 性 等 のカラー 表 示 やインテリセンス (Intellisense) と 呼 ば れる 入 力 支 援 機 能 も 備 えて 高 機 能 な 上, 使 い 勝 手 もよく, 学 生 からも 好 評 です Windows の 場 合, HTML エディタとしては,これの 最 新 版 Microsoft Visual Studio Express 2015 for Web( 以 下 VS2015ExWeb と 略 記 )がお 勧 めです 本 稿 の 目 的 から 外 れないように 詳 細 は 省 略 しますが, VS2015ExWeb を 用 いての HTML 文 書 の 作 成 手 順 の 概 要 は, 次 のようになります HTML 文 書 の 作 成 手 順 : (1) VS2015ExWeb を 起 動 し,HTML ファイルの 新 規 作 成 を 選 択 ([ファイル] [ 新 しいファイル] [HTML ページ]),または, 既 存 の HTML ファイルを 開 く( ファイルを 開 く ボタン ファイル 選 択 ) 新 規 作 成 の 場 合 には, 自 動 的 に HTML5 文 書 の 雛 形 が 入 力 されます (2) HTML 文 書 のテキスト, 要 素 と 属 性,CSS のプロパティなどを 入 力 します(このとき HTML5 & CSS3 リファレンス を 活 用 します) (3) 入 力 の 進 行 に 応 じて, 適 宜 HTML ファイルを 保 存 して,ブラウザーで 表 示 して 確 認 します ( 保 存 ボタン, ブラウザーで 表 示 ボタン) (4) HTML の 文 法 上 完 成 した(と 思 われる) 文 書 となったとき, 適 宜 HTML5 ファイルの 文 法 チェックを 専 用 サイトで 実 行 します(Validator.nu (X)HTML5 Validator (Living Validator): http://html5.validator.nu/ がお 勧 めです) この (2) で HTML5 & CSS3 リファレンス を 使 用 するわけですが,このリファレンスのトップ ページを 表 示 した 以 降 の 使 用 方 法 は,ほとんど 画 面 表 示 から 自 明 です( 授 業 では 特 に 使 用 方 法 を -34-
説 明 していませんが, 学 生 はほぼ 自 在 に 使 用 できています) ただし,せっかくの 機 会 ですので, とくに, 上 部 のメニューの 機 能 や 使 用 方 法 を 中 心 に,ちょっと 説 明 を 書 いておくことにします HTML5 の 各 要 素 (タグ)ページの 表 示 HTML5 & CSS3 リファレンス の 最 上 部 の タグ という 表 示 の 右 側 にある5つのドロップダ ウンリストで, 要 素 名 を 選 択 することで, 選 択 した 要 素 (タグ)のページが 表 示 されます( 図 2) このとき, 選 択 した 要 素 が HTML4.01 以 前 の 廃 止 されたものである 場 合 には, 図 3のようなペー ジが 表 示 されます 図 2 HTML5 & CSS3 リファレンス の 要 素 (タグ)のページ( 部 分 )の 例 -35-
図 3 HTML5 & CSS3 リファレンス の 廃 止 された 要 素 のページ( 部 分 )の 例 HTML5 の 各 属 性 ページの 表 示 HTML5 & CSS3 リファレンス の2 番 目 の 属 性 という 表 示 の 右 側 にある5つのドロップダ ウンリストで, 属 性 名 を 選 択 することで, 選 択 した 属 性 のページが 表 示 されます( 図 4) この とき, 選 択 した 属 性 が HTML4.01 以 前 の 廃 止 されたものである 場 合 には, 図 5のようなページが 表 示 されます -36-
図 4 HTML5 & CSS3 リファレンス の 属 性 のページ( 部 分 )の 例 CSS3 の 各 プロパティ ページの 表 示 HTML5 & CSS3 リファレンス の3 番 目 の CSS という 表 示 の 右 側 にある5つのドロップダ ウンリストで,プロパティ 名 を 選 択 することで, 選 択 した CSS プロパティのページが 表 示 されま す( 図 6) このとき, 選 択 した CSS プロパティがすでに 廃 止 されたものである 場 合 には, 図 7 のようなページが 表 示 されます -37-
図 5 HTML5 & CSS3 リファレンス の 廃 止 された 属 性 のページ( 部 分 )の 例 前 へ ボタン, 後 へ ボタンによる 表 示 の 移 動 タグ 属 性 CSS のいずれかのドロップダウンリストの 項 目 が 選 択 されているとき, (1) 前 へ ボタンを 押 すと,ドロップダウンリストの 現 在 表 示 している 項 目 のすぐ 上 の 項 目 の 表 示 に 切 り 替 わります (2) 後 へ ボタンを 押 すと,ドロップダウンリストの 現 在 表 示 している 項 目 のすぐ 下 の 項 目 の 表 示 に 切 り 替 わります -38-
HTML5 解 説 ボタンの 機 能 HTML5 解 説 ボタンを 押 すと HTML5 & CSS3 リファレンス のトップ ページ( 図 1) の 表 示 に 切 り 替 わります CSS3 解 説 ボタンの 機 能 CSS3 解 説 ボタンを 押 すと HTML5 & CSS3 リファレンス の CSS3 に 関 する 基 本 事 項 の 解 説 ページ(ファイル:CSS css3.html) の 表 示 に 切 り 替 わります なお.このページの 上 部 に 図 1と 同 一 の 表 が 表 示 されますが,それ 以 降 は, HTML5 に 関 する 解 説 と CSS3 に 関 する 解 説 で 内 容 が 異 なります 図 6 HTML5 & CSS3 リファレンス の CSS プロパティのページ( 部 分 )の 例 -39-
図 7 HTML5 & CSS3 リファレンス の 廃 止 された CSS プロパティのページ( 部 分 )の 例 逆 引 きメニュー ボタンの 機 能 逆 引 きメニュー ボタンを 押 すと, 逆 引 きメニュー 項 目 の 一 覧 表 が 表 示 されます( 図 8) なお,この 一 覧 表 の 選 択 項 目 は, 表 示 モード で 逆 引 き を 選 択 したときのドロップダウン リストの 選 択 項 目 と 同 一 です 後 者 は,iOS や Android などのモバイル 系 端 末 のブラウザーでは 正 常 に 表 示 が 出 来 ないため, 別 途 このような 形 でメニューを 作 成 してあります -40-
図 8 HTML5 & CSS3 リファレンス の 逆 引 きメニュー ボタンによる 表 示 表 示 モード ラジオボタンによる 表 示 の 切 り 替 え 表 示 モード ラジオボタンの 簡 易 詳 細 逆 引 き のいずれかを 選 択 すると, 次 のよ うに 表 示 が 切 り 替 わります (1) 簡 易 ボタンを 押 すと, 図 1と 同 一 のドロップダウンリストの 配 列 表 示 ながら, 重 要 度 の 高 い 選 択 項 目 のみが 表 示 されて,それ 以 外 のものは 選 択 できなくなります (2) 詳 細 ボタンを 押 すと, 図 1の 表 示 となり,すべての HTML の 要 素 と 属 性,CSS のプロ パティが 選 択 項 目 として 表 示 され 選 択 可 能 になります (3) 逆 引 き ボタンを 押 すと,ドロップダウンリストの 配 列 表 示 が 変 わり, 図 9のような 逆 -41-
引 き 項 目 の 選 択 メニューに 切 り 替 わります 図 9 HTML5 & CSS3 リファレンス の 表 示 モード 逆 引 き 選 択 時 の 表 示 表 示 位 置 ラジオボタンによる 表 示 の 切 り 替 え 表 示 位 置 ラジオボタンの 固 定 スキップ 移 動 のいずれかを 選 択 すると, 次 のよ うに 表 示 が 切 り 替 わります (1) 固 定 ボタンを 押 すと, 選 択 メニューは, 選 択 項 目 のコンテンツのスクロール 状 態 とは 無 関 係 に, 常 にブラウザーウィンドウの 上 部 の 固 定 位 置 に 表 示 されます( 図 10) -42-
(2) スキップ ボタンを 押 すと, 項 目 選 択 時 にメニュー 部 分 のみスクロールして, 選 択 項 目 コンテンツの 先 頭 がブラウザーウィンドウの 最 上 部 に 来 るように 表 示 します( 図 11) (3) 移 動 ボタンを 押 すと, 選 択 メニューはページ 内 の 他 のコンテンツと 一 緒 にスクロール します ( 既 定 値 ) なお, 表 示 モード ラジオボタン, 表 示 位 置 ラジオボタン,および, 表 示 モード が 逆 引 き の 場 合 を 含 めての 選 択 メニューの 選 択 状 態 は, 新 しい 項 目 を 選 択 表 示 しても 維 持 され ます 図 10 表 示 位 置 ラジオボタンの 固 定 選 択 時 の 表 示 例 -43-
図 11 表 示 位 置 ラジオボタンの スキップ 選 択 時 の 表 示 例 5.おわりに HTML の 要 素 と 属 性,CSS のプロパティのすべてを 収 録 することにしましたが,これらの 項 目 数 は 膨 大 なものとなったため, 現 時 点 においても, 属 性 の 項 目 については 未 作 成 未 公 開 の ものが 残 っています また,すでに 作 成 済 みの 項 目 についても, 使 用 例 などの 資 料 が 提 供 されて いなかったり, 十 分 ではなかったりするものも 残 っています それでも, 現 在 インターネットで 自 由 に 参 照 できる Web ページとしては, 他 には 例 がない 充 実 したものが 出 来 たと 自 負 しています 今 後 も, HTML5 & CSS3 リファレンス をより 充 実 した 資 料 とするための 更 新 は 続 けて 行 き -44-
たいと 考 えています 最 後 に, HTML5 & CSS3 リファレンス を 作 成 するにあたり, 資 料 収 集 に 際 して, 下 記 の 総 合 基 礎 科 学 専 攻 大 学 院 生, 情 報 科 学 専 攻 学 生 諸 君 に 多 大 なる 協 力 をしていただきました この 場 を 借 りて, 謝 意 を 表 したいと 思 います 小 野 吏 悠 太, 習 田 幸 亮, 松 見 亮, 髙 田 雄, 竹 田 卓 弥, 広 瀬 隆 平 上 嶌 夏 海, 上 田 晃 嗣, 村 山 智 也, 山 下 さつき ( 順 不 同 ) -45-