読者です 読者をやめる 読者になる 読者になる

しまてく

学んだ技術を書きためるブログ

16章 CSSとダイナミックHTML

JavaScript 勉強会

導入部

  • CSSはHTML/XMLの表示方法を指定する標準。
  • 理想的にはなどの表示方法を指定するHTMLは使わないようにすべき。
  • CSS & JavaScriptでDHTML。
この章で学ぶこと
  1. styleプロパティで個々の要素のスタイルをスクリプトから制御する方法
  2. 要素に適用されるCSSクラスを変更することで、要素のスタイルを間接的に変更する方法
  3. スタイルシートを有効/無効にする方法
  4. スタイルシートからルールを取得、追加、削除する方法

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 カスケード

複数スタイルシートで定義されたルールの優先度
  1. HTMLドキュメント内のstyle属性
  2. HTMLドキュメント内で指定されたスタイルシート
  3. ユーザースタイルシート
  4. ブラウザデフォルトスタイルシート


ただし、!important句*1が含まれている場合は以下の順番になる。

  1. HTMLドキュメント内のstyle属性
  2. ユーザースタイルシート
  3. HTMLドキュメント内で指定されたスタイルシート
  4. ブラウザデフォルトスタイルシート


デモ(http://localhost/wakate7/16_1_3_1.html)

同一スタイルシート内でのルールの優先度
  1. id属性で指定されたルール
  2. class属性で指定されたルール
  3. ネストされたタグ名で指定されたルール
  4. 単一のタグ名で指定されたルール


デモ(http://localhost/wakate7/16_1_3_2.html)

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
  • ブラウザウィンドウに対する相対位置指定
  • 固定位置指定とも言う
relative
  • 直近の親要素に対する相対位置指定


デモ(http://localhost/wakate7/16_2_1.html)

注意
  • 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.6.1 Internet Explorerでの問題点

Windows用のInternet Explorer4から5.5では・・・

ふるいぶらうざはよくないとおもいます。
よって割愛。

16.2.7 色と透明度

  • 色は英語の色名か16進の数値で指定できる。
  • 要素の背景色は指定をしない場合には透明になる。
  • ただしフォームなどは指定しなくても透明ではない。
  • 明示的に背景色を透明にすることもできる。
透明度
スタイル 書き方
CSS3標準スタイル opacity: .75;
古いmozilla -moz-opacity: .75;
IE filter: alpha(opacity=75);

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


特別な例で、CSSの「float」属性は「cssFloat」になる。(floatが予約語のため)

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.3 例:CSSツールチップ

割愛。

16.3.4 DHTMLアニメーション

割愛。

16.4 算出スタイルの制御

  • CSS2Propertiesでは取得できない「スタイルシートで指定されたスタイル」をすべて合わせた結果の事。
  • 取得方法は2種類
// IEの場合
var fontFamily = element.currentStyle.fontFamily;

// IE以外の場合
var fontFamily = window.getComputedStyle(element, null).fontFamily;
  • 算出スタイルでは必ずしも欲しい情報が取得できるとは限らない。

16.5 CSSクラスの制御

  • 要素のclassNameプロパティを変更することで、あらかじめスタイルシートで定義してあるスタイルを簡単に指定できる。

16.6 スタイルシートの制御

16.6.1 スタイルシートの有効化と無効化

  • <link>要素や<style>要素のdisableプロパティをtrueにするとまとめて無効化できる。

16.6.2 スタイルシートオブジェクトとスタイルシートルール

jQueryでつかってなかったので割愛。


おわり

*1:サイ本には!import句と書いてあるが、これは間違いなので注意。