【広告】Amazonから最大10%ポイントアップ新生活応援セール29日開催

H:Home > Read Me First > Profile > Diary
i-mode / J-SKY / EZweb(の一部) 対応の簡易版
検索文字列:

脱 三日坊主 宣言!

このサイトの管理人、表具師かっぱの日記です。
(新規投稿は出来ませんが、ツッコミは入れられます)

別冊 表具師かっぱの「脱 三日坊主 宣言!」もちまちま更新中

※ 当日記はレイアウトに CSS2 を使用しています ※
(CSS2 未対応のブラウザでも閲覧・投稿は可能です)
なお、IE3NN4CSS への対応が不完全ですので、設定にかかわらず適用されないようにしています。ご了承下さい。

ホームページへ戻る


こちらの記事へツッコミを入れる場合は下のフォームに書いて下さい。
内容が異なる場合はブラウザのバックボタンで戻って下さい。


2003-02-20 の出来事

NN4 すっぴんの刑から MacIE5 を救出

皆さん御存知の通り、NN4CSS への対応が不完全で、IE と同じような表示にしようとすると、ブロック要素を <div> で二重に囲むなど、HTML にかなりの小細工をしなくてはならず、いわゆる DIV 病になってしまいます。(この際、IE もバグだらけというのは無視して下さい)

そこで、この日記と掲示板では head 要素内の link 要素に screen 以外の media 属性を付けることで、すっぴんの刑 に処しています。

ところが、外部スタイルシートだけでなく、そのページにだけ有効なスタイルを head 要素内に style 要素としてそのまま書き込むと、そのスタイルだけが有効になってしまいます。そこで、「@media 規則を理解できない」というバグを使って、全ての規則集合を @media all {} で囲めば、NN4 を「すっぴんの刑」に処する事が可能です。(メディアタイプは all でなくても構いません)

しかし、@media 規則の利用には大きな落とし穴があって、MacIE5 も弾いてしまいます。そこで、MacIE5 を救出する為にもう一工夫必要になるのです。

その工夫というのが、MacIE5 の「スタイルシート内でバックスラッシュ ( ¥ ) の直後にある文字が無視される」というバグを使います。バグを回避するために別のバグを使うなんて、「毒をもって毒を制す」って感じでしょ。パズルみたいで楽しくないですか? 以下のサンプルを使って、その手順を説明しますね。

/* NN4 を「すっぴんの刑」に処す! */
@media screen,tv {
  .bbs2ResForm {
    font-family: "MS ゴシック", osaka-等幅, sans-serif;
  }
}

まず、NN4 回避のための記述部分の最初の @media screen, tv {/* ¥*/@media screen, tv {/* */ に変更して下さい。

通常、スタイルシート内の /**/ はコメントとして扱われますから、その中の ¥ はエスケープ記号ではなく普通の文字として扱われます。しかし、MacIE5 は、それをエスケープとして扱ってしまいます。(これがバグです) 従って、NN4 では前後のコメントが正しく認識され、@media screen,tv { が有効になりますが、MacIE5 では、¥ の次の * がエスケープされ、*/ が無効になりますから、次の */ が出てくる行末までがコメントとなり、@media screen,tv { は無効になります。

同様に、一番最後の行の }/* ¥*/}/* */ に変更して下さい。これは上記の記述と整合性を持たせる為です。

この変更により、NN4 を含む通常のブラウザでは、@media screen,tv {} に規則集合が入っていることになり、@media 規則を理解できない NN4 ではスタイルが適用されなくなりますし、MacIE5 では、規則集合が @media screen,tv {} 内に書かれていない事になるので、スタイルが適用されます。

まとめると以下のようになります。

/* NN4 のみを「すっぴんの刑」に処す! */
/* ¥*/@media screen, tv {/* */
  .bbs2ResForm {
    font-family: "MS ゴシック", osaka-等幅, sans-serif;
  }
/* ¥*/}/* */

なお、コメント部分を /*\*//**/ と書くと、一部のブラウザで正しくコメントと認識されないかもしれません。ですから、なるべく /* \*//* */ のように書いて下さい。

以上です。判りやすい解説かどうかは自信が有りませんが、宜しければ参考にどうぞ。

追記(2003/02/26)

上記の方法は、NN4 に対してスタイルの一部分だけを無効にしたい場合に MacIE5 を巻き添えにしない為の方法ですが、head 要素内の style 要素全体を無効にしたい場合はもっと単純な方法があります。

style 要素に screen 以外の media 属性を付ければ NN4 は読み込みません。つまり、<style type="text/css"><style type="text/css" media="all"> にするだけで NN4 のみ適用を除外できます。(この方法でも MacIE5 は巻き添えにならないはずです)

これは、サーバーの都合でバックスラッシュ ( ¥ ) が使えない場合にもおそらく有効で、スタイルの一部分だけを無効にしたい場合には、その部分だけ取り出して、新たに <style type="text/css" media="all"> で指定しなおせば大丈夫なはずです。

MacIE5 も巻き添えを食らうようでしたらお知らせ下さい。

MacIE をお使いの方へ

上記の記事で blockquote 要素内の整形の為、行頭のインデントに、改行禁止スペース ( &nbsp; ) を使っています。表示上は問題なくても、そのままコピー&ペーストすると、上手く半角スペースに変換されず、文字化けになるかもしれません。

御注意下さい。(u_u)

2003-02-20 の出来事にツッコミを入れる


本日のツッコミ





ツッコミ投稿フォーム


Number
Pass

ThinkPadを買おう!
レンタカーの回送ドライバー
【広告】Amazonから最大10%ポイントアップ新生活応援セール29日開催
無料で掲示板を作ろう   情報の外部送信について
このページを通報する 管理人へ連絡
SYSTEM BY せっかく掲示板