AtoZ 時々 鬱な日記

複数のセレクターに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクターをカンマで区切ってグループ化 (Grouping) することができます。
しかし、グループ化したセレクタ群の中に、Web ブラウザーが未対応のセレクターが一つでも含まれている場合、グループ化した別のセレクターも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。
例えば、h2, div>p{ color:red; } のように宣言した場合、h2 要素と divの子要素の p 要素が赤い文字でレンダリングされます。しかし、IE 6 では子要素を表す > に対応していないため、p要素が赤い文字にならないばかりか、グループ化した h2 要素も赤い文字にはなりません。
このようにグループ化したセレクター群の中に未対応のセレクターが含まれている場合、セレクター群全ての宣言を無効化されることを逆手にとった CSS hack です。
div.sample { color:red; } の宣言を Firefox などの Mozilla 系 Web ブラウザーのみを対象とするにはdiv.sample, x:-moz-any-link { color:red; } の様に x:-moz-any-link をグループに加えます。
:-moz-any-link は Mozilla 系 Web ブラウザーに独自実装されている擬似クラスです。Firefox などの Mozilla 系 Web ブラウザーはこの擬似クラスに対応しているので、div.sample, div:-moz-any-link {} のようにグループ化されたセレクタ郡に :-moz-any-link が含まれていてもこの宣言は有効ですが、その他のWebブラウザーは :-moz-any-link には対応していないため、宣言が無効になります。
また、この例を応用し、Firefox のバージョンアップで追加されていった擬似クラスをグループ化に加えることで、そのバージョン専用を対象とした CSS の宣言を書くことができます。

div.sample { background-image:url(img/bg00.png); }
div.sample, x:-moz-any-link { background-image:url(img/bg01.png); /* Fx 1.0 以降に適用される */}
div.sample, x:-moz-read-only { background-image:url(img/bg02.png); /* Fx 1.5, 2.0 以降に適用される */}
div.sample, x:-moz-broken { background-image:url(img/bg03.png); /* Fx 3.0 以降に適用される */}
div.sample, x:-moz-broken, x:last-of-type { background-image:url(img/bg04.png); /* Fx 3.5 以降に適用される */}
div.sample, x:x { background-image:url(img/bg00.png); }

最後に x:x としたセレクターにはデフォルト (この例では div.sample { background-image:url(img/bg00.png); } と同じスタイル) のスタイルを適用します。これは、Safari 2 などの一部の Web ブラウザーがグループ郡に未対応のセレクターが含まれている場合でも無視しないための対策

元ネタFirefox 1.0, 1.5, 3.0, 3.5 用の CSS ハック

個人的にwebサイト2本制作するお仕事をいただきました！
いただいた、というか、やります、やらせてくださいというか。
ありがたいことです。
ひとつはネットショップのデザインとベースコーディング、
もうひとつは、美容室のデザインからcmsの導入まで。
かわいいの創るぞ。

このtalkのページは、
携帯用のページも作成してて、
mixi経由でもそのページが見られるはずなんだけど、
なんだかうまくいってない模様…
なんでしたら、このページに直接アクセスしてみて下さい。
それで携帯用のページが見られるはず…
普通の携帯は持ってないので検証できてないんだけど、
なんか不具合あったら教えて下さい。
どんな風に見えてるか、教えてもらえれば…
スクリーンショットとか送ってもらえたらベストなんだけど…
なんとか対処してみたいと思います。

ie6/7で<hr />を表示させず、高さも0にしたい場合、以下でできる。
hr{
  border:none;
  height:0;
  text-indent:-9999px;
  visibility:hidden;
}
* html body hr{
  margin:-1em 0 0 0;
  display:block;
}
*:first-child+html body hr{
  margin:-1em 0 0 0;
  display:block;
}


jquery.lightbox.jsと(reflection.jsとも)併用可。
jquery.lightbox.jsの解説はここ
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3

ZENphotoの管理画面のレビュー。

ログインしていると、
閲覧画面の右上に「admin toolbox」が出ています。

続きを読む

アルバムのページ、
使ってるシステム？がどうにもこうにも汚いソースを吐いて、
いじくるのがとてもめんどうだったので旧デザインのままだったんですが、
いいシステムを見つけたのでごそっと入れ替えました。
ZENphotoというやつです。

続きを読む

イラレでwebのラフを作るとき、
どうしてもスライスがずれて困っていた、
が、解決策があったので覚書。

続きを読む

仕事でケイタイサイトを構築中。
何故にこうもドメスティックなもんかとイライラする。
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
3キャリア対応携帯サイトXHTMLテンプレート
docomoが一番縛りが多いのでdocomoベースで作ってたら
それはそれで他が立たず…
結局どうすればいいのかよくわからない…。
おまけにphpのCMSなんかが入ってるからもう何がなにやら。
追記：
携帯サイトの作り方

docomoのcssはクセがある…というか使えない。

続きを読む