なんとなくCSSを使っている人が，CSS中級者になるために　（「崩れないレイアウト」のセオリー）

CSSを「なんとなく」知っていて，「なんとなく」使っている，

というケースがある。

そういう場合，思わぬところでレイアウトが崩れ，

要素の正確なポジショニングができず，

「なんとなく」ずっと悩み続けることになる。

その原因は，CSSの中級のノウハウが足りない，という点にある。

一発で正確なレイアウトができるようになろう。

そうなれば，CSS中級者だ。

以下は，CSS中級者になるためのノウハウ。

（１）要素の分類

（１−１）インライン要素とブロック要素

（１−２）置換インライン要素と非置換インライン要素

（２）正確なポジショニング

（２−１） positionのrelative/absoluteの使い方

（２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い

（２−３）要素内の高さ位置と，要素の高さ

（２−４） floatの崩れない使い方

（３）正確なテーブルレイアウト

（３−１）列幅指定とセル内容の折り返し

（３−２）列幅指定とセル結合

（３−３）列幅指定と空白セル

（４）微調整

（４−１）スタイル適用の優先順位

（４−２）CSS expressionとbehaviorによる微調整

（５）アフターケア

（５−１）情報収集の方法

（５−２）中級者の位置づけを理解する

※↑自作のもくじジェネレータで自動生成

（１）要素の分類

CSSについて欠かれた情報を読むためには，まず，要素の分類をマスターする必要がある。

そうしないと，CSSの仕様書が読めないので。

（１−１）インライン要素とブロック要素

HTMLの全タグを以下の３つに分類できるようになっておくこと。

ブロック要素

インライン要素

ブロック・インライン要素

以下のURLなどを読んでおく。

ブロック要素とインライン要素の一覧
http://kuruman.org/dateki/block_inline

ブロック要素とは、文書の骨組みです

inlineを直訳すると「行内」であるとおり、インライン要素は行の中の文字に論理的な意味を持たせたりします。

表を示すtable要素でレイアウトを行うのは当然ながら好ましくありません。(但し、線形化して(タグを全て消し去って)も意味が通る場合は問題は起こりません。)

マークアップ言語としての XHTML 入門
http://keizai.xrea.jp/markup/markup04...

ブロック要素とは，「別行立てて表示される」要素のことで，通常ブロックの幅は，行幅とおなじ。

インライン要素とは，必ずブロック要素の中に収まらなければならない要素のこと。

ブロック要素の中にブロック要素が収めることはできますが，インライン要素の中にブロック要素を収めることはできません．また，本文の中にインライン要素を直接書くこともできません．

複数のブロック要素を横に配置する：１つのボックスの幅は 50% です．ただし，ボックスの周囲に枠線を描く場合は，枠線の厚みを考慮しなければなりませんので，ボックスを２つ並べる場合は，幅は 48% が適当

CSS によるレイアウトの考察
http://keizai.xrea.jp/markup/css0a.html

tableを用いると簡単に，ブロックを並べることができる．

しかしながら，table要素は表組みのためににのみ使われるべきである．また，アクセスシビリティや，検索エンジンの関係から，この方法は望ましくない

ブロックレベル要素とインライン要素
http://www.mozilla.gr.jp/standards/we...

ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます。つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。

「ブロックインライン要素」もある。見た目に関する決まり事はブロックレベル要素、文法上はインライン要素。img, input, selectなど。

display: inline;, display: block;とすれば、それぞれインライン要素、ブロックレベル要素として表示される

ブロック要素を「インライン化」することもできる。
display : inline; のようにdisplay属性を操作すればよい。

「内容に合わせて，自動的に要素の幅を変えたい。しかし高さも指定したい」

という時に役立つ。

見出しと背景〜CSSテクニック〜
http://www.stylish-style.com/csstec/b...

displayというのは、ブロック要素とインライン要素の切り替えを行うプロパティです。値にinlineをとればインライン要素、blockをとればブロック要素として、本来のタグの性質にかかわらず振舞うことができます。

