何かと役立つCSSの技

いまや(x)html+CSSでのサイト構築が常識です。
しかし、思ったようにいかず壁にぶち当たるときもあります。
そんなときに役立つCSSの技を集めてみました。
※随時追加予定です。とりあえず思いついたものをアップ。
最終更新履歴：2007.10.13
・CSSでロールオーバーした画像がIEでちらつく

letter-spacingを使用したらbrタグを2回入れないと改行されなくなった

CSSに以下のソースを追加 


br{
   letter-spacing:normal;
}

なぜかimgタグで指定した画像の下にわずかな隙間（空白）が・・・

CSSに以下のソースを追加 


img{
   vertical-align:bottom;
}

※詳しい解説はこちらのコラムにて

なぜかformタグの上に隙間（空白）が・・・（2007.6.23追記）

CSSに以下のソースを追加 


form{
   margin:0;
}

floatを使用して2段カラムにしたら、囲んでいる要素の背景が表示されない

froatを指定したボックスは親ボックスからはみ出してしまいます（というのか、親要素はfloatした子要素を囲まないというのか・・・）。
仕様なのかバグなのかわかりませんが、そのような場合には、clearfixハックというのを使います。
floeatを指定した親要素に「clearfix」クラスを指定。
例えば、HTMLを以下のように書きます。


<html>
<head><title>～</title></head>
<body>
<div id="wrapper" class="clearfix">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

CSSに以下のソースを追加 


/* モダンブラウザ（Firefox Opera Safari）対策 */
.clearfix:after{
   content:".";
   display:block;
   height:0px;
   clear:both;
   visibility:hidden;
}

