IE5X対策の「w\idth」など、「\」を使う方法。WinIE5x対策で「w\idth」も参照。IE6配置ずれバグ対策ほかMovableTypeのCSSを研究シリーズ、第1弾(って、「第2弾」があるかどうかわからんが)。人に読ませるためというより、個人的メモの色彩が強いのであしからず。MobavleType3.2のデフォルトCSSは、トリッキーなCSSも積極的に利用したかなり考えられたものになっているっぽいので、ちょっと研究してみようと思った次第。デフォルトCSS研究ページも新設した。「.pkg」部分をメモ。パーマリンク2005年9月24日Frefoxで、時々a:hover時に変な線が出るバグ「Frefoxで、時々a:hover時(アンカーをマウスオーバー時)に変な線が出るバグ」があるわけだが、これの対処方法がよくわからん。対処方法以前に、出現条件などもよくわからんのだが、たまたま1度うまくいったバグ回避方法方法をメモしておく。(6)2005年8月27日MacIE5で、背景画像が消えるあんまりブログの更新をおろそかにしていると、死亡説が流れるので(?)、更新しておきますか。久しぶりに仕事でCSSレイアウトしたんですが、かなり体がなまってた。基本的なCSSの書き方とかバグとかもうっかり忘れていて、ブラウザでプレビューして「しまった、これはIE5.5で駄目だったんだ」とか思い出す始末。おかげで想定よりかなり作業時間オーバーしてしまった。そんな作業時間を取らせてしまったバグのひとつ、「MacIE5で、背景画像が消える」をメモ。(2)2005年6月14日RSSについての参考文献RSSについて、個人的に調べたものの備忘録。本当は自分の言葉でまとめたいんだが、その気力が無い。検索して斜め読みして、とりあえずリンクだけ。必要なら、あとでじっくり読む。RSSの要約配信はさらに加速する基本的な仕様など。RSSは1.0も2.0もそんなに難しい規格ではないが、迷うことがあったらここ参照。RSSなるほど、いわれてみれば気づきそうで気づかなかった。RSSと固定リンクは一対なものだな。これはブログのハナシだが、RSS配信するどのサイトにもいえるだろう。記事作成時に追加できるhtmlタグを増やすすまん、これは完全に私的な業務メモだ。(canFormat)」の項に追加すればよい。パーマリンク2005年4月29日そろそろIEをはじくCSSも整理しておきますかCSSレイアウトで一番悩まされるのがIE5xとIE6で表示が違う点だろうが、じゃあIE5xを無視して考えて、IE6だけに絞れば大丈夫なのか、というとそうでもない。IE6は6で、Firefoxなど他のブラウザが当たり前に実装しているスタイルに対応していなかったり、IE6になっても修正されていないバグもある。いうわけで、そんな時に対処療法的に使えるスタイルをメモ。基本的にはValidなCSSで、IEが対応していない、結果的にブラウザを振り分けて指示ができる、というものを2例ばかり。悪いのはCSSでもテーブルレイアウトでもなく結局見積するのも、デザインするのも、進捗管理をするのも、サイトを更新するのも「人」ですから。CSSによるデザインはそんなにコストがかかるのか?以下、引用ばかりになるが、つい先日「半CSS半テーブル」でやっつけ仕事にしてしまった私にとっても、ちと頭の痛い話だ。5日CSSを薦める人はショッカー扱いですか?おいおい、「Webデザイナー」の皆様は、ホントにみんなこんな事思っているのですか?CSSレイアウトの利点と需要デザイナーにとってCSS習得は簡単なものです。お客様側にしても、全面CSSにしてしまうと、更新・メンテナンスが非常に困難になります。制作者側にしても、体制をじっくり整えない限り、チーム間制作の工数も引継ぎも、そしてそれに伴う制作料金(お見積)も増すばかり。ブラウザ対応が相当痛いのが困る。「デザイナーにとってCSS習得は簡単なもの」と言い切ってしまう点で、四苦八苦してる私は頭があがらないわけですが、とりあえずこの件はスルー、問題は次。幅を指定したら余白は0にたまたま訪れたサイトで、自分のサイトが紹介されているというのも、なんか不思議な感じだ。Typeをカスタマイズする時に参考にして、ブックマークしていたものの、その後カスタマイズはほとんど行わなかったので、ウォッチしていなかった。5日トップページのみデザイン変更テスト中トップページをプチリニューアルしてみた。ほとんどHTML自体は変えてない、少しidやclassを足し引きしただけ。HTML部分はほっといてCSSだけいじればいいから、こういうときいいよな。Typeの独自タグにも慣れてきたし、そろそろもう一度レイアウトしなおしてみようと思ったわけですが。その新レイアウト案を考える際、背景色とテキストの色って、みんなどうしてるのかなぁ、って思って、ひととおり好きなサイトをぐるっと回ってみた。基本は背景白が多いが、たとえば隊長のとことか、R30氏のとことか、ほとんど文だけのサイトで、しかも濃い色の背景に薄いテキストなわけだが、こっちの組み合わせの方が断然目が疲れないんだな、これが。(1)2005年1月16日CSSをMacIe5xにのみか、以外かMacIe5系は、CSSを一応サポートしているが、挙動が他のブラウザとも、WinのIE5・6系とも違うことが多々ある。いうわけで、そんなときは、通常のCSSを先に記述し、あとからMacIE5xのみ読み込む形式のCSSを上書きするか、あるいはMacIE5xでバグのあるCSSはMacIE5xに読み込ませない形で回避させるか、だいたいどちらかになると思われる。(226)2004年11月13日NN4xのみを個別にはじくCSSええ、このサイトは確かにHTMLとCSSを解説するサイトでしたよ。タイトル「HTMLとCSSを使いこなす」のHTMLはいつのまにか「ゴッゴル」になってしまい、CSSの記事も、気が付けば8月1日より更新なし。すみません、私もいろいろやりたいことが他にあったもので。本題の件「NN4xのみを個別にはじくCSS」についてメモ。Filterなどと呼ばれている。*/これを利用すると、WinIE5xだけに'winIe5.css'を当てはめることができる。ttyのttyは、文字幅が固定の機器のみ適用、という意味。ちなみにこのメディアタイプに対応した機器は今のところないらしい。contentプロパティは要素の直前や直後に任意の文字列や画像を挿入できるもので、擬似要素after・beforeなどとともに使う。}などとすれば、iの度に自動的に「【引用】」と表示されるらしい、ただしNN6以上・opera6以上だけしか対応していない。(私自身も試していない、HTML辞典からの引用)どっちにしろ、ttyメディアに対応した機器がない現状では、すべてのブラウザでまったく無意味な指定。Filterとよばれている。下記のようにすると、WinIE6、Opera、NN6以上、MacIE5x、safaliなど上位ブラウザにはstyle.cssが適用されるが、IE5x以下やNN4x以下など過去のブラウザにはCSSは適用されない。"null?\"\}";のようにし、まずwinIe5.cssでIE5x対策のCSSを書き、後からIE6など新しいブラウザ用の正しい"style.css"に書き換える、ということになるだろう。リンク集CSSに関連する有益なサイトのリンク集を作っておこうとふと思った。Explorerを利用すれば、IE5-6だけ別のCSSを読み込ませることが可能。url("winIe5.css");</style><![endif]-->上記の場合、IE6以下、つまりIE5xにはwinIe5.cssが適用されることとなる。Explorerは、WinIE4.x以下には実装されていない。if内のコメントの違いによるバージョンの振り分けは以下のとおり。(1)NN4x、IE4x以下のブラウザにCSSを読み込ませないようにするバージョン4世代(IE4x、NN4x)のブラウザは、CSSの実装が中途半端だったり、バグが多い。これらのブラウザにはCSSを読み込まないようにする必要がある。@importや、外部スタイルシートリンク時のmedia指定を利用すれば、比較的簡単にそれが可能。mediaの指定にscreen以外、つまりallを指定すれば、NN4x以下のブラウザは読み込まれない。media="all"なども有効。ように、複数の指定を行ってもはじくことができる。なく、「url」をとる。これを使うと、IE4xとNN4x、ともにstyles.cssは読み込まれない。これを指定すると、ブラウザがフリーズする致命的なバグが確認されている。IE6以上の標準モードと、IE5x以下では、ボックスの幅の解釈や、文字スタイルの継承方法が異なるため、厳密にCSSを利用するときには、IE6・NN6以上・Opera・MacIE5.2など上位標準CSSと、WinIE5x以下用のCSSを分けて用意するのが理想的。IE5xの違いの中でももっとも致命的なものは、ボックスの幅の解釈の違い。その違いを個別に裏技で回避する。IE5以下専用の指定。460とは、正常な値400pxに、WinIE5の誤った解釈20×2+10×2の計60pxを足したもの。バックスラッシュエスケープ「\」のがハック。"}";のような意味、つまり音声ブラウザ読み上げ時の声の種類が「}」だと指定する。その後voice-family:inherit;(inherit=”前の値を継承する”)と上書きして、正常にもどす。最後にwidth:400px;と正しい幅を上書き指定する。"\"}の部分で「.haba」のクラス指定を「}」終えてしまうため、その後のvoice-family:inherit;、width:400px;は読み込まれない。7日CSSバグリストhttp://cssbug.at.infoseek.co.jp/index.html2ちゃんねるの力はすごいなあ、あらためて思った。上記サイトに、文が左右にずれるバグ(WinIE5.5-6)も既出。回避方法まで例示してあった。