文字数に合わせて背景をつけてくれます。

↑目次へ戻る

（１−２）置換インライン要素と非置換インライン要素

インライン要素には，

置換インライン要素

非置換インライン要素

がある。

http://34567.jpn.org/study1/css/width.html

img要素、input要素、textarea要素、select要素、object要素これ以外のインライン要素が、非置換インライン要素

非置換インライン要素というのは具体的にどんな要素なんですか？
http://detail.chiebukuro.yahoo.co.jp/...

それを使うことで別のファイルに置き換わらない要素です。a，span，em，strong，q など，乱暴に言えば普通のテキストが入るインライン要素です。

【置換】インライン要素は，img，object あたりです。

「置換インライン要素」は，前述の「ブロックインライン要素」に等しい，と考えてよい。

置換インライン要素(インラインブロック)
http://www.agr.hokudai.ac.jp/useful/u...

これらの用語は，CSSの仕様書を読む際に必要。

例えば・・・

10.3 幅及びマージンの計算
http://www.y-adagio.com/public/standa...

「行内非置換要素：'width'特性は適用されない。」

CSS2　W3Cによる勧告ドキュメント
http://www.y-adagio.com/public/standa...

↑目次へ戻る

（２）正確なポジショニング

ブロック要素の正確な配置について。

（２−１）positionのrelative/absoluteの使い方

以下の３パターンを正確に使えるようになること。

relativeのみ
relative + absoluteの組み合わせ
absoluteのみ

positionプロパティのrelative、absoluteの簡単な使い方
http://www.acky.info/tips/css/00013.h...

relativeのみ：

本来配置される位置から指定した値だけ移動する。

relative(absolute)とabsoluteの組み合わせ：

親要素の位置が基準点となり指定した値だけ移動する。

absoluteのみ

基準点がない場合はブラウザの左上から指定した値だけ移動する。

CSS : positionの「absolute」「relative」「fixed」のリファレンス
http://www.css-lecture.com/log/css/03...

absoluteを単体で使った場合は、body要素が基点。画面の左上を0 0の座標とした基点

relativeをかけた要素の中でabsoluteを使った場合は、relativeかけた要素の左上を0 0の座標とした基点

↑目次へ戻る

（２−２）DOCTYPEスイッチによるボックスモデルの解釈方法の違い

HTML冒頭のDOCTYPE宣言によって，ボックスの解釈方法が変わる。

IEがQuirksモードで動作する場合，幅や高さを計算する時に，paddingやborderの太さが含まれてしまう。（本当は含めないのが正しい）

対処法：

widthと共に，paddingやborderを指定しない。それらに依存するようなCSSコードを書かない。

DOCTYPE宣言とDOCTYPEスイッチ - HTML・XHTML（一覧表）
http://phize.net/resource/html/doctyp...

DOCTYPEとブラウザの組み合わせによって，以下の３つのモードが発生する：

互換モード（＝Quirksモード）

ほぼ標準モード

標準モード

2. ボックスモデルと DOCTYPE スイッチ
http://www.geocities.jp/multi_column/...

Quirksモードはボックスモデルを正しく解釈せず，ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう

DOCTYPE 宣言とはその(X)HTML のバージョンを示したものです。大雑把に言えば、

きちんとした DOCTYPE 宣言を持った文書なら CSS の書き方にも問題はないはず、よって仕様どおりに解釈する（Strandard モード）。

DOCTYPE 宣言すら持たない文書は CSS の書き方も間違っているだろう、よって間違った解釈に合わせる（Quirks モード）。

WinIE6 には DOCTYPE 宣言より前に何か文字列があると Quirks モードになってしまうバグがあります。つまり XML 宣言つきの XHTML の場合には、IE6 は Quirks モード、その他の新しいブラウザは Standards モードになってしまいます。

HTML4.01 であれば XML 宣言は不要

