第5回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">
<!-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 – 相対位置での指定
positionプロパティ
プロパティ
説明
left
エレメントの左端の位置を指定する
top
エレメントの上端の位置を指定する
width
エレメントの幅を指定する
height
エレメントの高さ
z-index
エレメントの重なり順序
oveflow
エレメントの中身が指定範囲を越えた場合の指定(スクロール等)
visibility
エレメントの表示、非表示
DOMを使用したプロパティアクセス

DOMを利用したアクセス



JavaScriptからプロパティへのアクセスに利用可
プロパティは各エレメントのstyleプロパティの下に
個別のプロパティとして格納
例
myElement.style.visibility=“hidden” ;
記述例と結果
（参考書p.402,showHide.html参照）
演習課題

showHide.htmlのサンプルを参考に、今度は、
複数の文章を切り替えて表示させられるようにし
たい。複数のボタンに対応した文章に切り替えら
れるように改良をせよ。

Download Report