Category CSS Archive

IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値inline-blockを使ってマルチカラムレイアウトを実装するテストをしてみました。

inline-blockを使ったマルチカラムレイアウトのデモ

通常2段組み、3段組みなどのレイアウトを組む場合、floatプロパティを使って左右にふったりすると思いますが、今回はfloatを使わずに2段組のレイアウトを組んでみます。HTMLのソースコードは以下の通り

<div id="container">
	<div id="header">
		<h1>header</h1>
	</div>
	<div id="primary">
		<div class="section">
			<p>文章</p>
			<p>文章</p>
		</div>
		<div class="section">
			<p>文章</p>
			<p>文章</p>
		</div>
	<!-- // end #primary --></div><!--
	--><div id="secondary">
		<div class="section">
			<p>文章</p>
			<p>文章</p>
		</div>
		<div class="section">
			<p>文章</p>
			<p>文章</p>
		</div>
	<!-- // end #secondary --></div>
	<div id="footer">
		<address>
		Copyright
		</address>
	<!-- // end #footer --></div>
<!-- // end #container --></div>

inline-blockを指定した要素同士は改行コードの影響を受けて微妙に隙間が出来てしまうのでコメントを挿入して改行コードを埋めています。

Read more

もともとマカーなのであまり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;
}

2008.12.15追記
overflow:-moz-scrollbars-vertical;が問題なのではなく、html>/**/bodyの記述が問題だった見たいです。ハックを使わず単純にhtmlにすれば問題ないみたいです。

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よりは気分がすっきりするのは自分だけでしょうか...

2009年7月25日 修正版をエントリーしました。
画像置換 height: 0;バージョン 修正版

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>

自宅では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ではフォントウェイトが太くなってしまうので注意。

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