3. ボックスモデルバグの対処法
http://www.geocities.jp/multi_column/...

ボックスモデルの解釈には 2通りありました。ひとつは内容幅の外側にパディングとボーダーが足される CSS2 の仕様どおりの解釈。これを content-box と呼びます。

もうひとつが、width をボーダーまでの幅とする解釈。これを border-box と呼びます。

width とともに padding と border は指定しない。

標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
http://2xup.org/log/2007/07/27-2111

Internet Explorer では後方 (過去) 互換モードで border-box で解釈するので、Windows IE 6 では注意が必要です。

text-align は指定されたブロック要素の内部にある全てのインライン要素を水平位置を揃えるプロパティです。ブロック要素の水平位置は揃えません。Windows IE は標準準拠モード・後方互換モード共、ブロック要素の水平位置も揃えます。

なお，「ほぼ標準モード」と「標準モード」の違いについては，以下のURLなどを参照。

ほぼ標準準拠モード(Almost Standards)
http://nagomin0123.web.fc2.com/doctyp...

標準準拠モード(Standards)と、ほぼ標準準拠モード(Almost Standards)の違いとして、テーブルのセル内に画像を置いた際の余白の付き方があげられます。

↑目次へ戻る

（２−３）要素内の高さ位置と，要素の高さ

画像のデフォルトの縦方向の表示位置と，ディセンダについて。

ディセンダとは，行のベースラインから「g」の字の下端まで。

要素内で画像が配置される高さ位置に注意。

table内に画像を隙間無く敷き詰めるには注意が必要です #1
http://www.mozilla.gr.jp/standards/we...

ベースライン＋ディセンダ＝行の下端

画像の下端は，行の下端ではなくベースラインにそろう

別の話題として，要素自身の高さについて。

ブロック要素の高さは，要素内部の内容が大きいと，挙動がブラウザ依存になるので注意。

heightプロパティの注意点〜内容が大きい場合
http://www.mozilla.gr.jp/standards/we...

IEでは，要素の内容が優先される。

IE以外では，要素の高さが優先される。要素より大きな内容は要素からはみ出す。

↑目次へ戻る

（２−４）floatの崩れない使い方

floatは，ブロック要素を横に並べるために使う属性。

「横並びリスト」を作るときや，「サイドバー」設置時などに役立つ。

float属性を指定した要素たちの次の要素にclear属性を指定すれば，そこで横並び（回り込み）が解除される。

float
http://www6.plala.or.jp/go_west/nextc...

その親要素の最も左に寄せます。その要素以降に新たに左フロートのブロックボックスが現れた場合、そのボックスは前のブロックボックスのすぐ右側に配置します

floatを使用した横並びのリスト
http://www.tagindex.com/stylesheet/li...

このプロパティをli要素に対して設定すると、リスト項目を横並びで表示させることができます。

２−５　「float」によるCSSレイアウトの崩れを防ぐ
http://homutuku.com/beginner/250.html

左右に配置したdivの次のdivへ「clear : both」で回り込み解除

floatを繰り返すとレイアウトがくずれる
http://norisfactory.com/stylesheetlab...

レイアウトがくずれるのは、全体を囲むボックスを繰り返す前に回り込みを解除していないせいである。

ただ、「HTMLは論理構造を記述し、見栄えはスタイルシートで定義する」という本来のあり方からすると、HTMLの中にレイアウトを制御する以外まったく意味を持たない要素が入り込んでくるのはやや気になる。

横並びリストを作る際の，基本的な落とし穴：

横並びしている要素のwidthの合計値を100%にしてはいけない。

CSS やってはいけないこと floatとは
http://airrat.blog103.fc2.com/blog-en...

floatで横に並んだ要素が足して100%になってはいけない。98％以下になるように幅を指定する。

floatした要素にmarginやpaddingを指定してはいけない。

IEは"widthのサイズはpaddingとborderを含めてのサイズ"と誤認している為。

