ネタもとはここらへんです。CSS Browser Support

Read more

番号付きの箇条書きは通常olタグを使ってマークアップしますが、入れ子になった場合とかにカッコ数字の番号や丸数字を利用したくなったことは無いでしょうか？僕の場合は往々にしてあります。

なので今回はol liでマークアップした場合カッコ数字や丸数字を表示させます。

ol liのデフォルトスタイルであるdecimalを非表示にしてカッコ数字や丸数字をli内に記述します。そしてspanタグでくくり、CSSで整形して表示すると言う方法です。

View Demo

Read more

以前エントリーした記事、画像置換 height: 0; バージョンで少々不具合があったので修正版をエントリーしておきます。

何が不具合だったかと言うと、a要素にheight: 0、overflow: hiddenを指定していても一部のブラウザでテキストが見えてしまう時がありました。この問題はa要素に指定していたoverflowプロパティを親要素であるliに指定し、置き換える画像の高さを指定することにより回避出来ます。

XHTML

<ul id="globalNav>
<li id="nav1"><a href="#">Nav1</a></li>
<li id="nav2"><a href="#">Nav2</a></li>
<li id="nav3"><a href="#">Nav3</a></li>
<li id="nav4"><a href="#">Nav4</a></li>
</ul>

CSS

ul#globalNav li {
	display: inline;
	float: left;
	height: 35px; /* 置き換える画像の高さ */
	overflow: hidden;
}
li#nav1 a {
	display: block;
	width: 50px; /* 置き換える画像の幅 */
	height: 0;
	padding-top: 35px; /* 置き換える画像の高さ */
	background: url(../img/bg_xxx.gif) no-repeat 0 0; /* 置き換える画像 */
	
}

以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。

IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の大きさを変更することが出来ません（ページズームを使えと言う感じではありますが）。

以前のセットではhtml>bodyハックでモダンブラウザ(Safari/Firefox)用にフォントをピクセルで指定していたのですが、IE8ではこのハックが有効になってしまい、ピクセル指定したCSSが適用されてしまいます。

今回はIE8をのぞいたモダンブラウザに適応させるhtml:not(:target) bodyを使ってさらに上書きするというハックのダブルがけをしています。

また、個人的にはメイリオはあまり好きではないのですのが、今回も念のためにメイリオをセットに入れています。

Read more

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

View Demo

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

HTML Code

<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