とりあえず作ったけどまだ自分用メモ状態。 こっそりたまに更新しとく予定。大体上のほうが新しいです。
結論を言うとIE4,NN4,MacIE5は適応しない。IE5.xは専用CSSで調整。 残りは普通に適応して、必要に応じてIE6用ハックを使っている。
まずはlink要素で例えば<link rel="stylesheet" type="text/css" href="style1.css" media="screen,print,tv">の様にする。mediaの所を"screen"以外にするとNN4は除外できます。
次に、さっき読み込んだstyle1.cssで@importを使って更に読み込む。(つまりstyle1.cssは読み込み専用になる。)この時、@import "style2.css"の様にするとIE4が除外できる。 省略せずに@import url("style2.css")と書けばIE4でも適応される。
次はMacIE5を除外する。
/* \*/
@import "/style2.css";
/* */
と言う風に@importの所を囲めばOK。
@media tty {
i{content:"\";/*" "*/}} @import 'win-ie5x.css'; /*";}
}/* */
これはWinIE5.x用のCSSハック。こうやるとWinIE5.xだけに読み込ませることが出来る。IE5は、CSSがキャッシュに入ると@media printだろうがなんだろうが適応するようなのでそれの対策を主にやる。
最後はIE6用。これはスターハックという奴を使う。例えば
* html p { color: red; }と言う風にするとIE6以下だけ適応される。
これを必要なとき使う。
携帯・印刷はそれぞれ別に用意する。
こんなもん。まだまだ試行錯誤中。
両方とも大藤幹さんの本。某所で評判が良かったので両方買ってみました。
感想は、買って損はないと思う。両方とも実際のソースや問題点を出しながら、 丁寧に解説がついています。 特にベストプラクティスの方は実際のプロのWEBデザイナーのブログの解説になっていて、 とても参考になります。しかも、どちらも最近出た本なので、 IE7についてもちゃんと書かれています。 各種テクニックもどのブラウザに対応・未対応がちゃんと書かれているのもすごい。
しかし、基本的なHTMLやCSSの知識は有る事が前提の本なので、 初心者の人はまず初心者向けの本を読んでから手を出した方がいいです。
まあまあ新しいブラウザなら使えます。IE6は駄目。JavaScript使えば対応可。
<div>あいうえお <ul> <li>メニュー1</li> <li>メニュー2</li> </ul> </div>
ul { display: none; }
div:hover > ul { display: block; }
例えばこんな感じにする。サンプル
理屈としては、まずulをdisplay:none;で消し去る。 で、div:hover > ulと書くと、divにマウスカーソルを合わせている時(div:hover)のdivのすぐ下のulが現れる(display:block;)。重要なのは:hover。 IE6はa以外の:hoverに対応してないので使えません。
このままだとメニューの下が動いて気持ち悪いから、position:absolute;を「div:hover > ul」に加えるか、displayの代わりにvisibilityを使います。
表示確認をしてるのは主にfirefox3,IE Tab。時々IE8,IE7,Opera9,safari3。 極たまにOpera(Wii)。 俺の環境だとこれくらいしか確認できません。Netscapeは良く分からない。どこかでDLできる？ Mac系は存在すら見たこと無いのでこれは諦め。
確認しているのは↑のみだが、IE4,NN4,MacIE5はCSS適応させない筈なので多分(デザイン以外)問題ないと思います。これで問題あるなら死ねとしか言いようが無い。 古いバージョンについては確認出来ない(インストールしてない)ので分かりませんが。 どこかでインストールできるんでしょうか。 IE5,IE5.5は全く考えてないので知りません。
IE7の割合がIE6を超えたのでもうIE6は妥協し始めてます。 IE6は見れればいいくらいの気持ちで。
携帯は俺の携帯W41CAのみ確認。多少質素な感じだけど良い感じになってます。 他の携帯は知らん。
所でPS3のブラウザは何なんだろう。あれは大丈夫なのかな。
検索で今どのくらい上に来るか調べてみた。
今日、色々SEO的に試してみたので記録。
Googleだとかなり上位に入ってますが、Yahooは少し厳しい感じ。 どうしたらYahooの順位上がるかなあ。
一時期Yahooでは「ぷよぷよ」でヒットしなかったのでどうしようかと思いましたが、 復活しました。他は大体上がってる感じ。 「ぷよぷよ 攻略」で検索する人がかなり多いみたいなので加えてみた。 後MSN試してみたけど全然ヒットしない。
Yahooはぷよ講座まだ拾ってないんですかね。理想はぷよぷよ講座のページが「ぷよぷよ」の検索で1位だがこれは公式サイトとかIPSとか有るし無理か。最近作ったばかりだから仕方ないけどぷよぷよ講座はGoogleで順位低すぎるな。サイト名では1位ゲット。しかしGoogleではトップページが2位か…
微妙に@media printで使用してみる。印刷する奴なんていねーよｗなんて突っ込みは禁止。ADP: 印刷用CSSの書き方（基本編）によると
Mac IE5は@media print{}の中身をすべて無視するし、WindowsのIE5は@media print{}の中身をscreenメディアにも適用してしまう。
ということらしいので、そのうち気が向いたらprint用cssを用意しよう。
これ疑問に思ってたんです。段落の中にblockquoteとかulとか入れたい、 と思ったことが何回かあったけど、pの中にはブロック要素は入れられない。 結局文章をうまく変えてごまかしたけど。
なるほど！p=段落、じゃないわけか。そう考えると問題なくなる。
まとめ：p要素の中にobject要素を介してブロック要素を含めることに関する議論
メディア指定使ってみたのでメモ。ググったりすれば分かることも多いけど、 一応自分で実験したので。他のもインストールして試してみようかなあ。
結論：IEダメダメじゃん・・・。@importは止めておいた方がよさげ。
CSSのメディア指定というのを使うと、閲覧者が使用している物に合わせて、 使用するスタイルシートを変えることが出来ます。 つまり、パソコンからと携帯からでサイトの見た目を変える事が出来たりするわけです。
書き方例；@import "/style.css" screen;
書き方例；<link rel="stylesheet" type="text/css" href="/style.css" media="screen">
書き方例；@media screen {(colorとか色々)}