本日プリント用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タグの左マージンで位置は調整します。

定義リストの横並びで苦戦したので再びエントリーしておきます。以前のエントリーは1つのdtに対して複数のddを記述すると最初のddがずれると言うものでしたが、ddが折り返された時はずれたままでしたが、今回は折り返されてもずれないようにCSSを調整して行きます。

まず次のような(X)HTMLがあります。

<dl>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dd class="test">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>

この(X)HTMLを次のようなCSSで整形します。

dt {
	width: 7em;
	float: left;
	clear: left;
	line-height: 1.3;
}
dd {
	margin-bottom: 0.3em;
	margin-left: 7em;
	line-height: 1.3;
}
dd p { margin-bottom: 0.3em; }

するとWindows IE6では左のようにdtの直後に出現するddの先頭の文字が右に0.3emほどずれて表示されてしまいます。

これを回避するにはIE6用にheight: 1%;を適用させると頭文字がそろいます。IE6だけに適用させるため* htmlハックでCSSを記述します。

* html dd { height: 1%; }

さてとりあえずそろいましたが、height: 1%;の記述は右に0.3emほどずれたものに合わせることになるので、1つのdtに複数のddを記述した場合、2番目以降のddは正しいddの位置に表示されるので、当然のようにずれてしまいます。

結局これを回避するためには2番目以降のddに同じく* htmlハックで右に0.3emほどマージンを多くとる事になってしまいます。

正確なマークアップの意味合いから外れてしまうかもしれませんが、1つのdtに対してddを1つにし、dd内にpタグを含めてマークアップすると、クラスを作らなくても右に0.3em分ずれて表示してくれるので、とりあえず見た目の確保は出来ます。

<dl>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>