横並びリストの片方のボックスを横幅固定にして，もう片方のボックスはブラウザ横幅に合わせて広げたい場合：

ウィンドウにあわせて片側のカラム幅を可変させる
http://www.mdn.co.jp/di/articles/517/...

下に落ちてしまったサイドバーのカラムを可変するカラムの横に並べるためには、「ネガティブマージン」を使う

可変するカラムの左右どちらかにサイドバー分の200pxの空きスペースを用意して、そこに溢れているカラムを配置する

別の問題：

横並びしている要素たちの，親要素の高さが狭くなってしまう。

その対策：

中身の末尾をclearする。
IEでは，親要素に何かしら高さを指定する。

CSS float を使う時の注意点 ( clearfix の使い方 )
http://bowz.info/781

float させた div の親にあたる div 内で clear しないと表示がおかしくなる。div#main を閉じる前にクリアしないと、div#main の高さが確定しない。

float させる時は、width 指定を入れておくのが基本

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件
http://www.fsiki.com/archive/css-doc/...

floatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまいます。

モダンブラウザ対策

#containerC:afterにcontentを指定すると、ボックスの中の一番最後に新たなテキストや画像を挿入することができます。

挿入したものをブロック要素化し"clear: both"をかけることによってボックス内のfloatをすべて解除することができます。すると、floatしているボックスの高さに応じて外側のボックスの高さが拡張されるようになります。

WinIE5.0〜6.0

外側のボックスに高さ(値は何でもよい)を与えると、内側のボックスのフロートに関わらずボックス高さを拡張

heightプロパティの注意点〜内容がfloat要素の場合
http://www.mozilla.gr.jp/standards/we...

テキスト１，float:left，テキスト２　とすると，２つのテキストはくっつく。テキスト１の終了時点で次の行にfloatされた要素がくる。

浮動要素の高さもheightに含めさせる方法：

floatを解除してやれば、それ以降に続く要素はfloatしたブロックの下に回り込む。つまり、内容の高さに対して影響力が出てくる

さらに別の問題：

横並びしている要素たちの高さが，そろってくれない。

対策は，以下のページを参照。

floatしたdivの高さを揃える
http://scuderia-web.com/tips/xhtml_cs...

高さが揃わないため、情報量が少ないdivの下に隙間が空いてしまいます。

padding-bottomとmargin-bottomに正負の異なる大きな値を入れて調整すればよい

ブロックレベルのカラムの高さを揃える4つの方法
http://blog.e-riverstyle.com/2009/07/...

display: tableを使用

JavaScriptで最大のheightを持つカラムを探索し，動的に全カラムの高さを変える

親要素のbackground-imageで背景画像を指定し，各カラムが最下部まで伸びているように見せる

各カラムの背景を表示するためのボックスをそれぞれ用意し，位置を相対指定して背景に表示させ，各カラムが最下部まで伸びているように見せる

