自宅ではMacを使ってますが、職場はWindows環境なので普段はWindows Firefoxをメインに使ってます。

最近メイリオを指定しているサイトがぼちぼちと。ところがFirefoxやIE6なんかで見てるとアンチの切れたメイリオが表示されて非常に読みづらいのです。VistaのFirefoxはどうだかわからないけれども、XPでメイリオがインストールされていてFirefoxやIE6環境ではとても見てられない。

てな訳で一つの案としてこんなフォントの指定を考えてみました。

body { font-family: "ＭＳ Ｐゴシック", sans-serif; }
*:first-child+html body {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}
html>body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
}

まずはWin IE6へMS Pゴシを指定。続いてWin IE7のみにメイリオを適用させる。メイリオがない環境へはMS Pゴシ。で最後にWin FF、Mac Safari/FFにヒラギノを適用。この際、Hiragino Kaku Gothic Pro W3まで記述してしまうとSafari3ではフォントウェイトが太くなってしまうので注意。

とりあえずこんなセットはいかがでしょうか？ってなことでエントリーしておきました。

ネガティブマージンに関する記事を検索していたらたまたまこのような記事に出会いました。

class名に「表示に関する指示を組み込む」ことについて

要するに『class名に視覚的な内容を示すのはセマンティックに反するので、その要素が意味することが伝えられる名前にしなさい。』とのこと。

clearfixはとても便利で汎用的なclassとして用意して使うケースがほとんどのはず。中にはこんな感じで単独で記入する場合もあります。

div#wrapper:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

div#wrapper {display: inline-table;}

/* Hides from IE-mac \*/
* html div#wrapper {height: 1%;}
div#wrapper {display: block;}
/* End hide from IE-mac */

ただこの場合、同じ記述が何度も出てくるので僕の場合、滅多に使う事が無い気がします。

僕の場合Movable Typeを使うようになってから、clearfixと言うclass名ではなくpkgと言うclass名で使ってます。なぜかと言うとMovable Typeのデフォルトcssにこの名前で記述されてたからです（笑）

pkgってのはおそらくはpackageの略だろうと勝手に思って使っています。そのグループをパッケージ＝ひとまとめにすると言う意味で考えると、clearfixと言う名前よりはセマンティックに配慮されている気がします。

じゃあそのままpackageってclass名にすれば良いじゃないか？となるんですが、Dreamweaverを使ってる立場から複数のclass名を入力する際に、汎用性のあるclassは短い名前の方が便利なんですよね。

実際はやはり汎用性のあるclassを用意する場合、視覚的な内容を名前に付けてしまったりするのですがね。出来る限り使わないようにはしていますが...

定義リストであるdt ddを横並びにさせたい場合、僕はfloatを使うケースが多いのですが、Windows IE6では最初のddが約0.2emほどマージンを多く取るバグがあります。Windows IE7/Firefox/Opera、Macintosh Safari/Firefox/Operaではきちんと表示されます。

IE6では隣接セレクタに対応してないので、最初のddに適用させるクラスを記述してスターハックを適用させています。本当はあんまりハック使いたくないんですけどね。

dt   { margin-bottom: 0.25em; width: 6em; float: left; }
dd   { margin-bottom: 0.25em; margin-left: 6.5em; }
* html body dd.first   { margin-left: 6.3em; } /* for win ie6 */

CSS HappyLifeさんの所に面白いエントリー記事が載ってた。

パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種

>を画像にする事で、altに「の中の」を入れ、音声ブラウザなどで『ホームの中のサービスラインナップの中のウェブサイト制作』と読ませるそうな。

単純にPタグでマークアップしてあるだけなんだけど、>画像のaltを「の中の」と読ませるところあたりが目からウロコ。アクセシビリティを考えるとこれは良いかも。

いろんな方法があるんですねぇ...それにしてもIE7が:after/:before要素とcontentプロパティを実装しなかったのは悔やまれるなぁ。

WinのIEはfloatを指定したボックスにmarginの値が指定してあると倍のmargin値として認識するダブルマージンバグが発症するケースが多々ある。（例えばmargin-left: 10px;なんて指定してるのに20pxのmarginになったりする。）

floatさせたボックスにmarginを指定しないようにすれば良いかもしれないけど、そんな事をやってると無駄にdivが増えてしまったりするんで、手っ取り早い解決法はそのボックスのプロパティにdisplay: inline;を与えると正常なmargin値で表示してくれる。

ただブロックレベル要素のものがインライン要素になる訳なので、Dreamweaver8上でもインライン要素でレンダリングされてしまい、marginがどのくらいかビジュアルで表示されなくなるのが残念。

div#sidebar {
	float: left;
	width: 20%;
	margin-left: 3%;
	display: inline;
}