Embed Size (px)
DESCRIPTION
第 11 回 JavaScript ゼミ. セクション８－２ 発表者 直江 宗紀. ダイナミック HTML. ダイナミック HTML とは スタイルシート、 DOM 、 JavaScript これらを組み合わせた動的 HTML ドキュメント 通常の HTML ドキュメントは静的 フォームなどの小規模プログラムに向いている ( アニメーションなどでは最近だと Flash プラグインなどで使用されている ). スタイルシート. スタイルシートとは HTML ドキュメントの見栄えを定義 HTML→ 文書構造を記述するのに専念させる 表示定義→スタイルシートの役割 - PowerPoint PPT Presentation
Citation preview
第 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"><!--body { background-color : #e0e0ff ; }h1 { color : red ; }p { color : gray ; }b , i { color : green ; }--></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 – 相対位置での指定
プロパティ
説明
left エレメントの左端の位置を指定するtop エレメントの上端の位置を指定するwidth エレメントの幅を指定するheight エレメントの高さz-index エレメントの重なり順序oveflow エレメントの中身が指定範囲を越えた場合の指定 (スクロール等 )
visibility エレメントの表示、非表示
positionプロパティ
DOMを使用したプロパティアクセス DOM を利用したアクセス
JavaScript からプロパティへのアクセスに利用可 プロパティは各エレメントの style プロパティの
下に個別のプロパティとして格納
例 myElement.style.visibility=“hidden” ;
記述例と結果（参考書 p.402,showHide.html参照）
演習課題
showHide.html のサンプルを参考に、今度は、複数の文章を切り替えて表示させられるようにしたい。複数のボタンに対応した文章に切り替えられるように改良をせよ。
