サイ本要約 16章「CSSとDHTML」

JavaScript サイ本

ブラウザの開発ツールなりで実際にstyleいろいろいじると理解が深まりんぐ。
特に位置指定まわりはやってみると感覚としてわかります。
Chrome使ってる人なら Ctrl+Shift+I をｯﾀｰﾝ！しましょう！
あとこのへんの基本をさらった上で、jQuery使って楽しましょう。
jQueryのcss操作系メソッドのコード読んだりするのもいいかも。

◆CSSの概要

記述方法

  • セレクタ { 属性: 値; 属性: 値;属性: 値;・・・} というおなじみ(?)の記述方法。

//タグ指定
p { font-weight: bold; color: blue; text-decoration: underline; }
//クラス指定
.bold { font-weight: bold; }
//id指定
#hoge { margin: 3px; }
//組み合わせ: errorクラスをもつdiv要素
div.error

//スペースをはさむと、子孫要素を指定できる。
//div要素内のp要素
div p { 〜〜〜 }

  • どんな属性、値があるかについてはググッてリファレンスみてください。
  • 親要素から値を継承できる、"inherit"という値がある。
  • よく使われると思われるものにはショートカット属性が存在する。
    • font, margin, padding, border など。


要素への適用方法

  • 要素の"style"属性で指定。

<div style="letter-spacing: 0px; line-height: 1.4;">
    hogehoge
</div>

  • スタイルシート内に記述。
    • htmlの構造と表示を分けるという観点からは、こちらが推奨される。

スタイルシートの記述方法

  • 内に直接記述。

<head>
    .
    .
    <style type="text/css">
        body { --- }
        p { --- }
    </style>
</head>

  • 外部ファイルから読み込む。

<head>
    .
    .
    <link rel="stylesheet" href="hoge.css" type="text/css">
</head>


スタイルルールの優先順位

  • 基本的な考え方としては、適用範囲が狭いものほど強い。
  • 各スタイルシートの優先順位(同じ属性が指定されている場合は左側が優先される)
    • 要素 > ページ > ユーザ > ブラウザ
    • 例外、ユーザスタイルシートにimportが含まれている場合
  • 同じ要素に対して、複数の方法で指定された場合の優先順位
    • id > クラス > 入れ子タグ(例: div p {~~} の p) > タグ


◆インラインスタイルの制御

属性値の取得、設定

  • 要素を参照するオブジェクトの、styleプロパティから取得、設定できる。
  • styleプロパティから取得、設定できるのは、インラインスタイルで指定したもののみ。
  • styleプロパティから取得、設定できるのは、インラインスタイルで指定したもののみ。(大事なことなので2回言いました)
    • なので、スタイルシートで指定した属性情報は取得できない。
    • 取得したい場合はwindow.getComputedStyleを利用する。(後述)
  • 取得結果の値は文字列。
    • "width", "margin-top" などは、単位も含めて文字列として返されるので注意。
    • 設定時も、単位(px等)を含めた文字列で指定すること。

//要素取得
var hoge = document.getElementById("hoge");
//属性値の取得
var width = hoge.style.width;
//属性値の設定
hoge.style.backgroundColor = "red";

//幅の取得値は単位を含めた文字列
var width = hoge.style.width; // "150px" など
//幅を倍にする場合はparseInt()などを使う
var newWidth = parseInt(width) * 2;
hoge.style.width = newWidth + "px";

//ダメな例(数値と解釈されない文字列に数値をかけた結果はNaNになる)
hoge.style.width = hoge.style.width * 2;

  • "margin", "font" などのショートカット属性も取得、設定できる。 

//要素取得
var fuga = document.getElementById("fuga");

//属性値の取得
var margin = fuga.style.margin; //インラインで指定されていれば、"10px 5px" などと返ってくる。

//属性値の設定
hoge.style.margin = "5px 10px 15px 20px";
hoge.style.padding = "5px 10px"; //上下5px、左右10pxの指定となるのはスタイルシート記述時と同じ



命名規則に関する注意

  • ハイフンを含む属性名の場合は、ハイフン後の最初の文字を大文字にする。

