1 / 79

Web の表現技術 (1) ‏

Web の表現技術 (1) ‏. HTML と CSS の基礎 2009 年 2 月 6 日. 情報技術研究センター 清水浩行. HTML. Web コンテンツの構成 HTML と XHTML HTML の基礎. Web コンテンツの構成. タイトル. Web コンテンツを構成する要素 文章 画像 「タイトル」や「見出し」といった 構造を表す情報 レイアウトや文字の色など 見た目に関する情報 「動き」に関する情報 その他. ○△× のホームページにようこそ. ■ 自己紹介. 私は東京に生まれ、 ・ ・

Albert_Lan
Download Presentation

Web の表現技術 (1) ‏

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Webの表現技術(1)‏ HTMLとCSSの基礎 2009年2月6日 情報技術研究センター 清水浩行 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  2. HTML Webコンテンツの構成 HTMLとXHTML HTMLの基礎 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  3. Webコンテンツの構成 タイトル • Webコンテンツを構成する要素 • 文章 • 画像 • 「タイトル」や「見出し」といった構造を表す情報 • レイアウトや文字の色など見た目に関する情報 • 「動き」に関する情報 • その他 ○△×のホームページにようこそ ■自己紹介 私は東京に生まれ、 ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ 見出し ■研究内容 私は○○を専攻し、 ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ 本文 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  4. Webコンテンツの構成 • Webコンテンツを構成する要素 • 文章 • 画像 • 「タイトル」や「見出し」といった構造を表す情報 • レイアウトや文字の色など見た目に関する情報 • 「動き」に関する情報 • その他 ワープロソフトでは・・・ HTML アウトラインモード！？ CSS スタイル！？ JavaScript マクロ！？ Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  5. HTMLとXHTML • HTML (HyperText Markup Language) • Web上の文書の構造を記述するためのマークアップ言語 • 他の文書へのハイパーリンクが設定できる • 現在のバージョンはHTML 4.01 • HTML 5も策定中 • XHTML (Extensible HyperText Markup Language) • HTMLをXMLの文法に従うように定義しなおしたもの • いくつかHTMLと異なる点がある • 現在のバージョンはXHTML 1.1 • HTML 4.01とXHTML 1.0には3つの型がある • Strict （基本となる型） • Transitional （旧バージョンとの互換性を重視した型） • Frameset （フレームを使うことができる型）→ 非推奨（詳細は後述） <?xml version="1,0" …> <!DOCTYPE html PUBLIC…> <html> <head> <title>サンプルページ</title> </head> <body> <h1>サンプルページ</h1> <p>サンプルページです。</p> </body> </html> XHTML文書の例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  6. HTMLの記述法 • 要素(element) • <>で囲まれた文字列（<html>など） • 「タグ」と呼ばれることもある • <要素名>～</要素名>で囲む • 要素の中にさらに子要素を含める場合には、子要素の終了タグの後に親要素の終了タグを記述する○：<a href="index.html"><h1>見出し</h1></a>×：<a href="index.html"><h1>見出し</a></h1> • 属性(attribute) • 要素に情報を付加するときに使う例：<img src="image.jpg"> <!DOCTYPE html PUBLIC…> <html> <head> <title>サンプルページ</title> </head> <body> <h1>サンプルページ</h1> <p>サンプルページです。</p> </body> </html> 半角スペース HTML文書の例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  7. XHTMLの記述法 • 要素(element) • <>で囲まれた文字列（<html>など） • 「タグ」と呼ばれることもある • <要素名>～</要素名>で囲む • 要素名は小文字で書く • 終了タグは省略できない • 終了タグがない場合には<要素名 />と記述する • 要素の中にさらに子要素を含める場合には、子要素の終了タグの後に親要素の終了タグを記述する○：<a href="index.html"><h1>見出し</h1></a>×：<a href="index.html"><h1>見出し</a></h1> • 属性(attribute) • 要素に情報を付加するときに使う例：<img src="image.jpg"> • 必ず引用符（「"」または「’」）で囲む <?xml version="1,0" …> <!DOCTYPE html PUBLIC…> <html> <head> <title>サンプルページ</title> </head> <body> <h1>サンプルページ</h1> <p>サンプルページです。</p> </body> </html> 半角スペース XHTML文書の例 半角スペース ※下線部はHTMLと異なる点を表す Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  8. XHTMLを使おう • HTMLとXHTMLは似ているが、XHTML 1.0の利用を推奨 XHTML 1.0の推奨理由 • 書式が厳密なため、ブラウザの処理が速い • XMLベースなので、XMLツールを使ってデータの一部を他の文書で利用することが容易 • 他のXML（SVGやMathMLなど）を埋め込むことができる 本当はXHTML1.1を使いたいが、IE 6.0はXHTML 1.1に適切に対応していないため、IE 6.0のユーザも多い現在では1.0を使わざるを得ない。 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  9. XHTMLの記述法 • XML宣言 • XML文書であることを宣言する • ただし、IE 6.0は「文書型宣言」の前に文字列があると互換モード（後述）になるというバグがあるため、文字コードを"UTF8"にしてXML宣言を省略するとよい • 文書型宣言 • 「XHTMLの○○のバージョンの文書である」ということを宣言する <?xml version="1.0" encoding="UTF-8"?> 文書の文字コード。Shift_JISやEUC-JPを使うことも。 XMLのバージョン。必ず"1.0"。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 公開識別子(Formal Public Identifier)。規定された通りに記述。 システム識別子(System Identifier)。文書型定義のあるURI。 ※ Transitional, Framesetを使う場合には、"Strict"を"Transitional", "Frameset"で置き換える Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  10. 基本的な要素(1) • <html> • HTMLの開始と終了を表す • XHTMLでは、名前空間(namespace)と言語コードを指定する • <head> • その文書に関する情報を記述する。詳細は後述 • <title> • ページのタイトル。<head>内に記述 • ブラウザのタイトルバーに表示される • <body> • 本文を記述する <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> ISO 639で規定された言語コード。日本語：ja、中国語：zhなど 名前空間。必ず"http://www.w3.org/1999/xhtml"。 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  11. 基本的な要素(2) • <body>内に記述される代表的な要素 • <h1>, <h2>, <h3>, …, <h6> • 文章の見出し • <p> • 段落 • <img> • 画像の挿入 • 画像ファイルはsrc属性により指定例）<img src="image.jpg" /> <h1> <h2> <p> <img> Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  12. 基本的な要素(3) • <a> • ハイパーリンクを指定する • <table>, <tr>, <td> • 表を作成する • <ul>, <ol>, <li> • 箇条書き、番号付きリストを作成する • その他にも多くの要素がある。詳細な情報は書籍やインターネットを参照のこと。 • たとえば、 • 益子貴寛著, "Web標準の教科書", 秀和システム, 2007 • 大藤幹著, "詳解HTML&XHTML&CSS辞典改訂版", 秀和システム, 2006 • 株式会社ユニゾン著, "詳解 HTML & XHTML & CSS辞典", エクスメディア, 2006 <a href="index.html">トップページに戻る</a> リンクを設定する文字列 リンク先のURI。相対URIでも絶対URIでもよい。 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  13. ブロックレベル要素 インライン要素 ブロックレベル要素とインライン要素 • 要素にはブロックレベル要素とインライン要素の2種類がある • 「ひとつの塊」として表示される（ことが多い）要素 • 子要素としてブロックレベル要素、インライン要素、文字列を含むことができる（ことが多い） • <p>, <h1>～<h6>, <table>など • 行内に表示される（ことが多い）要素 • 子要素としてインライン要素、文字列を含むことができる（ことが多い）が、ブロックレベル要素は不可 • <a>, <img>, <sup>など ブロックレベル要素 インライン要素 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  14. ヘッダ情報 • <head> ～ </head>で囲まれた部分 • <title>は検索結果の見出しとして表示される • ページの内容がわかるようなタイトルにしないとクリックしてくれない！ • MIMEタイプと文字コードセット • 適切な値を指定しないとページが表示されなかったり、文字化けが発生したりすることがある • 非ASCII（≒アルファベット）文字の前に記述 • 文書の概要とキーワード • ブラウザには表示されないが、検索エンジン等が利用することがある <meta http-equiv="Content-Type" content="text/html; charset=UTF8> "application/xhtml+xml"が正しいが、古いブラウザを考慮する XML宣言と同じ文字コードを設定 <meta name="description" content="○△×の自己紹介ページです"> <meta name="keywords" content="○△×, 自己紹介"> Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  15. 本文を書くときの注意 • 文字参照 • "<"や">"などの文字を本文中に書くと、ブラウザは(X)HTMLの要素が開始するのだと解釈してしまう • このような文字を表示する方法のこと • 文字実体参照 • "&"と";"の間に文字を指定する • 直感的に文字を指定できる • 数値実体参照 • "&"と";"の間に数値を指定する • すべての文字を指定できる 文字実体参照の例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  16. CSS CSSとCSSを使うメリット CSSの基礎 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  17. CSSとは • CSS (Cascading Style Sheets) • 単に「スタイルシート」と呼ぶこともある • Webページの「デザインを表現」するための言語 • たとえば、フォントサイズの変更、背景画像の指定、ページ全体のレイアウトなど • CSSの特徴 • メディアに応じて適用させるCSSが切り替えられる • 同じ要素にCSSを次々と重ね合わせて（カスケードして）いくことができる • ベースとなるCSSとカスタマイズしたCSSを別のファイルに保存すれば、再利用が容易 要素<h1>の 　　フォントサイズは150%、 　　フォント太さはボールド、 　　枠線は二重線で#99ccffの色、 　　枠線の幅は5px とする h1 { font-size : 150%; font-weight : bold; border : double #99ccff; border-width : 5px; } CSSのイメージ Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  18. 「カスケード」とは • あとから指定したスタイルを上に追加していくイメージ <html> <head> <style type="text/css"> h1{color: red; } </style> ・・・ </head> <body> <div style="font-size: 150%;"> <h1 style="color: blue; font-weight: bold;">見出し</h1> ・・・ fcolor: blue; font-weight: bold; ③ ① color: blue; font-weight: bold; font-size: 150%; font-size: 150%; ② ② <h1>に適用される スタイル color: red; ③ ① CSSのカスケード Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  19. CSSを使うメリット • デザインが簡単に切り替えられる • それぞれのメディア用のCSSを用意すれば、HTMLやコンテンツをいじる必要は無い 印刷用CSS 携帯電話用CSS PC用CSS Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  20. 実際のCSS body { background-color : #eeeeff; } h1 { font-size : 150%; margin : 0.5em 1.0em 0.5em 0.1em; padding : 0.2em 0.5em 0.2em 0.5em; border : double #99ccff; font-weight : bold; border-width : 5px 0px 5px 0px; } h2 { font-size : 135%; margin : 1.5em 1.0em 0.5em 0.5em; padding : 0.1em 0.4em 0.1em 0.5em; border : solid #99ccff; border-width : 0em 0em 4px 8px; } p { text-indent : 1em; line-height : 120%; margin : 0.5em 3.0em 0.5em 3.0em; padding : 0; } h1 { font-size : 150%; margin : 0.5em 1.0em 0.5em 0.1em; padding : 0.2em 0.5em 0.2em 0.5em; border : double #99ccff; font-weight : bold; border-width : 5px 0px 5px 0px; } h2 { font-size : 135%; margin : 1.5em 1.0em 0.5em 0.5em; padding : 0.1em 0.4em 0.1em 0.5em; border : solid #99ccff; border-width : 0em 0em 4px 8px; } p { text-indent : 1em; line-height : 120%; margin : 0.5em 3.0em 0.5em 3.0em; padding : 0; } h1 { font-weight : bold; text-align : center; font-size : 100%; } h2 { font-size : 100%; } h2:before { content: "■ "; } p { text-indent : 1em; } 携帯電話用CSS 印刷用CSS PC用CSS Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  21. CSSを使うメリット • Webデザイナ、 HTML作成者（Webアプリ開発者）、コンテンツ作成者の分業が容易 • HTMLが読みやすくなる、というメリットも • 同じデザインで多くのページを作成するとき、デザインはCSSをひとつ用意すればよい • デザインリニューアルのときも、CSSを変更するだけ CSS デザイナ タイトル 見出し 見出し ブラウザ HTML <h1>タイトル</h1> <h2>見出し</h2> <p> 本文 </p> <h2>見出し</h2> <p> 本文 </p> 本文 本文 HTML 作成者 手作業 or CMS 文章 コンテンツ 作成者 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  22. CSSの適用法 簡単！！ • HTMLファイルの中に書く場合 • style属性を使う • style要素を使う • CSSを別ファイルとして用意する場合 • link要素を使う • style要素と@importを使う • XML命令を使う <h1 style="color: red; font-size: 120%;"> この<h1>にだけ適用される。他の例はすべての<h1>に適用される。 <style type="text/css"> h1 { color: red; font-size: 120%;} </style> オススメ！！ <link ref="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> @import url("style.css"); </style> <?xml-stylesheet type="text/css" href="style.css" ?> 対応していないブラウザもあるのでこの書式は使わない Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  23. 値の単位 0（ゼロ）以外は必ず単位をつけること 長さ pt(ポイント）、px（ピクセル）など 色 16進6桁RGB値（#ffffff）、16進3桁RGB値（#fff）、色名(white）など パーセント 120%など URL url("http://www.example.com")など CSSの記述法 • 基本的な書式 • セレクタ：スタイルの適用対象 • 要素名、id名、class名 • プロパティ：変更するスタイル（装飾） • color、font-size, background-imageなど • 値：プロパティに設定する値 • red, 120%, "back.jpg"など • 複数のセレクタの指定 • ","で区切る • 複数のプロパティの指定 • ";"で区切る h1 { color: red } セレクタ プロパティ 値 h1, p { color: red } h1 { color: red; font-size: 120% } Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  24. セレクタ • タイプセレクタ • 特定の要素に適用 • idセレクタ • 特定のid属性の要素のみに適用 • ひとつのid名は文書内で一度しか利用できない • classセレクタ • 特定のclass属性の要素のみに適用 • 子孫セレクタ • 親要素配下のすべての子孫要素に適用 • 子セレクタ • 親要素の子要素に適用 p { color: red } <p>テキストテキスト</p> p#idname { color: red } <p id="idname">テキストテキスト</p> p.clsname { color: red } <p class="idname">テキストテキスト</p> p.idname a { color: red } <p class="idname"><span>テキスト<a>テキスト</a></span></p> p.idname > a { color: red } <p class="idname"><a>テキストテキスト</a></p> Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  25. プロパティの例～文字装飾 <p style="color: blue;">文字に装飾を加えます</p> <p style="text-decoration: underline;">文字に装飾を加えます</p> <p style="text-indent: 1em;">文字に装飾を加えます</p> <p style="background-color: #ccffff;">文字に装飾を加えます</p> <p style="letter-spacing: 0.4em;">文字に装飾を加えます</p> 文字色 下線 インデント 背景色 文字間隔 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  26. CSSを使ったページレイアウト CSS h1, h2, div { margin: 0px; } #wrapper { margin: 10px auto 0 auto; width: 600px; } #main { float: left; width: 400px; } #sidebar { margin: 30px 0 0 430px; } div#header h1 { font-size: 200%; } div#main h2 { font-size: 130%; text-decoration: underline; margin-bottom: 15px; } div#sidebar h2 { font-size: 130%; margin-bottom: 15px; } div#main p { text-indent: 1em; } <div id="wrapper"> <div id="header"><h1>○△×のホームページへようこそ</h1></div> <div id="body"> <div id="main"> <h2>自己紹介</h2> <p>私は東京に生まれ、 ・ ・・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ </p> </div> <div id="sidebar"> <h2>メニュー</h2> <ul> <li>自己紹介</a></li> <li><a href="research.html">研究内容</a></li> </ul> </div> </div> </div> HTML Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  27. その他の留意点 アクセシビリティに配慮すること こんなことはしないこと 複数のブラウザで確認すること Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  28. アクセシビリティに配慮すること • あなたにとって良いデザイン　≠　みんなにとって良いデザイン • 色覚障がい者を考慮した配色になっていますか？ • 視覚障がい者（音声ブラウザ）を考慮した構成になっていますか？ • 色やフォントの大きさで見出しなどを区別してはいけない。<h1>等を使い、<h1>等にCSSを指定する。 • 高齢者が読めないような小さな文字になっていませんか？ • 少なくとも文字のサイズは変更できるようにする • アクセシビリティ関連のガイドライン、規格 • WCAG (Web Contents Accessibility Guidelines) 1.0 • 14のガイドラインと65のチェックポイントで構成 • 2.0も策定中（2008年5月に勧告候補を公開） • JISX8341-3 高齢者・障害者等配慮設計指針 –情報通信における機器、ソフトウェア及びサービス –第三部：ウェブコンテンツ（WebコンテンツJIS） • 公的機関はJISに従ったWebコンテンツを調達 • 企業も従う傾向にある Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  29. HTMLで装飾するデメリット（≒CSSのメリットの裏返し）HTMLで装飾するデメリット（≒CSSのメリットの裏返し） HTMLで装飾をしないこと • 歴史的な経緯から、HTMLにも「見た目」に関する要素・属性がある • font要素（フォントサイズや色）、text-align属性（行揃え）、bordercolor属性（枠線色）など しかし、HTMLで装飾すると問題が・・・ • モバイル環境等で閲覧できるようにする場合にはコンテンツすべてを作り直し • デザイナとHTML作成者の共同作業が難しい（どちらかが作業しているときはもう片方は作業できない！？）。 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  30. 表(<table>)でレイアウトをしないこと • かつては表組みのレイアウトが流行 • 段組をCSSで作るとちょっと面倒 • ブラウザのCSSサポートが不十分 • 表だと簡単にレイアウトが作れる ・・・しかし、 • 意味的な構造がまったくわからない • 音声読み上げブラウザはどう読み上げる？ • 検索エンジンはどう理解しようとする？ • テーブルをすべて読み込まないと表示できない • CSSなら読み込みながら表示 • HTMLはとても読みづらい 読み上げ順 表組みレイアウトの例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  31. フレームは非推奨 • フレームレイアウトもかつて主流だった ・・・しかし、やはり多くの問題がある フレームレイアウトの問題点 • アクセシビリティに問題がある。音声ブラウザやテキストブラウザでの閲覧が困難 • 目的のページをブックマークできないフレームの初期ページが登録される • 検索エンジンから飛んでくるとフレームの中しか見られない • 印刷がうまくできない フレームレイアウトの例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  32. 複数のブラウザで確認しよう • ブラウザによって表示が異なることは日常茶飯事 • HTMLもCSSも標準仕様だが、すべて正しく実装されているわけではない • 必ず複数のブラウザで表示を確認しよう • たとえば、Internet Explorer 7.0とFirefox 3.0 • もし閲覧できないと、機会損失などのマイナス面も • （詳しくは次回） • Webページを作成するときは細かいレイアウトにこだわりすぎないこと • 閲覧環境はみんな違うので、万人に同じページを見せることは不可能 • ブラウザ（IE、Firefox、Safari、携帯電話） • 画面のサイズ、解像度 • フォントの種類 • などなど Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  33. 非互換の例 ～ ボックスモデル • CSS2の仕様書とIE 6互換モード（後述）などでは幅・高さと枠線の扱いが異なる • IE 6が誤り • CSS2の仕様 • IEの場合 padding border コンテンツ margin width margin コンテンツ padding border Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  34. CSSハック • 非互換によって引き起こされる問題を回避する手法 • 非互換を用いる • 毒をもって毒を制す！？ • 例）ボックスモデルハック • 前ページのボックスモデルの問題を回避 • 「\」が含まれるプロパティは比較的新しいブラウザにだけ適用される • CSSハックに関する情報は書籍よりもインターネットの方が充実 • "CSS Filters and Hacks", Dithered.com • http://www.dithered.com div#body { width: 900px; w\idth: 800px; } ボックスモデルハックの例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  35. Webの表現技術(2)‏ DHTMLとWebサイトのクロスブラウザ対応 20XX年X月X日 情報技術研究センター Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  36. 動きのあるWebサイト 動きのあるWebサイトとは Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  37. サーバサイド クライアントサイド 動きのあるWebサイト • HTMLとCSSだけでは、固定された（静的な）ページしか提供できない • こんなときはどうする？ • アンケートフォームの内容に漏れが無いかチェックしたい • メニューの階層が深いので、親項目を選ぶと子項目が、子項目を選ぶと孫項目が表示されるようにしたい • 実現方法は大きく2種類 • 入力内容や選択項目をサーバに送信し、結果をブラウザに返す • 複雑な処理が可能 • レスポンスに時間がかかる • CGIが代表的 • クライアント（ブラウザ）側で処理を行う • 複雑な処理には向かない • レスポンスは速い • JavaScriptが代表的 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  38. JavaScript JavaScriptの基礎 JavaScriptの互換性 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  39. JavaScriptとは • ブラウザ側（クライアントサイド）で実行されるスクリプト言語 • 開発時にサーバもコンパイルも不要なので手軽 • 実行時にサーバとやりとりがないので速い • 名前と書式は少しJavaと似ているが、まったく別の言語 • 利用例 • アンケート票の入力漏れチェック • マウスカーソルを載せると下位項目が表示されるプルダウンメニュー • テキストボックスに文字を入力すると、補完候補が表示される機能 Google Suggest 入力漏れチェックの例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  40. JavaScriptの記述法 • 読み込み方法 • CSSと同様、HTML内に記述する方法と別ファイルに用意する方法がある • HTML内に記述 • 別ファイルから読み込み <script type="text/javascript"> <!-- （ソースコード） //--> <script/> <script>に対応していないブラウザのためにHTMLのコメントに HTMLのコメントを閉じる。その前にJavaScriptのコメントであることを記す <script type="text/javascript" src="sample.js" /> type属性を使う。 language属性は非推奨。 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  41. イベントハンドラ • マウスクリックやフォーム選択などのイベント発生時に特定の処理を行う • 要素の属性部分に記述する場合 • "on＋イベント名" • スクリプト中で指定する場合 • "オブジェクト"."イベント名" = "スクリプト" <p onclick='alert("クリックしました");'> ・・・ document.form1.element1.onclick = alert ("クリックしました"); イベントハンドラの例 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  42. JavaScriptのサンプル • クリックすると時間を表示 • セレクトメニューを選択すると移動 <h2 onclick=' dt = new Date(); alert("現在時刻は" + dt.getHours() + "時" + dt.getMinutes() + "分です。");' > ここをクリックすると時刻を表示します。</h2> <form> <select onChange=" location.href = this.options[this.selectedIndex].value; "> <option value="#">選択して下さい</option> <option value="http://www.yahoo.co.jp/">Yahoo! </option> <option value="http://www.google.co.jp/">Google</option> </select> </form> Yahoo!に自動的に移動 選択すると・・・ Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  43. JavaScriptの互換性 • JavaScriptはもともとNetscape Navigatorの独自機能 • Microsoft社もJavaScriptをベースに独自のJScriptを開発 • その後、ECMAScriptとして標準化されたが、後方互換性の問題もあり、ブラウザ間の互換性は完全ではない • 必ず複数のブラウザでテストすること • 非互換の例 • Firefoxでは使えるが、IEでは使えないメソッド • document.getSelection()（選択した文字を返す） • Window.find() （ウインドウ内の文字を検索する） • など 互換性に問題！ Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  44. DHTMLとDOM DHTMLとDOMの基礎 DOMの利用法 JavaScriptライブラリ Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  45. HTML DOM Java Script CSS DHTML (Dynamic HTML)とは • Webページに動的な効果を与える技術 • 通常はJavaScriptを使用して、HTMLの構造を操作したり、CSSのプロパティを変更したりする • HTMLやCSSを扱う技術として、DOM (Document Object Model) がある • 利用例 • マウスカーソルを載せると下位項目が表示されるプルダウンメニュー • 近年流行しているAjaxもDHTMLの延長 文書構造 デザイン 動作制御 DHTMLを構成する要素技術 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  46. DOMとは • HTMLやXMLの文書にアクセスするためのAPI • 文書構造をツリー構造で管理 <div id="body"> <div id="main"> <h2>自己紹介</h2> <p>私は東京に生まれ、 ・ ・ ・ </p> </div> <div id="sidebar"> <h2>メニュー</h2> <ul> <li>自己紹介</a></li> <li><a href="research.html"> 研究内容</a></li> </ul> </div> DOMに変換 ノード(node) div div div h2 p h2 ul li li 自己紹介 私は東京・・ メニュー 自己紹介 研究内容 Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  47. DOMとJavaScript • DOMは"API" • 実装はどんなプログラミング言語でも構わない • C言語、Java、PHP、Ruby、もちろんJavaScriptでも • ブラウザではJavaScriptで実装されている • ブラウザでの実装 • ルートはwindow • windowの子要素のひとつとしてdocumentがある • documentの下に(X)HTML文書のノードが並ぶ • ノードには、"window.document.body…"のようにピリオドで区切ってアクセスする • 自分自身のwindowの場合、"window"は省略可 window document frame history ・・・ head body ・・・ Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  48. DOMの要素へのアクセス • DOMの検索 • id名で検索 ～ getElementById(id名) • 返り値はオブジェクト。Id名は文書内でユニークなため • 例：document.getElementById("main") • 要素名で検索 ～ getElementsByTagName(要素名) • 返り値はオブジェクトの配列。要素は文書内で複数ある可能性があるため • 例：document.getElementsByTagName("div")[0] • 属性値の変更 • オブジェクト.属性=値 • 例：document.getElementById("photo").src = "image.jpg"; • オブジェクト.setAttribute("属性", "値") • 例： document.getElementById("photo").setAttribute("src", "image.jpg); • 値の取得にはgetAttribute()も使える • スタイルの変更 • オブジェクト.style.プロパティ=値 • 例：document.getElementById("main").style.width = "640px"; Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  49. DHTMLのサンプル • クリックすると小項目が表示されるメニュー（のようなもの） Click! Click! Click! Click! Copyright (C) 2009 Mitsubishi Research Institute.Inc.

  50. DHTMLのサンプル • HTMLとJavaScriptの一例 • 実現方法は他にもたくさん info_title HTML info <ul id="menu"> <li id="info_title" onClick="switchDisp(this);">会社情報 <ul id="info"> <li>会社概要</li> <li>事業所一覧</li> <li>組織図</li> </ul> </li> <li id="rec_title" onClick="switchDisp(this);">採用情報 <ul id="rec"> <li>新卒採用</li> <li>キャリア採用</li> <li>契約社員</li> </ul> </li> <li id="inq_title">お問い合わせ</li> </ul> rec_title rec クリックするとswitchDisp()を呼び出す ロード後、小項目は非表示に JavaScript window.onload = function() { document.getElementById("info").style.display = "none"; document.getElementById("rec").style.display = "none"; } function switchDisp(elm) { var e = elm.getElementsByTagName("ul")[0]; e.style.display = (e.style.display == "none") ? "block" : "none"; } 小項目の表示・非表示を切り替え Copyright (C) 2009 Mitsubishi Research Institute.Inc.

More Related