すっかり業界でも標準となりつつあるYUIですが、デフォルトCSSとして仕組む場合の最初の部分の解説をちょっとだけ。続けるかどうかは未定です。ｗ
最初に、文字の定義をするのですが、これがどういう意味なのかというと、
body {
font-size:13px; /* モダンブラウザ用 */
*font-size:small; /* IE7用 */
*font:x-small; /* IE6用 */
}
一番上の13pxは、FireFoxやOpera、Safariなどのモダンブラウザでの指定で、px絶対値で指定します。「*font-size」の「*」は、IE用のスターハックで、IEのみに有効です。モダンブラウザでは読み込まれません。何故px絶対値ではなく「small」なのかと言いますと、IEにはpx絶対値で指定すると、ユーザ側で文字の大きさを変更できなくなるというバグがあるためです。IE7では「small」が13pxに相当し、IE6では「x-small」が13pxに相当します。
では、2段目と3段目の意味は何か？これは、IE6のバグを巧みに利用した方法で、ショートハンドの「font」は「font-size」と「font-family」両方の指定がされていないと、モダンブラウザでは無視されます。ところが、IE6の過去互換モードでは、どちらか一方の指定でも読み込まれます。
つまり、IE6では、「13px」→「small」→「x-small」と上書きされていくワケです。
次に全称セレクタでその他デフォルト値を設定します。
* {
margin:0;
padding:0;
line-height:1.6;
font-size:100%;
font-weight:normal;
font-style:normal;
}
レンダリングスピードにこだわって、マージンやパディング値は0指定をしないってのが、最近やや盛り上がってきているようですが、どの道指定しなおすなら、ソース量が抑えられた方がいいのではないかという事で、私は0指定を使用していますが、これはお好みで。
line-height値は、ブラウザ間の見え方を統一する上で、かなり重要な設定なので、ここでデフォルト値を設定し、変更が必要な所だけ後から上書きします。
font-sizeですが、ここから先は相対値で指定します。100%はすなわち13px相当で、大きさは下記のように変動します。
77% → 10px
85% → 11px
92% → 12px
100% → 13px
107% → 14px
114% → 15px
122% → 16px
(以下略)
このように指定することで、IEでも文字の大きさを変えることができるようになるわけです。その他のfont関連指定は文字の装飾に関する事なので、お好みで。ただし、normalとboldでは文字の大きさが微妙に変わりますので、その点には注意を。
最初に、文字の定義をするのですが、これがどういう意味なのかというと、
body {
font-size:13px; /* モダンブラウザ用 */
*font-size:small; /* IE7用 */
*font:x-small; /* IE6用 */
}
一番上の13pxは、FireFoxやOpera、Safariなどのモダンブラウザでの指定で、px絶対値で指定します。「*font-size」の「*」は、IE用のスターハックで、IEのみに有効です。モダンブラウザでは読み込まれません。何故px絶対値ではなく「small」なのかと言いますと、IEにはpx絶対値で指定すると、ユーザ側で文字の大きさを変更できなくなるというバグがあるためです。IE7では「small」が13pxに相当し、IE6では「x-small」が13pxに相当します。
では、2段目と3段目の意味は何か？これは、IE6のバグを巧みに利用した方法で、ショートハンドの「font」は「font-size」と「font-family」両方の指定がされていないと、モダンブラウザでは無視されます。ところが、IE6の過去互換モードでは、どちらか一方の指定でも読み込まれます。
つまり、IE6では、「13px」→「small」→「x-small」と上書きされていくワケです。
次に全称セレクタでその他デフォルト値を設定します。
* {
margin:0;
padding:0;
line-height:1.6;
font-size:100%;
font-weight:normal;
font-style:normal;
}
レンダリングスピードにこだわって、マージンやパディング値は0指定をしないってのが、最近やや盛り上がってきているようですが、どの道指定しなおすなら、ソース量が抑えられた方がいいのではないかという事で、私は0指定を使用していますが、これはお好みで。
line-height値は、ブラウザ間の見え方を統一する上で、かなり重要な設定なので、ここでデフォルト値を設定し、変更が必要な所だけ後から上書きします。
font-sizeですが、ここから先は相対値で指定します。100%はすなわち13px相当で、大きさは下記のように変動します。
77% → 10px
85% → 11px
92% → 12px
100% → 13px
107% → 14px
114% → 15px
122% → 16px
(以下略)
このように指定することで、IEでも文字の大きさを変えることができるようになるわけです。その他のfont関連指定は文字の装飾に関する事なので、お好みで。ただし、normalとboldでは文字の大きさが微妙に変わりますので、その点には注意を。