[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート
http://coliss.com/articles/build-webs...

上記の４番目と同じ

最後に，position属性やdisplay属性との兼ね合い：

position:absoluteとすると，floatは強制的に無視される。
floatを使う場合は，基本的にdisplay:blockとなる。

CSS における display, position, float プロパティの相互関係
http://d.hatena.ne.jp/elm200/20080201...

計算アルゴリズムのフローチャート

'display'と'position'と'float'の関係
http://www6.plala.or.jp/go_west/nextc...

↑目次へ戻る

（３）正確なテーブルレイアウト

tableは，思わぬところでレイアウトが崩れやすい。

正確なテーブルレイアウトのため，はまりやすいポイントを下記に列挙。

（３−１）列幅指定とセル内容の折り返し

テーブルのセル内容に「長い半角英数字の単語」が入ると，列の幅が崩れる件。

仕様と対策：

ノーマルでは，セルの中身優先。列幅が伸びてしまう。

table-layout : fixed; にすれば，テーブル列幅指定が優先になる。そのかわり，セルの中身が飛び出る。
- セルの中身が飛び出してしまう件の対処法：
  - wbrタグを定期的に埋め込み折り返す。
  - wbrを埋め込む代わりに，word-break: break-all; を指定する手もある。IE限定。

文字のつきぬけの問題(連続した半角文字の折り返し)
http://www.off-soft.net/ja/develop/ht...

htmlでtdタグ内の折り返し位置を強制したいです。
http://q.hatena.ne.jp/1216109590

半角英数字の連続は、英語の単語として扱われるため、通常のブラウザ指定では折り返さない仕様

半角スペースを入れると、単語の区切りとみなされ折りかえります

なお，巨大なテーブルを動的に生成する場合，

サーバサイドで自動的にwbrタグを埋め込むなどの処理をすることになる。

が，テーブルが巨大だとwbr要素の数が膨大になり，ブラウザの処理速度が落ちる場合があるので注意。

また逆に，「常に内容優先とし，セル内容を折り返したくない」（列幅を内容に合わせて伸ばしたい）という場合は，
td要素に white-space: nowrap; を指定する。

セル内で自動改行させない
http://www.tagindex.com/stylesheet/ta...
http://www.tagindex.com/stylesheet/te...

white-space: nowrap;で，セル内で自動改行させない

領域の幅を超えたテキストは、はみ出して（または横スクロールで）表示されます。

IEのtable内で white-space:nowrap を有効にする方法
http://d.hatena.ne.jp/KEINOS/20090121

nowrapが効かない場合は，内側にもうひとつ要素を設けてそこでnowrapにする。

IE8では特定の条件で他の要素にも影響が及んでしまうバグがある
http://fdays.blogspot.com/2009/04/ie8...

これらを使った例として，以下のようなサンプルを考える。

サンプル状況：

「擬似フレーム（div要素）の中で，テーブルを横スクロールさせたい。」

HTMLのコード：

<div class="wrapper">
  
  <table>
  <tbody>
    <tr>
      <th>見出し１</th>
      <th>見出し２２２</th>
      <th>見出し３３３３３</th>
    </tr>
    <tr>
      <td>データ１</td>
      <td>データ２</td>
      <td>データ３</td>
    </tr>
  
    〜〜
  
  </tbody>
  </table>
  
</div>

CSSのコード：

div.wrapper {
  /* 中身のテーブルがこのフレームの幅を超えて
     横にはみ出たらスクロールする */
  overflow-x : scroll;
  width : 200px;
}

table {
  /* 特にスタイルなし */
}

th {
  /* 見出しセルの内容は改行しない */
  white-space : nowrap;
}

td {
  /* 列幅は見出しセルに合わせる。
     データセルの内容は列幅に合わせて改行 */
  word-break : break-all;
}

これでOK。

注意したいのは，table要素に対して「table-layout:fixed;」を指定していない，ということ。

生半可な知識に基づいて何となくそう書いてしまうと，全ての列が同じ幅で表示されてしまう。

どうしてかというと，「table-layout:fixed;」は，あくまで１行目のwidth属性を見て列幅を決定するから。

この場合，１行目のth要素にまったくwidth属性が指定されていないので，

各列を均等にレンダリングしようとしてしまう。

なので，この場合「table-layout:fixed;」は不要。何とな〜くおまけで書かないように。

↑目次へ戻る

（３−２）列幅指定とセル結合

IEでは，テーブル中でcolspanを使ってセルを結合すると，列幅が崩れる。

対処法：

結合されたセルにwidthを指定する。
全セルにwidthを指定する。
paddingを使わない。
ピクセル指定ではなく，％指定する。
COLSPANのないセルをテーブルの入れ子にする。　など

【IE6】テーブルにcolspanが入ると幅指定がずれる？
http://soudan1.biglobe.ne.jp/qa540662...

結合されたセルの横幅が崩れる。

そのセルにスタイルでwidthを指定すれば解決する。

IE6 バグ table td　colspan paddingの組み合わせ
http://okwave.jp/qa/q3344453.html

テーブルの１行目が全結合されている場合，IEで顕著に列幅が崩れるバグ。

全セルにwidth指定すればある程度防げるが，paddingを指定するとずれる。IEでpadding指定しないほうが良い。

CSSサンプルプログ: colspan使用時のテーブル列幅指定について
http://css-el.seesaa.net/article/1498...

テーブルの列幅のピクセル指定＋colspanの組み合わせは，レイアウトが崩れる。

列幅をpxではなく％で指定すればよい。

テーブルにCOLSPANが含まれると幅の指定が効かない
http://kikky.net/pc/css_bug020.html

Internet Explorer6ではテーブルにCOLSPANが含まれると幅の指定がずれます。

どうも同じ縦列として幅が計算されレンダリングされるみたいです。

HTML,CSSバグ＆回避法リスト : 幅指定をcolspan指定と組合わせた場合
http://www.keynavi.net/ja/bugh/html.h...

表示速度優先 (テーブル全体が読み終わる前から表示を開始する) のために曖昧に処理されている

特に，１行目が結合されている場合は厄介。

table-layout:fixed; を適用してもだめ。

table-layout:fixedでテーブルの幅指定
http://www.tagindex.com/cgi-lib/q3bbs...

(col|colgtoup) 要素がないので、最初の行の各セル幅を調べる

最初の行は＜td colspan="3"＞しかなく、かつ幅が指定されていないので、均等に 3 分割する

だから、後ろの行で 200-600-200 と指定しても無意味

さらなる対処法：

１行目にcolspanで結合された行を持ってくる代わりに，display:none; で隠したtr要素を持ってきて，そこで各列の幅を指定する。

↑目次へ戻る

（３−３）列幅指定と空白セル

セル内容を空白にすると，列幅が崩れやすい。

対処法：

＆nbsp;のように，とにかく何か入れておく。

テーブルを自由に飾ってみよう
http://support.biglobe.ne.jp/knowhow/...

文章を記述しないセルには「＆nbsp;」という半角スペースを表す記号を記述して、空のセルを作らないようにしてください。

空のセルを作ってしまうとテーブルがくずれてしまい、思い通りのレイアウトを表示させることができません。

体裁が崩れてしまう。
http://forums.adobe.com/message/18479...

空白セルでレイアウトを操作するのは、HTMLを表示するブラウザによって表示上の差異が発生しやすい

↑目次へ戻る

（４）微調整

設定されたプロパティを微調整する方法。

CSSとJavaScriptの連携など。

（４−１）スタイル適用の優先順位

CSSセレクタは，それぞれ「ポイント」を持っている。

CSSの適用が複数箇所で行なわれている場合，このポイントが高いほうのスタイルが優先して適用される。

＊（全称セレクタ）：0ポイント

タグ指定：1ポイント

class指定：10ポイント

id指定：100ポイント

上記の組み合わせ：各ポイントの合計値

CSSの優先順位
http://www.stylish-style.com/csstec/b...

CSSは基本的に後に書いたもの（読み込んだもの）が優先されるようになっていますが、そうならない場合もあり、自分の思った通りのスタイルが適用できず、困ることもしばしば。

CSSの優先順位はセレクタの獲得ポイントで決まる

ポイントはセレクタを複数並べることで加算されていく

ポイントに関係なく特定のスタイルを最優先させたい，という場合は，「! important」と宣言する。

（しかし，この宣言はIEでは後出しのスタイル宣言に負ける。）

!importantを使ったIEバグ対処法
http://wemolog.blog61.fc2.com/blog-en...

CSSの各プロパティを適用させる際にその優先度を高め、最優先とさせる「!important」という宣言

WinIEでは「後に指定したものを優先する」という方を強く解釈してしまう（!importantを無視してしまう）

!importantハック
http://css.ojaru.jp/library/important...

まとめると，設定済みのスタイルを追記によって調整したい場合，以下のようにすればよい。

セレクタ指定をよりいっそう複雑にすれば，そのスタイル指定のほうが優先される。

セレクタ指定を複雑にしたくない場合は，「! important」宣言すれば最優先される。

Win IEなら，同一のセレクタ指定によるスタイル宣言を追記するだけで，後勝ちとなる。

↑目次へ戻る

（４−２）CSS expressionとbehaviorによる微調整

「最後の手段」として，微調整のためにJavaScriptを活用する方法を知っておく。

ただし，セキュリティホールを作らないように注意。

CSSのプロパティで「expression( 〜 )」とすれば，JavaScriptを実行できる。

サンプルとして，以下を a.html で保存し，IEで閲覧：

<input type="text"
 style="margin : expression( this.value = (new Date()).getTime(), 10 )"
>

マウスを動かすたびに，JavaScriptの関数が実行・評価されている。

ダイナミックプロパティ expression() のまとめ
http://useyan.x0.com/s/html/expression/

ブラウザクラッシュの原因になりやすい

Webサイトの高速化ルール7　CSSのExpression()は使わない! (Yahoo! developer netoworkより翻訳)
http://www.inter-office.co.jp/content...

評価回数が多いので，Webサイトの高速化の妨げになる

YSlow：ページ読み込み速度 CSS Expressions は古いIE独自の仕様なので削除
http://route58.org/2010/05/22_024426_...

IE8.0以降ではexpressionは使えない

expressionではなく，「behavior属性にHTCファイルを指定する」という方法によってもスクリプトを実行可。

外部スクリプトを読み込んで実行する
http://css.eweb-design.com/0814_bhb.html

expressionは，クラッシュの原因になるうえにIE8で廃止なので，基本的に使わないほうが良い。

ただし，expressionには良い使い方もある。

CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする
http://www.yomotsu.net/wp/?p=400

behaviorプロパティにexpressionを設定

このように，古いブラウザの挙動を微調整するためには，CSS expressionの知識が必要になる場合もある。

↑目次へ戻る

（５）アフターケア

ここまでの情報を学習したら，次に何をしたらよいか。

（５−１）情報収集の方法

まずは，自分のレベルを測定しよう。

HTMLとスタイルシート（CSS）の業務スキルレベル　判別表　（５段階）
http://language-and-engineering.hatenablog.jp/entry/20110702/p1

その上で，漏れや不足を補うために，基本的なテクニックを網羅したページを一度読み込んでおくとよい。

スタイルシートテクニック　基本技（簡易リファレンス）+α/使い勝手のいい応用技
http://www.stylish-style.com/csstec/c...

スタイルシートリファレンス（目的別）
http://www.htmq.com/style/index.shtml

また，レイアウトデザインの常識（定石）も押さえておく。

デザイナーでない人のためのレイアウト入門
http://www.cremadesign.jp/dsm/design_...

近接：距離でグルーピング

整列：無意味なデコボコ撲滅

対比：重要メッセージを見出しで目立たせる

反復：エレメントを使い回して統一感

いいデザインをするための4原則
http://blog.creamu.com/mt/2009/03/4_1...

上記と同じ４原則。対比を「コントラスト」と言い換えている

そして，CSSハックに関する知識を網羅しておく。

CSS Hack ライブラリー
http://css.ojaru.jp/library/index.html

また，時間を見つけて，CSS 2の仕様書を読んで把握しておくとよい。

CSS2
http://www.y-adagio.com/public/standa...

そうしたら次は，以下のようなサイトを定期的に購読する。

そうすれば，Webデザインのトレンドやネタをストックする事ができる。

Webデザインの見本帳
http://www.web-mihon.com/

コリス
http://coliss.com/

CREAMU
http://blog.creamu.com/mt/

Design Walker
http://www.designwalker.com/

かちびと.net
http://kachibito.net/