第 11 回 JavaScript ゼミ

第11回JavaScriptゼミ セクション８－２発表者直江　宗紀

ダイナミックHTML • ダイナミックHTMLとは • スタイルシート、DOM、JavaScriptこれらを組み合わせた動的HTMLドキュメント • 通常のHTMLドキュメントは静的 • フォームなどの小規模プログラムに向いている(アニメーションなどでは最近だとFlashプラグインなどで使用されている)

スタイルシート • スタイルシートとは • HTMLドキュメントの見栄えを定義 • HTML→文書構造を記述するのに専念させる表示定義→スタイルシートの役割 • 役割分担を確立する目的で開発 • HTMLドキュメントはそのままでスタイルシートにより自在にレイアウト等を制御可能 • 正確には「CSS(Cascading Style Sheets)」

W3Cとスタイルシート • W3CによるCSSの仕様 • ２つの版がある • CSS1 • スタイルシートの基本的部分を定義 • CSS2 • プリンタ、音声出力などの出力装置への拡張 • ポジショニング、フォントのダウンロードにも対応

スタイルシートの記述 • CSS記述 • <head>タグ内に定義した<style type=“text/css”></style>の間に記述 • スタイルの指定を「ルール」と呼ぶ • ルールの書式 • セレクタ { プロパティ : 値 ; プロパティ : 値 ;・・・ } • セレクタ―スタイルを適用する対象 • {・・・}―括弧内の記述を宣言と言う。複数記述可。

記述例 <html> <head> <style type="text/css">  </style> </head> <body> <h1>スタイルシートで定義したh1エレメント</h1> <p>スタイルシートの<b>強調</b>、<i>イタリック</i>です。</p> </body> </html>

外部スタイルシート • 外部からの呼び出し • 拡張子「.css」ファイルのスタイルシートを呼び出せる • linkタグにより呼び出し可能 • 記述<link rel=“stylesheet” type=“text/css” href=“・・・.css”> • headタグのフィールド内で記述可

クラスセレクタ、IDセレクタ • 任意のエレメントへの適用 • 通常、指定されたHTMLエレメントに適用されてしまう • 任意のエレメントだけに使いたい・・・ • クラスセレクタかIDセレクタを使用する

クラスセレクタ、IDセレクタの内容 • クラスセレクタ • セレクタに「クラスタ名」を定義 • HTMLのタグ、classアトリビュートにて適用可能 • IDセレクタ • セレクタの頭に「#」をつけるとIDとなる • HTMLタグ、idアトリビュートにて適用可能

記述例 <html> <head> <style type="text/css"> body { background-color : #ffeee0 ; } h3.blue { color : blue ; } .green { color : green ; } #id1 { background-color : #ffe2e2 ; color : #CC4422 ; } </style> </head> <body> <h3>h3エレメント</h3> <h3 class="blue">クラス指定h3エレメント</h3> <p class="blue">スタイルシートの<b class="green">強調</b>、 <i class="green">イタリック</i>です。</p> <p id="id1">クラスセレクタにエレメントが関連付けられてると<br> 他のタグでそのクラスを指定しても反映されません。</p> </body> </html>

表示結果

定義クラス • 定義クラスを使う場合のスタイルシート • タグによってはクラスが定義されている物がある • 定義済みクラスのあるタグ・・・Aタグ,Pタグ • JavaScript等を利用せずにダイナミックなドキュメント表示が可能 • 記述方法 • タグ名:クラス名 { 宣言 }

各タグの定義クラス • Aタグ定義済みクラス • link - 通常のリンク • acitive - リンク先読み込み時 • visited - 読み込み済み(閲覧済み)時 • hover - カーソルがある時 • Pタグ定義済みクラス • first-letter - 最初の一文字 • first-line - 最初の一行 • first-child - 最初の子要素

記述例 <html> <head> <style type="text/css"> body { background-color : #CCCC99 ; } a { background-color : #ffffe2 ; font-size : 16pt ; font-weight : bolder ; } a:link { COLOR : #191970 ; } a:visited{ COLOR : #555555 ; } a:hover { COLOR : #FF9020 ; TEXT-DECORATION : none ; } a:active { COLOR: #F4A460 ; TEXT-DECORATION : none ; } p:first-letter { font-size : 18pt ; } p:first-line { color : red ; } p:first-child { color : green ; } </style> </head> <body> <h1>定義済みクラス</h1> <a href="">リンク</a><br> <p>スタイルシートの定義済みクラスを<br>利用してます。<br> 様々に文章が変わる様子が分かると思います。</p> </body> </html> 実行結果

エレメントの位置決め • positionプロパティの指定方法 • absolute – 絶対位置での指定 • relative – 相対位置での指定 positionプロパティ

DOMを使用したプロパティアクセス • DOMを利用したアクセス • JavaScriptからプロパティへのアクセスに利用可 • プロパティは各エレメントのstyleプロパティの下に個別のプロパティとして格納 • 例myElement.style.visibility=“hidden” ;

記述例と結果 （参考書p.402,showHide.html参照）

演習課題 • showHide.htmlのサンプルを参考に、今度は、複数の文章を切り替えて表示させられるようにしたい。複数のボタンに対応した文章に切り替えられるように改良をせよ。

第 11 回 JavaScript ゼミ