Posted by poundhound on
番号付きの箇条書きは通常olタグを使ってマークアップしますが、入れ子になった場合とかにカッコ数字の番号や丸数字を利用したくなったことは無いでしょうか？僕の場合は往々にしてあります。
なので今回はol liでマークアップした場合カッコ数字や丸数字を表示させます。
ol liのデフォルトスタイルであるdecimalを非表示にしてカッコ数字や丸数字をli内に記述します。そしてspanタグでくくり、CSSで整形して表示すると言う方法です。
Posted by poundhound on
以前エントリーした記事、画像置換 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; /* 置き換える画像 */
}
Posted by poundhound on
以前エントリーした記事、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を使ってさらに上書きするというハックのダブルがけをしています。
また、個人的にはメイリオはあまり好きではないのですのが、今回も念のためにメイリオをセットに入れています。
Posted by poundhound on
IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値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を指定した要素同士は改行コードの影響を受けて微妙に隙間が出来てしまうのでコメントを挿入して改行コードを埋めています。
Posted by poundhound on
もともとマカーなのであまりWindowsのGUIが好きではありません。特にXPのあの青いタスクバーと緑のスタートボタンがどうにも受け付けません。なのでWindowsはVisual Styleを利用出来るようにする「UXTender」と言うものを入れています。
このUX Tender、結構色々なスキンがあって楽しく、Royal Vista Compactと言う物を使っていますが、このスキンの背景は薄いグレーになっています。このスキンを適用してWebを見てると背景が白であるはずのサイトが薄いグレーになっている場合があります。
background-colorに#fffを指定している場合はきちんと白で表示されるのですが、指定されていないものは薄いグレーで表示されます。
NN4.xが背景グレーでしたが、現在のブラウザの背景色の初期値が白であるためbackground-colorを指定しなければ白で表示されると言うのが常識になってしまっているので改めてbackground-colorを指定する必要がある認識を持った方が良いかもしれませんね。
まあごく稀なケースだとは思いますが。
