[css] 全称セレクタを使ったブラウザデフォルトスタイルの初期化
全称セレクタを使った初期化はもう時代おくれだそうな。その理由は、ブラウザのデフォルトスタイルも見やすい場合があり、これまでも初期化してしまうのは適当でないと言う理由らしい。
これに対しての疑問を一つ。デフォルトスタイルの初期化はブラウザ間の見栄えを初期化するという目的があるらしいが、それをするには異なるブラウザでのCSSの解釈の違いを吸収する必要がある。そのためには、IEの場合、Operaの場合、Safariの場合、Firefoxの場合のようにして、それぞれのブラウザに対応した*.cssファイルを用意する必要がある。
かなり手間がかかることは間違いないだろうな。そのような情報を統一的に提供するページがあっても良いような気がする。
[css] マージンとパディング
同じページを IE と Firefox でに見ると同じスタイルのはずがどこか違って見えることがある。これは、2 つのブラウザがレイアウトの解釈に異なるアルゴリズムを用いているからだ。結局人間の目に入る情報はブラウザによって解釈された情報なのだから、Web ページをレイアウトするときにはどのブラウザで見ても同じように見えて欲しい。Web ページのレイアウトを担当するものは、2 つのブラウザのスタイル解釈と本来従うべき CSS の違いを理解しなければならない。
人間が見て次のようにレイアウトされている Web ページを作りたいときどうすればいいだろう。まずは絶対指定での課題を考える。幅 400px の親要素 (box) の中に、親要素の幅に対する幅 80% の子要素 (box) が含まれ、子要素の両側に等しいだけの幅 (親要素に対する幅 10% が両側に) が空いている、子要素の内容は子要素の縁から 40px だけ離れた位置にある。このとき正直に下のようなコードを書いてみた。これが思ったとおりに解釈されるかどうかはブラウザに依存する。
<div style="width:400px;background:yellow;">A <div style="width:320px;margin:0px auto;padding:0px 40px;background:green;">B C</div> D</div>
Microsoft Internet Explorer の場合
さてどのように見えただろうか。Microsoft Internet Explorer では、320px の緑色の帯、80px の黄色い帯、の順で表示された。左右の margin を auto、つまり両サイドを等しいだけ空ける、にしたのにもかかわらず。では子要素の両サイドのマージンを絶対指定するとどうだろうか。400px と 320px の差、80px の半分、40px が両側に空けばよいので次のように考えられる。
<div style="width:400px;background:yellow;">A <div style="width:320px;margin:0px 40px;background:green;">B C</div> D</div>
さてどのように見えただろうか。Microsoft Internet Explorer では、思ったように表示できたと思う。僕は、絶対指定は好きでない。なぜならブラウザのウィンドウの大きさを変えるとはみ出てしまうからだ。そこで幅やマージンを相対指定してみる。相対指定する際の問題点は何に対しての割合かということである。講釈を述べずに成功例を示し、どのように解釈しているかの結論を導こう。
<div style="width:400px;background:yellow;">A <div style="width:100%;margin:0px 10%;background:green;">B C</div> D</div>
Microsoft Internet Explorer では、思ったように表示できた。つまり絶対指定したときと全く同じ様に、40px の黄色の帯、320px の緑色の帯、40px の黄色の帯、の順番だ。つまり Microsoft Internet Explorer では、子要素の width を相対指定する場合の分母は (親要素の width) - (子要素の margin)、子要素の margin を相対指定する場合の分母は (親要素の width) だとわかる。
| cWWpx cMMpx |cWW% = ----------- X 100 , cMM% = ----- X 100 | pWWpx-cMMpx pWWpx
例えば、box 要素内の box 要素をセンタリングしたいという要望は多い。body 要素内の p 要素をセンタリングしたいとかである。センタリングするということは絶対指定した場合の (親要素の width) = (子要素の margin) + (子要素の width) が成り立っているということである。これと上の式により、親要素に対してセンタリングされる子要素の width は 100% でなければならない、ということがわかる。
| pWWpx-cMMpx |cWW% = ----------- X 100 = 100 | pWWpx-cMMpx
<div style="width:400px;background:yellow;">A <div style="width:100%;margin:0px 40%;background:green;">B C</div> D</div>
センタリングされる box 要素の width を 100% より小さくすると下のようになる。つまり親要素の width は指定したとおりの値で子要素の width が小さくなる、ということだ。
<div style="width:400px;background:yellow;">A <div style="width:50%;margin:0px 10%;background:green;">B C</div> D</div>
センタリングされる box 要素の width を 100% より大きくすると下のようになる。つまり親要素の width が大きくなり子要素の width は指定したとおりの値、ということだ。
<div style="width:400px;background:yellow;">A <div style="width:150%;margin:0px 10%;background:green;">B C</div> D</div>
草稿
上の絶対指定を相対指定にしてみるとこうなる
Firefox では上の 2 つは全く同じに見えた。InternetExplorer では上の 2 つは異なっていた。幅、マージン、パディングのパーセント指定が親要素の幅や高さに対する割合ならば、上の 2 つは全く同じに見えなければならない。
IEのことを考えないと。
Firefox では上の 2 つは異なっていた。InternetExplorer では上の 2 つは全く同じに見えた。幅、マージン、パディングのパーセント指定が親要素の幅や高さに対する割合ならば、上の 2 つが全く同じに見えるのはおかしい。
| IE 6 | Firefox 1.5 | |
|---|---|---|
| width:WW%; | 親要素 width 引く自身 margin の WW% | 親要素 width の WW% |
| padding:PP%; | 自身 width の PP% | 親要素 width の PP% |
| margin:MM%; | 親要素 width の MM% | 親要素 width の MM% |
ということは IE と Firefox で同じようなレイアウトをなすには margin だけ使って padding や width を使うのはご法度といううことになる? 少なくともいえることは、Firefox のほうが Web ページをレイアウトする方の人間にとってはわかりやすいシステムを採用しているということだ。
[css] ローカルに保存されたスタイルシートの強制的な更新
ファイル名を変えるのも一つの手。シンボリックリンクを張るのもあり。でもこれは思いつかなかった。JavaScriptにも適応できる。
<link href="common.css?20060425" rel="stylesheet" type="text/css"> <script src="common.js?20060425" language="javascript" type="text/javascript"></script>
これってつまり、HTMLファイルの全ての内容を置き換えるという作業をしないと反映されないのでは。と思った。
[html] HTML 4.01非推奨属性タグの置換
strike,s - 打ち消し線
/* style.css */
span.s{
/* substitution for strike tag */
text-decoration:line-through;
}
/* style.html */ ... <link rel="stylesheet" href="style2.css" type="text/css" /> ... <span style="s">この文章はCSSを用いて打ち消されます。</span> ...