第11回JavaScriptゼミ セクション８－２ 発表者 直江 宗紀
ダイナミックHTML ダイナミックHTMLとは スタイルシート、DOM、JavaScript これらを組み合わせた動的HTMLドキュメント フォームなどの小規模プログラムに向いている (アニメーションなどでは最近だとFlashプラグインなどで使用されている)
スタイルシート スタイルシートとは 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セレクタの内容 クラスセレクタ 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タグ定義済みクラス Pタグ定義済みクラス 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 エレメントの表示、非表示
DOMを使用したプロパティアクセス DOMを利用したアクセス JavaScriptからプロパティへのアクセスに利用可 プロパティは各エレメントのstyleプロパティの下に 個別のプロパティとして格納 例 myElement.style.visibility=“hidden” ;
記述例と結果 （参考書p.402,showHide.html参照）
演習課題 showHide.htmlのサンプルを参考に、今度は、複数の文章を切り替えて表示させられるようにしたい。複数のボタンに対応した文章に切り替えられるように改良をせよ。