久しぶりにブログを書きますが、また技術的な小記事を書いてみましょう。

大昔、ウェブページのレイアウトはテーブルを使って実装されていました。その欠点は、コンテンツとレイアウトが一緒に記述されるため、コードが非常に読みづらく、書くのもさらに混乱しやすいことでした。画像は細かく切り刻まれ、レイアウトのためだけに本来の構造を失っていました。利点としては、ナローバンドネットワークにおいては、多くの小さな画像を同時に読み込むことがマルチスレッド処理に相当し、大きな画像を1つ読み込むよりも速度が速かったことですが、もちろん現在ではこの問題を考慮する必要は全くありません。今日では、ほとんどのウェブページがCSSを使ってレイアウトされています。利点は多く、コンテンツとレイアウトが完全に分離されており、CSSを変更するだけでウェブサイトを見違えるようにすることができます。「CSS Zen Garden（禅意花園）」という本がありますが、この本全体では同じHTMLページに対し、100以上の異なるCSSを用いて全く異なるページレイアウトと効果を実現し、CSSの強力さを示しています。

CSSの初心者の多くは、CSSにおける重要な問題のいくつかを理解できておらず、その結果、CSSコードを記述または修正する際に常に期待通りの結果を得られないことがあります。まずは4つの側面を選んで解説していきましょう~~~~~~

1. 異なるブラウザによるCSSサポートの違い

この問題は複雑ですが、実際には主にプロパティがサポートされているかどうかと、ブラウザのデフォルト設定の問題です。

主要なブラウザでサポートされていないプロパティの使用はできるだけ避けるべきです。結局のところ、大多数のユーザーを無視することはできません。。。現在の主流ブラウザにはIE、Chrome、Safari、Firefox、Operaなどがありますが、中でも最も厄介なのがIEです。特にIE6とIE7には様々な不思議なバグが存在し、遭遇したときに具体的に分析して解決するしかありません。HTMLとCSSを記述する際はできるだけ標準に準拠し、公開前に各種ブラウザでテストを行うことをお勧めします。

なぜ異なるブラウザで見え方が違うのでしょうか？
これはおそらく、異なるブラウザが特定のプロパティに対して異なるデフォルト値を持っているためです。例えばbody要素の場合、ほとんどのブラウザではpadding: 3pxがデフォルトプロパティですが、Operaではmargin: 3pxがデフォルトプロパティとなっています。したがって、body { padding: 0; } とだけ設定した場合、Operaでは何の効果もありません。解決策は、独自のCSSを記述する前に、コードを使用してデフォルト値を統一することです：

/* Reset default browser CSS.
Based on work by Eric Meyer:
http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none;
}

2. CSSの優先順位

以下の例をご覧ください：

<div id="aaa">
    <h1>LINE1</h1>
    <div class="bbb">
        <h1>LINE2</h1>
    </div>
</div>

CSSの定義は以下の通りです：

#aaa h1 {
     color: red;
}
.bbb h1 {
    color: green;
}
h1 {
    color: blue;
}

出力されるLINE1とLINE2はそれぞれ何色になるでしょうか？

CSSの優先順位の具体的なアルゴリズムは以下の通りで、次の4種類のセレクタに対応する重みはそれぞれ：

• インラインセレクタ（つまり、ウェブページ内で直接Style属性を使用して選択するもの）：1,0,0,0
• IDセレクタ：0,1,0,0
• クラスセレクタ：0,0,1,0
• 要素セレクタ：0,0,0,1

該当するものがあれば加算していき、最終的にその優先順位を算出します。

• !important宣言されたスタイルの優先順位が最も高く、競合がある場合にのみ計算が行われます。
• 優先順位が同じ場合は、最後に記述されたスタイルが適用されます。
• 継承によって得られたスタイルの優先順位は最も低くなります。

同種のセレクタが10個揃うことはめったにありませんが、もしそうなったとしても。。。桁上がりはしません。。。
ですので簡単に言えば、基本的には以下の順序になります：
インラインセレクタ > IDセレクタ > クラスセレクタ > 要素セレクタ

これを例に当てはめると：

#aaa h1  /* 一个ID选择器，一个元素选择器，优先级是0,1,0,1 */
.bbb h1  /* 一个Class选择器，一个元素选择器，优先级是0,0,1,1 */
h1  /* 一个元素选择器，优先级是0,0,0,1 */

したがって、LINE1は赤色になり、LINE2も赤色になります。
なので、もしLINE2を緑色にしたい場合は、以下のように変更する必要があります：

#aaa .bbb h1 {  /* 优先级是0,1,1,1，最高 */
    color: green;
}

3. CSSのポジショニングの問題

positionプロパティの値の意味：

• static: デフォルト値。要素はドキュメントフロー内でHTMLの記述順に次々と配置されます。
• relative: 相対位置指定。要素自身の元の位置を基準とし、top、left、right、bottomで位置を指定します。このとき、要素が占めるスペースは保持されます。
• absolute: 絶対位置指定。位置の基準は、要素の祖先要素の中で最も近い「相対位置指定された」要素となります。このとき、要素自体はスペースを占有しません。
• fixed: 固定位置指定。ブラウザウィンドウを基準とします。このとき、要素自体はスペースを占有しません。

ここでは相対位置指定と絶対位置指定についてのみ議論します：

相対位置指定：ご覧の通り、要素の占めるスペースが保持されるため、利用できない不思議な空白が生じ、またオフセットされることで他の要素を簡単に覆い隠してしまいます。そのため、実際に相対位置指定を使用する際は、ほとんどオフセットを行わず、主にその絶対位置指定された子要素のための位置参照を提供するために使用されます。

絶対位置指定：

ご覧の通り、絶対位置指定をすると、要素自体はスペースを一切占有しなくなります。位置を指定しない場合は元の位置にとどまりますが、スペースを占有しないため下から移動してきた要素を覆い隠すことになります。位置を指定する場合は、最も近い相対位置指定された祖先要素を基準に配置され、そのような要素がない場合はページ要素が基準となります。こうして、絶対位置指定は大きな要素内で小さな要素を配置するための首选方法となりました：

4. フロート（float）

フロートは実はかなり簡単ですが、以下の2点に注意が必要です：

要素にフロートを設定すると、その要素はスペースを占有しなくなります。そのため、1つの要素にだけフロートを設定した場合、下の要素がせり上がってきて、フロートされた要素に覆われてしまいます。したがって、並列するすべての要素にフロートを設定する必要があります。

次に、ある要素内のすべての子要素がフロートされている場合、その要素の中身は空になり、親要素によって囲まれなくなります。そのため、最後にクリアリング要素を追加する必要があります。

.clear {
    clear: both;
}

• 前の記事：Dropboxが無料で20GBにアップグレード
• 次の記事：誕生日@美蘭湖

css, html, web