HTML マニュアル 開 発 環 境 構 築 からサイト 構 築 実 践 まで HTML の 基 礎 と 応 用 1.HTML の 構 成 詳 細 ヘッダ 内 に 記 述 可 能 な 要 素 ヘッダ 内 で 複 数 記 述 できる 要 素 文 章 の 更 新 情 報 を 示 す 要 素 ブロックレベル 要 素 見 出 し リスト 表 を 構 成 する 要 素 インライン 要 素 特 別 な 要 素 2.ブラウザとレンタリングエンジン 3. 開 発 環 境 サクラエディタのダウンロード Firefox Firebug のインストール Web Developer のインストール 4.Firebug 操 作 方 法 コンソール 画 面 HTML タブ 接 続 タブ 5.Firebug を 使 用 したデバッグ 6.Web Developer を 使 用 したデバッグ 7.Color Zilla を 使 用 した 開 発 補 助 1
1.HTML の 構 成 詳 細 HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ 略 称 :HTML)は ウェブ 上 のドキュメ ントを 記 述 するためのマークアップ 言 語 マークアップ 言 語 とは 文 章 の 構 造 段 落 などや 見 栄 え フォントサイズ などに 関 する 指 定 を 文 章 とともにテキストファイルに 記 述 するための 言 語 である このため データ 記 述 言 語 に 分 類 される 文 章 に 対 するそれらの 指 定 をマークアップ (markup) と 呼 び マークアップを 記 述 するための 文 字 列 を タグ (tag) と 呼 ぶ HTML では ウェブの 基 幹 的 役 割 を 持 つ 技 術 の 一 つで HTML でマークアップされたドキュメントはほかのドキュ メントへのハイパーリンクを 設 定 できるハイパーテキストであり 画 像 リスト 表 などの 高 度 な 表 現 力 を 持 たせる ことができる HTML では まず 文 書 型 宣 言 が 必 要 となる HTML 4.01 Strict の 文 書 型 宣 言 は 以 下 のようなものである <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 次 に <html> タグを 明 記 する ここから </html> が Web ページ 全 体 になる このタグのなかにページの 情 報 を 記 述 する <head>タグ ページが 読 み 込 まれるときに 一 番 最 初 に 読 み 込 まれるデータを 記 述 する ここには html ページの 文 字 コー ド スタイルシート(.css)と 呼 ばれるページの 外 観 を 共 有 できるファイルのパスの 記 述 また Java Script と 呼 ばれるブラウザ 上 で 実 行 されるインタプリタ 型 のプログラミング 言 語 が 記 述 される Web ページを 実 際 に 開 いたとき ブラウザはまずこのヘッダから 読 み 込 み 次 に<body>タグ 以 降 を 読 み 込 む <body>タグ ここが Web ページでの 本 文 になる Html 文 章 は 大 きく 分 けて<head>タグのくくりと<body>タグのくくりに 分 け られる ここでは 文 字 や 画 像 映 像 (Flash など) 音 楽 (midi,mp3 など)といったマルチメディアコンテンツの 表 示 や Java Script の 処 理 対 象 となるデータを 記 述 する Html 文 章 はフォルダの 階 層 構 造 のような 入 れ 子 の 構 造 になっているので 他 のプログラミング 言 語 と 比 べ 読 みやすく 記 述 しやすくなっている 例 )サンプルの Web ページ <!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=utf-8"> <link rev="stylesheet" href="スタイルシートの 相 対 パス" type="text/css" /> <script type="text/javascript" src="java Script ファイルの 相 対 パス"></script> <script type="text/javascript"><!-- alert("テスト"); //--></script> <title> タイトル </title> </head> <body> 本 文 </body> </html> 2
ヘッダ 内 に 記 述 可 能 な 要 素 title タイトル(document title)を 指 定 する 主 なウェブブラウザ 実 装 系 では タイトルバーに 表 示 される HTML 文 書 で 唯 一 必 須 かつ 省 略 のできない 要 素 base 相 対 パスの 基 準 URL (document base URI) を href 属 性 で 指 定 する ヘッダ 内 で 複 数 記 述 できる 要 素 (repeatable head elements) link 自 分 自 身 と href 属 性 で 指 定 したファイルとの 関 係 を rel 属 性 で 定 義 する rel 属 性 は HTML4.01 で 有 効 なもの には alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark があり 他 に 使 われるものとして shortcut icon がある meta 文 書 の 情 報 (generic metainformation) を 定 義 する object 埋 め 込 みオブジェクト (generic embedded object) であることを 示 す 大 抵 の 場 合 はインライン 要 素 として 使 用 する data 属 性 に URI type 属 性 に MIME タイプ(image/gif 等 )を 指 定 することで FLASH や 音 楽 など 様 々な 種 類 のオブジェクトを 出 力 する 事 ができる 内 容 には 代 替 (オブジェクト 要 素 も 可 )を 記 述 する 例 えば 一 番 外 から オブジェクト 要 素 (FLASH) オブジェクト 要 素 ( 画 像 ) 説 明 文 のように 入 れ 子 にすると FLASH の 利 用 できない 環 境 では 画 像 が FLASH と 画 像 の 利 用 できない 環 境 では 説 明 文 が 出 力 される これは img 要 素 等 の alt 属 性 と 比 べると 高 性 能 な 代 替 システムであるが これに 対 応 しないウェブブラウザも 少 なくない param プロパティ 値 の 設 定 (named property value)を 行 う object 要 素 で 使 用 するメディアに 対 しての 初 期 値 を 設 定 す るために 使 用 する 内 容 は 空 で 終 了 タグは 存 在 しない style スタイル 情 報 (style info)を 記 述 する type 属 性 の 記 述 が 必 要 (text/css 等 ) script スクリプト(script statements)を 記 述 する type 属 性 (text/javascript など)と meta 要 素 でスクリプトタイプの 宣 言 が 必 要 3
文 章 の 更 新 情 報 を 示 す 要 素 ins 追 加 された 文 書 (inserted text)であることを 示 す datetime 属 性 に 追 加 日 時 を 記 載 できる del 削 除 された 文 書 (deleted text)であることを 示 す datetime 属 性 に 削 除 日 時 を 記 載 できる 4
ブロックレベル 要 素 ブロックレベル 要 素 は 見 出 し 段 落 など 文 書 を 構 成 する 基 本 要 素 となるものです ブロックレベル 要 素 の 内 容 モ デルには 別 のブロック 要 素 やインライン 要 素 を 含 むことができますが 逆 にインライン 要 素 の 中 にブロックレベ ル 要 素 を 置 くことはできません p 段 落 (paragraph)を 構 成 する blockquote 引 用 文 (long quotation)であることを 示 す ウェブブラウザによってはインデントして 表 示 することがあるが この 要 素 はあくまで 引 用 目 的 に 用 いるべきで あり 単 にインデントするために 用 いるのは 好 ましくない また 内 容 にクォーテーションマーク( " や ' )を 用 いるのは 避 けるほうが 良 い cite 属 性 で 引 用 元 出 典 を 明 示 することができる pre 整 形 済 みテキスト(preformatted text)の 節 であることを 示 す 内 容 にはインライン 要 素 を 含 める 事 もできるが img object big small sub sup 要 素 は 使 用 できない ウェブブラウザのサイズによる 折 り 返 しがされなくなるため リキッドレイアウトを 行 うには 不 向 き div ブロックレベルでのスタイルコンテナ この 要 素 自 体 に 意 味 は 無 い 文 書 の 構 造 を 示 すときや 既 存 の 要 素 には 含 められない 物 の 代 用 要 素 として 使 用 する noscript スクリプトが 動 作 しない 環 境 での 代 替 コンテンツ(alternate content container for non script-based rendering) であることを 示 す スクリプトが 動 作 する 環 境 では 無 視 される 代 替 となりうるコンテンツを 示 す 要 素 である hr 水 平 線 (horizontal rule)を 示 す 内 容 は 空 で 終 了 タグは 存 在 しない address 著 者 の 情 報 連 絡 方 法 (information on author)を 示 す メールアドレスを 記 述 するのが 一 般 的 ただし address 要 素 内 のメールアドレスがメールアドレス 検 索 ロボットの 標 的 になりスパムメールなどの 被 害 に 遭 う 可 能 性 も ある form コントロール 要 素 を 纏 めた 入 れ 物 であることを 示 す(interactive form) action 属 性 が 必 須 で 入 力 されたデー タの 処 理 を 行 う URI を 指 定 する fieldset フォームコントロールのグループ(form control group)を 示 す 関 連 したフォームコントロールを 記 述 することで 利 便 性 を 高 めることが 出 来 る legend fieldset 要 素 の 表 題 (fieldset legend)を 示 す 5
見 出 し h1, h2, h3, h4, h5, h6 文 章 の 見 出 し(heading)を 示 す h1 が 最 上 位 の 見 出 しで h6 が 最 下 位 の 見 出 し リスト ul 順 序 なしリスト(unordered list)を 示 す 一 つ 以 上 の li 要 素 を 含 む 必 要 がある ol 順 序 付 きリスト(ordered list)を 示 す 一 つ 以 上 の li 要 素 を 含 む 必 要 がある li リストの 項 目 (list items)を 示 す ブロック 要 素 を 含 められるため 入 れ 子 のリストを 作 成 することもできる dl 定 義 のリスト(definition list)であることを 示 す dt 要 素 か dd 要 素 を 1 つ 以 上 含 む 必 要 がある dt 定 義 する 用 語 (definition term)であることを 示 す dd 定 義 の 説 明 (definition description)であることを 示 す 6
表 を 構 成 する 要 素 表 形 式 のデータを 表 す 要 素 群 その 特 性 からレイアウトに 使 用 されることがあるが 間 違 いである また 正 しくマー クアップする 為 には( 他 の 要 素 に 比 べ) 多 少 の 知 識 を 要 する これは 音 声 ブラウザの 挙 動 など アクセシビリティを 考 慮 した 場 合 に 制 約 が 多 いため table 表 (table)を 構 成 する 要 素 の 大 枠 を 示 す summary 属 性 に 表 の 要 約 解 説 を 記 述 する 内 容 の 要 素 には 細 かく 順 番 が 規 定 されていて 以 下 の 通 りである 0 個 か 1 個 の caption 要 素 0 個 以 上 の colgroup 要 素 と col 要 素 0 個 以 上 の thead 要 素 0 個 以 上 の tfoot 要 素 1 個 以 上 の tbody 要 素 caption 表 題 (table caption)を 示 す table 要 素 の 直 下 に 記 述 する thead, tfood, tbody それぞれヘッダ(table header) フッタ(table footer) 本 体 (table body)で 表 内 での 節 (table section)を 示 す 内 容 は tr 要 素 のみで 1 つ 以 上 の 記 述 が 必 要 である また 各 要 素 内 においての 列 の 数 は 等 しくなくてはならな い colgroup 構 造 的 な 列 のグループ(table column group)を 示 す グループ 化 させるには 2 つの 方 法 があり span 属 性 で 列 数 を 指 定 する 方 法 か col 属 性 を 列 数 分 記 述 する 方 法 である col 列 のグループ(table column)を 示 す colgroup 要 素 と 違 い 構 造 的 なグループを 示 さず スタイルの 指 定 を 主 としたグループ 化 を 行 う span 属 性 で グループ 化 する 列 数 を 指 定 する 内 容 は 空 で 終 了 タグは 存 在 しない tr 表 内 の 行 (table row)を 示 す 内 容 に 1 つ 以 上 の th 要 素 か td 要 素 が 必 要 th, td それぞれ ヘッダのセル(table header cell) データのセル(table data cell)を 示 す 視 覚 系 でないユーザーエー ジェントに 対 応 する 為 にいくつかの 整 形 方 法 がある 7
インライン 要 素 インライン 要 素 は 主 としてブロックレベル 要 素 の 内 容 として 用 いられるもので 文 書 の 構 造 を 構 成 するというより ブロックレベル 要 素 内 の 特 定 の 部 分 になんらかの 役 割 や 機 能 を 持 たせる 要 素 です たとえば ある 語 句 に 対 して ハイパーリンク 機 能 を 与 えるアンカー 要 素 特 定 の 語 句 を 強 調 する 要 素 などです インライン 要 素 は その 内 容 に 文 字 データあるいは 他 のインライン 要 素 を 持 つことができますが ブロックレベル 要 素 を 含 むことはできません 物 理 要 素 (fontstyle) 見 た 目 を 定 義 する 要 素 スタイルシートで 代 替 が 可 能 i b u 文 字 を 斜 体 (italic)にする 文 字 を 太 字 (bold)にする 文 字 に 下 線 (underline)を 引 く s (strike) 文 字 に 中 央 線 を 引 く 打 ち 消 し 線 または 訂 正 線 big 文 字 を 大 きく(large)する small 文 字 を 小 さく(small)する 8
論 理 要 素 (phrase) 論 理 的 な 意 味 を 表 現 する 要 素 em 強 調 (Indicates emphasis)する strong 強 く 強 調 (Indicates stronger emphasis)する dfn 定 義 された 用 語 (defining)を 示 す code プログラムなどのソースコード(computer code)を 示 す samp プログラムなどによる 出 力 のサンプル(sample output from programs, scripts, etc.)を 示 す kbd ユーザが 入 力 する 文 字 (text to be entered by the user)を 示 す アプリケーションのチュートリアルなどでユーザが 自 由 に 入 力 できる 箇 所 であることを 示 す 際 などに 用 いる var プログラムなどに 用 いる 変 数 (variable or program argument)を 示 す cite 出 典 (citation or a reference)を 示 す addr 略 語 (abbreviated form)を 示 す title 属 性 に 略 さない 状 態 の 語 を 明 示 することができる acronym 頭 字 語 (acronym)を 示 す abbr 要 素 と 同 様 に title 属 性 に 略 さない 状 態 の 語 を 明 示 することができる 9
特 別 な 要 素 a アンカー(anchor)であることを 示 す href 属 性 にリンク 先 URI を 指 定 しハイパーリンクを 作 成 する 内 容 にはリ ンク 先 の 概 要 を 表 記 する 内 容 だけを 見 てリンク 先 が 判 断 できることが 望 ましく ここをクリック 等 は 使 うべき でないとされる 内 容 が 冗 長 になる 場 合 は title 属 性 で 説 明 を 付 加 することができる accesskey 属 性 でショー トカットキーを 設 定 することができ ユーザビリティの 向 上 が 期 待 できる img 埋 め 込 み 画 像 (Embedded image)であることを 示 す src 属 性 に URI を 指 定 し 画 像 を 表 示 させる 内 容 は 空 で 終 了 タグは 存 在 しない alt 属 性 で 画 像 の 説 明 を 記 述 することが 必 要 である これは 画 像 に 対 応 できないユーザ ーのため 単 にレイアウト 用 の 画 像 (スペーサー 画 像 等 ) の 場 合 には alt は 空 にする また 画 像 が 表 示 できま せん や 画 像 と 言 った 代 替 テキストはユーザにとっては 有 用 でなく 犬 の 写 真 など 簡 素 な 説 明 や 飼 い 犬 のポチが など 情 景 が 把 握 できる 説 明 が 有 用 である 説 明 が 長 文 になる 場 合 longdesc 属 性 に URI を 指 定 し 説 明 の 文 書 を 示 す 事 もできる 他 のドメインの 画 像 を 指 定 することも 可 能 であるため 著 作 権 の 観 点 から 問 題 視 されることもある canvas 解 像 度 に 依 存 したビットマップキャンバスを 表 示 グラフやゲーム 用 の 表 示 画 像 を 描 画 することができる HTML 5 で 導 入 予 定 であり Internet Explorer 以 外 の 主 要 ブラウザではすでに 実 装 済 み Internet Explorer 向 けに VML を 使 い canvas タグを 実 現 するライブラリがある 10
2.ブラウザとレンタリングエンジン ウェブ 開 発 にあたり 特 に 注 意 しなければいけないことはブラウザの 種 類 です 2009 年 4 月 現 在 主 なブラウザ のレンタリングエンジンは Trident(トライデント)と 呼 ばれる Windows 版 Internet Explorer に 搭 載 されている HTML レンダリングエンジンと Gecko(ゲッコー)と 呼 ばれる Netscape シリーズ 6 以 降 および Mozilla ソフトウェア のために 開 発 されたオープンソースの HTML レンダリングエンジン WebKit(ウェブキット)と 呼 ばれる アップルが 中 心 となって 開 発 されているオープンソースの HTML レンダリングエンジン Presto(プレスト)と 呼 ばれる オペラ ソフトウェア (Opera Software ASA) 制 作 の HTML レンダリングエンジンの4 種 類 に 分 けられます 実 は ブラウザ のレンタリングエンジンには 多 少 の 違 いがあり HTML ファイルを 開 くと CSS のデザインや JavaScript の 動 作 で 若 干 の 違 いが 現 れてしまいます 対 処 方 法 としては JavaScript でブラウザを 判 別 して それぞれのブラウザ 別 に 処 理 を 分 岐 させて 処 理 を 割 り 当 てて 対 応 させるやりかたと クライアントから 見 れるブラウザを 限 定 するように 仕 様 をつくるなどの 対 処 方 法 がありま す クライアントで 現 在 一 番 使 われているブラウザが Microsoft の Internet Explorer なのでそれで 見 れれば 他 は 動 作 保 障 はしないという 手 もありますが Mac や Linux では Internet Explorer がないので 見 れなくなってしまいます 大 抵 の 場 合 は 目 的 にあった 仕 様 をしっかりとつくり お 客 様 と 交 渉 しながらターゲットとなるブラウザの 種 類 などを 決 めていきます レンタリングエンジン Trident Gecko WebKit Presto Windows 系 OS Windows 系 OS Windows 系 OS Windows 系 OS プラットフォーム UNIX 互 換 OS UNIX 互 換 OS Mac OS X Mac OS X Mac OS X i Phone 携 帯 電 話,ゲーム 機 ブラウザ Internet Explorer Fire Fox Safari,Google Chrome Opera シェア(2008 年 12 月 ) 68.15% 21.34% 8.97% 0.71% それぞれのレンタリングエンジンに 対 する 統 一 性 は 現 在 のところ 相 違 がありますが 将 来 的 には W3C (World Wide Web Consortium) と 呼 ばれる 各 種 技 術 の 標 準 化 を 推 進 する 為 に 設 立 された 標 準 化 団 体 非 営 利 団 体 により 標 準 化 が 進 められています またその 他 では ウェブスタンダードプロジェクト (WaSP) という ウェブサイトをウェブ 標 準 に 則 って 制 作 することを 推 進 する 団 体 により 標 準 化 テストがつくられています スタイルシート 標 準 化 テストを Acid2 とし JavaScript による 標 準 化 テストを Acid3 として 現 在 使 っているブラウザがどの 程 度 まで 標 準 化 にそっ ているかを 確 認 することができます 11
3. 開 発 環 境 インストール HTML でのデバッグ 環 境 としては 代 表 的 なものに Firefox の Firebug などがあります また Web 開 発 では 動 作 の 軽 いテキストエディタをつかって 開 発 することがほとんどですので 今 回 は 代 表 的 なテキストエディタでフリーソフト のサクラエディタをつかって 開 発 を 行 います http://sakura-editor.sourceforge.net/ 上 記 のアドレスからサクラエディタをダウンロードしてインストールします サクラエディタはさまざまなプログラミング 言 語 に 対 応 しています 主 にプログラミング 言 語 の 命 令 の 色 づけなどが できます 12
http://mozilla.jp/firefox/ 今 回 は 開 発 環 境 として Firebug を 使 用 してみたいとおもいます Firebug は JavaScript のデバッグ 環 境 なので Web 開 発 には 役 立 ちます ダウンロードしてインストールします 起 動 したらツール->アドオンを 選 択 します アドオンを 入 手 のアイコンをクリックし テキストボックスに Firebug と 打 ち 込 んでエンターキーを 押 します 検 索 結 果 が 表 示 されたら Firefox に 追 加 ボタンをクリックします 13
今 すぐインストール Firefox を 再 起 動 ボタンをクリックし 再 起 動 します これでインストールは 完 了 です 14
http://lab.tubonotubo.jp/tools/webdeveloper/index.html から WebDeveloper をダウンロードして Firebug と 同 じようにインストールします 15
ブラウザにある 右 下 の 虫 (bug)のようなアイコンをクリックするとなにやらでてきます これが Firebug です 右 クリックで Firebug を 新 しいウインドウで 開 くこともできます 16
4.Firebug 操 作 方 法 実 際 のプログラミングで 一 番 大 切 なのは 実 際 にコードを 書 いて 動 かし エラーが 出 たらなぜその 箇 所 でエラーがで るのか 考 え 修 正 しながらこまめに 書 いていくことです テキストを 読 んでやるよりは 実 際 にコードを 書 いてみて エラーが 出 たらテキスト 等 で 調 べる 方 法 が 覚 えがはやく 上 達 もします 今 回 はサクラエディタを 使 用 して JavaScript を 書 いて Firebug でデバッグをやっていきたいと 思 います コンソール スクリプト 接 続 にチェックを 入 れ xxxxxx で 選 択 された 機 能 を 有 効 にしますをクリック これで 機 能 を 使 えるようになります コンソールタブをクリックするとコンソール 画 面 が 表 示 されます ここでは 現 在 開 いているウェブページに JavaScript 17
のエラーがあるとその 箇 所 を 表 示 してくれます また JavaScript をここから 打 ち 込 んで JavaScript を 単 体 でテスト 実 行 させることもできます ためしに アラートがでる JavaScript を 打 ち 込 んでみます コードを 入 力 してエンター alert("テスト"); このように 単 体 で 実 行 できます 現 在 開 いているウェブページのソースコードを 階 層 構 造 で 見 やすく 表 示 してくれます また タグやパスの 色 付 けも 行 ってくれます 右 のスタイルタブは 現 在 のページで 使 用 しているスタイルシート(CSS)を 表 示 してくれます 18
レイアウトタブは ページの 余 白 (マージン)を 表 示 します DOM(ドム)タブは JavaScript で HTML のなかからひつような 情 報 を 取 り 出 したり 書 き 込 んだりするときに 使 いま す DOM を 利 用 するとクリックと 連 携 してウェブページに 動 的 な 動 きを 追 加 することができるようになります 19
ソースのタグをクリックするとそこがウェブページのどの 部 分 なのかもビジュアルで 表 示 してくれます また 調 査 や 編 集 といったタブをクリックすることによりキャッシュ( 一 時 的 に 保 存 されたデータ)を 書 き 換 えてその 場 でウェブページを 書 き 換 えることができます これはキャッシュを 書 き 換 えるので 実 際 のファイルには 影 響 はでませ ん 20
コンテンツの 読 み 込 み 時 間 とヘッダー レスポンスといった 情 報 が 得 られます ウェブページの 表 示 を 高 速 させたい ときなどに 参 考 になります 21
5.Firebug を 使 用 したデバッグ ここまでは 一 般 的 な Firebug の 操 作 をみてきました ここからは Firebug を 使 用 したデバッグのしかたを 紹 介 し ていきたいと 思 います スクリプトタグを 開 き ソースコードを 表 示 します Firebug では eclipse と 同 じようにブレイクポイントを 設 定 し デ バッグを 行 うことができます <script>タグのある JavaScript の 範 囲 内 でのデバッグツールなので あたりまえです が<script>タグで 囲 まれた 範 囲 内 (もしくは.js ファイルのなか)でブレイクポイントを 設 定 してください なを 外 部.js ファイルも 対 象 ファイル 名 を 変 えるだけでデバッグできます( 対 象 ファイル 選 択 はヘルプの 下 の 段 にあります) まず ブレイクポイントを 設 定 したい 行 をクリックし true または true になるような 条 件 式 を 設 定 します すると?が 行 頭 につくので そこがブレイクポイントとなります ブレイクポイントを 反 映 させるために 表 示 -> 更 新 を 選 択 します 22
すると 自 動 的 にブレイクポイントで 止 まります ブレイクポイントで 止 まると のほうでも 設 定 したブレイクポイントで 読 み 込 みが 停 止 します が 点 灯 しブラウザ Continue 次 のブレイクポイントが 見 つかるまでプログラムが 実 行 されます ブレイクポイントが 見 つからない 場 合 は 最 後 までプログラムを 実 行 します Step Over コードを 一 行 づつ 実 行 する 機 能 です 関 数 /メソッドがあった 場 合 は 以 降 スキップします function a(){ var c = 1; debugger; 中 断 A c = b(c); スキップ alert(c); 実 行 再 開 } function b(s){ var d = s + 1; return d; } 実 行 すると 中 断 A で 停 止 します その 後 Step Over をクリックすると c = b(c); は 処 理 されず alert(c); か ら 実 行 再 開 されます 23
Step Into コードを 一 行 づつ 実 行 する 機 能 です 関 数 /メソッドがあった 場 合 はその 中 にはいって 処 理 を 実 行 します function a(){ var c = 1; debugger; 中 断 A c = b(c); 実 行 再 開 alert(c); } function b(s){ var d = s + 1; return d; } 実 行 すると 中 断 A で 停 止 します その 後 Step Into をクリックすると c = b(c); から 実 行 再 開 されます Step Out コードの 実 行 を 再 開 し 関 数 呼 び 出 しの 内 側 から 呼 び 出 し 元 の 関 数 に 戻 り 実 行 を 中 断 します function a(){ var c = 1; c = b(c); 中 断 B alert(c); } function b(s){ var d = s + 1; debugger; 中 断 A return d; } 実 行 すると 中 断 A で 停 止 します その 後 Step Out をクリックすると 中 断 B で 停 止 します 24
その 他 の 機 能 として 監 視 スタックがあります 監 視 は JavaScript 実 行 後 の 変 数 になにが 値 としてはいってい るかをチェックできます スタック(データを 後 入 れ 先 出 しで 保 持 する 構 造 体 )はスタックトレースがおこなえます ブ レイクポイントとあわせてつかってみてください 25
6.Web Developer を 使 用 したデバッグ インストールするとアドレスバーの 下 に Web Developer Toolber が 表 示 されます ツールバーの 表 示 / 非 表 示 の 切 り 替 えはメニューから 表 示 ー>ツールバーで 選 択 できます このアドオンを 追 加 するとページに 関 するさまざまな 情 報 をわかりやすく 解 説 してくれます 各 機 能 は 主 にブラウ ザの 機 能 動 作 の ON/OFF からスタイルシート 適 用 範 囲 の 表 示 とさまざまです 以 下 代 表 的 な 機 能 クッキー Java JavaScript CSS などを 無 効 にする CSS をその 場 で 編 集 する フォームの 各 属 性 値 を 表 示 する 画 像 を 非 表 示 にする alt 属 性 のない あるいは alt 属 性 値 が 空 の 画 像 を 枠 で 囲 む リンクのパスを 表 示 する ブラウザの 画 面 内 を 拡 大 あるいは 縮 小 する テーブルのセルを 表 示 する ブラウザのウィンドウおよび 表 示 領 域 の 幅 と 高 さを 表 示 する HTML および CSS の 構 文 をチェックする W3C/WCAG 1.0 あるいは 米 国 リハビリテーション 法 508 条 でアクセシビリティをチェックする Web ページのソースコードを 表 示 する 26
数 ある 機 能 のなかで 一 番 便 利 なのが 枠 表 示 機 能 です これは テーブルやブロックレベル h 要 素 フレームな どの 範 囲 を 色 がついた 枠 でかこってくれます この 機 能 とあわせて Firebug で CSS の 値 を 変 更 してみてください 枠 がその 変 更 のつど 適 用 されると 思 います これでいちいちスタイルシートを 変 更 保 存 再 表 示 という 手 間 が 省 けます 27
7.Color Zilla を 使 用 した 開 発 補 助 http://www.colorzilla.com/firefox/ からアドオンをインストールします ColorZilla はブラウザのなかのマウスカーソルにある 位 置 の 色 情 報 を HTML で 扱 えるものに 変 換 して 表 示 してくれ ます Web 開 発 などでは 使 いたい 色 をコードから 調 べるのが 億 劫 な 場 合 があるので 画 面 から 直 接 色 情 報 を 得 ら れる ColorZilla はスタイルシートの 編 集 などにとても 便 利 です 28