/* Win版IE7とMac版IE5対策 */
.clearfix{
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html .clearfix{
   height:1px;
}

.clearfix{
   display:block;
}
/* End hide from IE-mac */

「/* Hides from IE-mac \*/」という部分がバックスラッシュハックによってMac版IEのみ適用されません。また、ホーリーハック（holy hack）とも呼ばれます。
その下の「* html」はスターハック（star html hack）と言い、WinおよびMac版IE6以前のみで適用されます。
つまりこの部分はWin版IEのみ適用されるということです。IEでは、外側のボックスに1pxでも高さを指定すると、ボックスを拡張するバグ(仕様?)があります。

何がなんだかわかりませんね（笑）考えた人がすごい！
とりあえず、このようにクラスにしておくと、拡張したいボックスに指定するだけなので便利です。

Firefoxでも常にスクロールバーを出したい

CSSに以下のソースを追加 


html{
   overflow-y:scroll;
}

「margin:0 auto;」でセンター寄せしているサイトだとコンテンツ量によってテンプレートのセンター位置がずれるので、これを適用すると効果的。

関連コラム：Firefoxで常にページのスクロールバーを表示させる方法 || Cool Web Window

Firefox以外にOpreraやNNでも常にスクロールバーを出したい（2007.2.22追記）

CSSに以下のソースを追加 


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

Emotional Webさんのサイトで知りました。
スクロールバーの有無によるセンタリングのずれを解消するには | Emotional Web

リストマークを好きな画像にしたい

CSSに以下のソースを追加 


li{
   background:#trance url(image.gif) top left no-repeat;
   padding-left:20px;
   list-style:none;
}

padding-leftの値は画像によってお好みで変えてください。

リスト(liタグ）で作ったメニューを横並びにしたい

・インライン要素にして横並び
CSSに以下のソースを追加


li{
   display:inline;
}

・floatを利用して横並び
CSSに以下のソースを追加


li{
   float:left;
}

ただしこの場合、リストに続く要素がリストと横並びになってしまうので、次に続く要素に「clear:both;」を追加しなければなりません。

リストの位置がIEとFirefoxで違うような・・・？（2007.2.28追記）

スタイルシートの設定に問題があります。
一見、ulやolに何も指定していないとIEとFirefoxは同じデフォルトスタイルシートが適用されているように見えていますが、実は余白を空けているプロパティが異なります。

IEのul、olのデフォルトスタイルシート


ul,ol{
   margin:18px 0 18px 40px;
   padding:0;
}

Firefoxのul、olのデフォルトスタイルシート


ul,ol{
   margin:1em 0;
   -moz-padding-start:40px;
}

つまり、リストマークを表示するための場所の余白を、IEではmarginで、Firefoxはpaddingで指定しているということです。
カスタマイズしない場合、デフォルトスタイルシートでIEでもFirefoxでもそれほど差が生じないので問題ないのですが、カスタマイズする際はpaddingとmarginの両方を設定することを忘れずにしましょう。

また、margin:0およびpadding:0を設定した場合でも、リストマークは存在しています。画面上には隠れて表示されていないように見えてしまっているだけです。
他の要素との兼ね合いやブラウザの違いでリストマークが不本意に見えてしまうこともありますので、リストマークを表示させたくない場合は必ず「list-style-type:none」を指定しましょう。

特にIEだけでwebサイトを作成している方に多いと思いますが、margin:0を指定しただけでリストマークが消えてしまったと思い込んでいるようです。
その場合Firefoxではpaddingによってリストマークを表示するための余白を設定しているので、Firefoxではリストマークが表示されてしまっていたりします。気をつけましょう。

ブロック要素にマウスを合わせると、背景を変えたい

:hover擬似要素を使用（ただしIE6以前ではaタグ以外の:hoverに対応していないため、適用されません。）

CSSに以下のソースを追加


div#box:hover{
   background:#ddd;
}

どうしてもIE6で:hover使いたいって方は、以下のサイトさまを参考になさってください。

jmblog.jp - IEでa要素以外に:hover擬似クラスを適用させる

外部リンクと内部リンクを視覚的にわかるようにしたい

CSSに以下のソースを追加


a[terget="_blank"]{
   background:#trance url(image.gif) top left no-repeat;
   padding-left:20px;
}

IE6以前では適用されませんので注意です。
IE6以前でも同様に表示したい場合は、上記で説明したリストの画像を変える要領で、個別に指定していくしかないんですかね～？

アンカーの色が変わらないんだけど（2007.2.22追記）

これにはいくつか原因が考えられます。
1. a（アンカー）要素の擬似クラスの順番が違う。
なぜだかは知りませんが、擬似クラスを記述する順番というのが決まっていて、それにしたがって書かないとうまくスタイルシートが反映されません。
書き順は以下の通り。


a{color:#000;}
a:link{color:#000;}
a:visited{color:#000;}
a:hover{color:#000;}
a:active{color:#000;}

プロパティは適宜変更してください。

2. スタイルシートの優先度が低い
a要素はヘッダー部分やコンテンツ領域などでよく変更すると思うのですが、その際にスタイルシートの優先度が低くなってしまったことが考えられます。
詳しくはここでは説明しませんが、どうしてもうまくいかないという場合はa要素を指定するスタイルシートを「#」(ID)から書くと反映されたりします。
これはID指定のスタイルシートを一番優先して反映させるためです。
簡単な説明は当サイトの以下の記事を参考にしてみてください。

CSSの優先度 | CSSに関するまとめリスト CoolWebWindow

CSSでロールオーバーした画像がIEでちらつく（2007.10.13追記）

例えば、メニューロールオーバー（画像置換）で行うと非常にソースもきれいでよいのですが、IEにおいて特定の設定をしていた場合に、読み込みが遅いために画像が一瞬ちらつく現象が起こります。
まあキャッシュ関連の問題なのですが、JavaScriptで改修することができます。しかも、IEではCSSにJavaScriptのコードを書いて実行できるので、個別に外部JavaScriptファイルを読み込んだりする必要がありません。 


html {
  filter: expression(document.execCommand("BackgroundImageCache",false, true));
}

関連記事

投稿日:2007年1月15日 | 編集
« 前の記事 | webコラムのトップへ | 次の記事 »

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

clearfixの覚書
from お前のネタは俺のネタ 2007/10/12

最近のコラム

top

CSSテンプレートコーナー

ホームページ作成に役立つコーナー

姉妹サイト