16章 CSSとダイナミックHTML
導入部
- CSSはHTML/XMLの表示方法を指定する標準。
- 理想的にはなどの表示方法を指定するHTMLは使わないようにすべき。
- CSS & JavaScriptでDHTML。
16.1 CSSの概要
書き方
font-weight: bold; color: blue; text-decoration: underline;
のように複数の属性をセミコロンで区切るリスト形式。
個々の属性は、名前と値をコロンで区切る。
CSS2.1のスタイル属性と値
一緒に使うものはまとめて指定できるようにショートカット属性がある。
例）font-weight、font-style、font-size、font-familyの同時指定
font: bold italic 24pt helvetica;
16.1.1 ドキュメントの要素へのスタイルルールの適用
方法1 HTMLタグのstyle属性で指定する方法
例）
<p style="margin-left: 1in; margin-right: 1in;">
でも、CSSの重要な目的はドキュメントの内容/構造と表示方法との分離なので
これでは目的が達成できない＞＜
方法2 スタイルシートですべてのスタイル情報を一元管理
例)特定の要素を指定する場合
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff; } <body>にかかる
例)複数の要素を指定する場合
h1, h2 { text-align: center; } <h1>、<h2>の要素にかかる
例)ネストされた要素を指定する場合
blockquote { font-style: italic; } blockquote i { font-style: normal; } <blockquote>内はイタリック体、<blockquote>の中の<i>タグ内は普通
例)class属性で要素を指定する場合
.attention { font-weight: bold; } <xxx class="attention">という要素すべてにかかる(xxxは任意)
例)class属性と要素名で要素を指定する場合
p.attention { color: red; } <p class="attention">という要素すべてにかかる
例)id属性で要素を指定する場合
#p1 { visibility: hidden; } <xxx id="p1">という要素にかかる(xxxは任意)
16.1.2 ドキュメントとスタイルシートの関連付け
HTMLドキュメント内に直接書く方法
<html> <head><title>Test Document</title> <style type="text/css"> body { margin-left: 30px; margin-right: 15px; background-color: #ffffff; } p { font-size: 24pt; } </style> </head> <body><p>Testing, testing</p></body> </html> 少量ならいいが、多くなると非常に見づらい＆メンテしづらい＞＜
外部スタイルシートを読み込む方法
- その1
<html> <head><title>Test Document</title> <link rel="styleshieet" href="mystyles.css" type="text/css"> </head> <body><p>Testing, testing</p></body> </html>
- その2
<html> <head><title>Test Document</title> <style type="text/css"> @import "mystyles.css"; </style> </head> <body><p>Testing, testing</p></body> </html>
16.1.3 カスケード
同一スタイルシート内でのルールの優先度
- id属性で指定されたルール
- class属性で指定されたルール
- ネストされたタグ名で指定されたルール
- 単一のタグ名で指定されたルール
16.1.4 CSSのバージョン
- 現行はCSS2
- CSS3は2010年？
16.1.5 CSSの使用例
割愛
16.2 DHTMLのためのCSS
この項で学ぶスタイル属性
| 属性 | 意味 |
|---|---|
| position | 要素の配置方法を指定する。 |
| top, left | 要素の上端と左端の位置を指定する。 |
| bottom, right | 要素の下端と右端の位置を指定する。 |
| width, height | 要素のサイズを指定する。 |
| z-index | 要素の重なりのzオーダーを指定する。 |
| display | 要素をどのように表示するか指定する。 |
| visibility | 要素を表示するかどうかを指定する。 |
| clip | 要素のクリッピング領域をしていする。 |
| overflow | 割り当てられたスペースからはみ出た場合の表示方法を指定する。 |
| margin, border, padding | 余白やボーダーを指定する。 |
| background | 背景の色や画像を指定する。 |
| opacity | 要素の透過度を指定する。 |
16.2.1 DHTMLの鍵となる絶対位置指定 position
positionに指定可能な値は次の4種類
static
- デフォルト値
- 位置指定はできない
absolute
- に対する絶対位置指定
fixed
- ブラウザウィンドウに対する相対位置指定
- 固定位置指定とも言う
注意
- leftとrightを指定すると幅が決まるが、widthも指定すると強制的にwidthの幅になる。
- top, bottom, heightの関係も同様。
16.2.2 CSSによる位置指定の例：影付きテキスト
割愛
16.2.3 要素の位置とサイズのチェック
要素の位置はoffsetLeft、offsetTop
要素のサイズはoffsetWidth、offsetHeight
で取得できる。
が、この値は位置指定を行う要素の先祖要素を基準とした値。
なのでドキュメント座標を求めたい場合はoffsetParent参照をループで合算する作業が必要。
さらに要素にoverflow属性が指定されている場合はスクロールバーの位置も考慮する必要がある。
コードの写経は割愛。
cf.) jQuery 1.3 4048-4084行
16.2.4 3次元座標：z-index
- z-index属性が大きい方が重なりの手前に表示される。
- z-indexの値は兄弟要素にしか適用されない。
- staticな要素はz-indexを指定しても使われない。
- 古いブラウザでは絶対位置指定した要素の上にフォーム要素が表示されるバグがある。
16.2.5 要素の表示方法と可視性
visibility
hidden : 非表示、要素の分のスペースは確保される。
display
none : 非表示、要素の分のスペースは確保されない。
16.2.6 CSSボックスモデルと位置指定の詳細
- widthやheightはContentのサイズで、paddingやborderは含まれない。
- top,left,right,bottomはpadding edgeからの相対座標。
16.2.7 色と透明度
色
- 色は英語の色名か16進の数値で指定できる。
- 要素の背景色は指定をしない場合には透明になる。
- ただしフォームなどは指定しなくても透明ではない。
- 明示的に背景色を透明にすることもできる。
16.2.8 部分表示：overflowとclip
overflow
要素のコンテンツが要素に割り当てられたサイズをはみ出した場合の表示方法。
| 値 | 効果 |
|---|---|
| visible | はみ出た場合に要素の外側に描画する。デフォルト |
| hidden | はみ出た部分は描画されない。 |
| scroll | 要素ボックス内に水平/垂直スクロールバーが常に表示される。 |
| auto | コンテンツがはみ出た場合のみスクロールバーが表示される。 |
clip
要素のコンテンツがはみ出したかどうかに関わらず、どの部分を表示するか指定する方法。
style="clip: rect(0px 100px 100px 0px);"
- rectの引数の値の間にはカンマなし。
- 左から順に「上」「右」「下」「左」の矩形。
- 将来的には矩形以外もサポートされるらしい。
16.2.9 例：半透明のウィンドウを重ね合わせる
割愛。
16.3 インラインスタイルの制御
- DHTMLの最も重要な点はJavaScriptで要素のスタイル属性を動的に変更できる点。
- DOM要素のstyleプロパティでは、HTML要素のstyle属性が読み書きできる。
- スタイルシートのスタイルについては取得できない。
- JavaScriptで設定できるCSS2Propertiesはインラインスタイルなので最優先になる。
16.3.1 JavaScriptでのCSS属性の命名規則
CSSには属性名の中にハイフンが入っているものが多いが、JavaScriptではマイナスと
解釈されるのでそのままでは使えない。
element.style.font-family = "sans-serif"; //これはダメ
JavaScriptで用いるCSS2PropertiesはCSSの属性名のハイフンを取り除き、キャメライズ
したものになる。
element.style.fontFamily = "sans-serif"; //これはOK
16.3.2 スタイルプロパティの操作
- JavaScriptでCSS2Propertiesを操作する場合、すべての値は「文字列」形式で指定する。
element.style.fontFamily = "sans-serif";
- 単位が必要なプロパティには必ず単位をつける。
element.style.left = "100px";
- 単位をつけると自動的に文字列に暗黙の変換が起こるので便利。
element.style.left = 10 + "px";
- プロパティから読みだす場合にも単位がついてる事に注意。そのまま足すと文字列の連結になる。
// 誤 var totalMarginWidth = e.style.marginLeft + e.style.marginRight;// これは文字列の連結！ // 正 var totalMarginWidth = parseInt(e.style.marginLeft) + parseInt(e.style.marginRight);
- ショートカットプロパティも使えるので設定する時に便利。
element.style.margin = topMargin + "px " + rightMargin + "px " + bottomMargin + "px " + leftMargin + "px";
16.3.4 DHTMLアニメーション
割愛。
16.4 算出スタイルの制御
- CSS2Propertiesでは取得できない「スタイルシートで指定されたスタイル」をすべて合わせた結果の事。
- 取得方法は2種類
// IEの場合 var fontFamily = element.currentStyle.fontFamily; // IE以外の場合 var fontFamily = window.getComputedStyle(element, null).fontFamily;
- 算出スタイルでは必ずしも欲しい情報が取得できるとは限らない。
16.6 スタイルシートの制御
16.6.1 スタイルシートの有効化と無効化
- ＜link＞要素や＜style＞要素のdisableプロパティをtrueにするとまとめて無効化できる。
*1:サイ本には!import句と書いてあるが、これは間違いなので注意。