//ダメ
element.style.font-size
//OK
element.style.fontSize
element.style["fontSize"]
element.style["font-size"] //chromeだといけた。全ブラウザで可能かはわからない。

  • "float"はjavascriptの予約語なのでこれもそのままは使えない。
  • 代わりに"cssFloat"を使用する。

//ダメ
element.style.float
//OK
element.style.cssFloat


◆CSSによる位置指定

よく使い(そうな)位置指定いろいろ

  • position属性で方式を指定し、left,top(right,bottom)で位置を指定する。
  • 実際に書いてみて表示の変化を見るとイメージがつかみやすいので、ブラウザから適当なページのCSSいじって遊んでみましょう。
    • static(デフォルト)
      • 特になにも。
    • absolute
      • 絶対位置指定。
      • デフォルトでは、他の位置指定されている要素に入れ子にされている場合はその要素、に対しての相対位置を指定。

//<body>要素の左端から10pxの位置にdiv要素の左端がくる。
<div style="position: absolute; left: 10px;">
    hoge
</div>

    • relative
      • 通常(static)の配置結果に対する相対位置指定。
      • static指定時の場合に要素に割り当てられたスペースはそのまま残る。

//positionを指定しない場合(static)と比べて、右に10px、下に10px移動した位置に表示される。
<div style="position: relative; left: 10px; top: 10px;">
    fuga
</div>

    • fixed
      • ブラウザウインドウに対する位置指定。
      • スクロールに影響を受けずに同じ位置に表示させられるので、メニューバーやらによく使われる。

//常に表示ウインドウの上部に表示される。
<div style="position: fixed; left: 0px; top: 0px; width: 100%;">
    fuga
</div>


◆その他

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

  • document.styleSheets でCSSStyleSheetオブジェクトの配列が取得できる。
    • CSSStyleSheetオブジェクトはCSSRuleオブジェクトの配列をもつ。
      • CSSRuleオブジェクトには、selectorText, styleの2つのプロパティがある。
  • ぶっちゃけ使いどころがあんまりわかってない。

//最初のスタイルシートオブジェクトの、CSSRuleオブジェクトの配列が取得。
var rules = document.styleSheets[0].cssRules

for (var i = 0; i < rules.length; i++) {
	var rule = rules[i];
	//@import はスキップ
	if (!rule.selectorText) continue;
	//ruleText は、例えば次のような文字列になる
	//"div{font-size: 10px;width: 100px;}";
	var ruleText = rule.selectorText + "{" + rule.style.cssText + "}";
	//marginの値を2倍に変えてみる
	var margin = paseInt(rule.style.margin);
	if (margin) {
	    rule.style.margin = (margin * 2) + "px";
	}
}

  • スタイルシート内の既存ルールを読みだしたり変更したりするだけでなく、追加、削除までできる。
    • insertRule(), deleteRule()
      • ※ただしIEは（ｒｙ
      • IEは addRule(), removeRule()
      • 試してみたら、IE9からinsertRule(), deleteRule()も使えた。IE8だとダメだった。まだしばらくはIEは別で書かなきゃならなそう。

算出スタイル(computed style)

  • 実際にその要素に適用されているスタイルを取得したい場合、W3C標準のAPIが利用できる。
    • ※ただしIE以外に限る。
      • IEはcurrentStyleというのがある。
    • window.getComputedStyle({要素}, {CSS擬似要素});(IE以外)
      • CSS擬似要素は引数として省略できないので、基本的にnullを指定する。詳細を知りたい場合はググりましょう。
    • 取得はできるが、設定の書き換えはできない。あくまで値を取得できるだけ。

//最初のp要素取得
var p = document.getElementByTagName("p")[0];
//p要素の算出スタイルを取得
var style;
if (p.currentStyle) {  //IE用
    style = p.currentStyle;
}
else {
    style = window.getComputedStyle(p, null);
}

//  -> style.width, style.fontFamily などで適用されているスタイル情報が取得できる。

//windowはグローバルオブジェクトなので、getComputedStyleはそのまま呼べる。
style = getComputedStyle(p, null);