もともとマカーなのであまりWindowsのGUIが好きではありません。特にXPのあの青いタスクバーと緑のスタートボタンがどうにも受け付けません。なのでWindowsはVisual Styleを利用出来るようにする「UXTender」と言うものを入れています。

このUX Tender、結構色々なスキンがあって楽しく、Royal Vista Compactと言う物を使っていますが、このスキンの背景は薄いグレーになっています。このスキンを適用してWebを見てると背景が白であるはずのサイトが薄いグレーになっている場合があります。

background-colorに#fffを指定している場合はきちんと白で表示されるのですが、指定されていないものは薄いグレーで表示されます。

NN4.xが背景グレーでしたが、現在のブラウザの背景色の初期値が白であるためbackground-colorを指定しなければ白で表示されると言うのが常識になってしまっているので改めてbackground-colorを指定する必要がある認識を持った方が良いかもしれませんね。

まあごく稀なケースだとは思いますが。

本日プリント用CSSをゴリゴリと書いていましたが、その時2つほど問題になった点があったのでメモ代わりに書いておきます。

まず一つはナビゲーションやバナーが表示されているサイドバー（div#secondary）をdisplay: noneで消しました。このサイドバーはdiv#secondaryで定義してあり、中にdiv.localNavが定義されています。その下にバナー群がpタグで定義されていますが、Firefoxのプリントプレビューではきちんとサイドバーが消えてくれるのですが、IE6では何故かバナー群が消えてくれません。なのでdiv#secondaryの子要素を消すためにユニバーサルセレクタを使いました。

div#secondary * { display: none; }

こいつでIE6でもサイドバーが非表示になってくれました。

次に問題になったのがdivごとに改ページされてしまったのです。メインコンテンツ部はdiv.sectionで各ブロックを定義してあり、簡易clearfixとしてoverflow: hiddenを記述していたのですが、こいつが悪さをしていた模様です。なのでoverflow: visibleで上書きしました。

div.section { overflow: visible; }

これで印刷用CSSで奇麗に印刷出来るようになりました

今までFirefoxでコンテンツが少ない場合にもスクロールバーを出すのには以下のように記述していました。

html>/**/body { overflow:-moz-scrollbars-vertical; }

ある日の事、ページを印刷しようとして印刷プレビューを表示しても1ページしか表示されません。これはhtml,bodyにあてるCSSの記述に問題があるのでは？とhtml,body廻りのCSSの記述をチェックしたらこの記述が犯人と分かりました。この記述を削除したら全ページ印刷プレビューが出ました。

どうやらこのプロパティ、記述すると横スクロールが出なくなったりする問題もあるみたいですね。なので素直にhtmlに100%とmargin-bottomを1px指定する方法に切り替えます。

html {
    height: 100%;
    margin-bottom: 1px;
}

Roll OverのJava Scriptライブラリが普及してる今、画像置換(Image  Replacement)を使用するケースは減っているのでしょうか？JSによるRoll Overはお手軽だけど、グローバルナビの配下に属するローカルページを表示している間もグローバルナビの状態をカレントにしておきたい場合などがありますよね。

JSによるRoll Overを利用する場合にそれを実現する場合、yuga.js0.6.0を使用するかグローバルナビの項目の数だけカレント状態になったコードを用意することになるかと思います。でもやはりグローバルナビなんかはDreamweaverユーザーならライブラリとかで1つのソースコードで管理したくなりませんか？

なのでやっぱり画像置換を...と思ってしまう訳です。でもtext-indent: -9999px;とかなんかやだなってな場合、もう一つheight: 0;で画像置換する方法があります。

例えば1つのナビゲーションボタンが横130px、高さ30pxの場合は次のようなコードになります。

#glovalNav li#home a {
     padding-top: 30px
     width: 130px;
     height: 0;
     overflow: hidden;
     display: block;
     background: url(hoge.gif) no-repeat 0 0;
}
#glovalNav li#home a:hover { background: url(hoge.gif) no-repeat -30px 0; }
#glovalNav li#home a.current { background: url(hoge.gif) no-repeat -60px 0; } 

高さを0pxにして画像の高さ分をpadding-topで指定してあげます。Appleのサイトなんかはこの方法の画像置換を使ってますね。

何となくtext-indent: -9999pxよりは気分がすっきりするのは自分だけでしょうか...

iTunesの曲名が表示されるウィンドウライクなデザインをdivとp、spanタグでマークアップしてデザインしてみました。(X)HTMLコードは以下のようなシンプルなものです。

<div id="window">
<p><span>You Never Give Me Your Money / The Beatles</span></p>
</div>

CSS側はこんな感じです。

div#window {
	height: 46px;
	background: url(../img/bg01) repeat-x left top;
}
div#window p {
	margin-top: 5px;
	margin-left: 300px;
	background: url(../img/left.gif) no-repeat;
	line-height: 36px;
	float: left;
	display: inline; /* for win ie6 bugfix */
}
div#window p span {
	margin-left: 12px;
	padding-right: 12px;
	background: url(../img/right.gif) no-repeat right top;
	line-height: 36px;
	float: left;
}

仕組みはpタグには左のウィンドウ画像、spanタグに右のウィンドウ画像を背景に表示させています。pとspanのline-heightにウィンドウ画像の高さを指定して上下のセンタリングをします。pにfloat:leftを指定し、spanにもfloat:leftを指定しspanでくるんだ文字をpに追従させる形にします。さらにspanに左のウィンドウ画像分の幅をpadding-rightに指定します。

floatを使ってるためセンタリングが出来ないのでpタグの左マージンで位置は調整します。

Download