知ってると得する10のCSSトリック

Ten CSS tricks you may not knowより、簡単な和訳をしたので、紹介します。特に、CSSを勉強しはじめた方には有効な情報ですので、参考にしていただければ幸いです。

1.CSS fontショートハンド・ルール

CSSでfontを指定するときは、下記のようにするのでわ?

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;

ショートハンドを使えば、下記のように省略して書くことができます。

font: bold italic small-caps 1em/1.5em verdana,sans-serif

2.複数のclassを設置

通常は、属性は単に1つのクラスを割り当てられますが、多くのクラスを割り当てることができます

<p class="text side">...</p>

3.CSS borderデフォルトバリュー

borderプロパティを設定するときに通常、border-width、border-color、border-styleを下記のようにすると思います。

border: 3px solid #000;

しかし、ながらここで必要な値は、border-styleのみです。

単に、border: solid;と書けば、幅、色はデフォルトの値が割り与えられます。

そのデフォルトの値は、幅がmedium(大体、3,4pxほど)、色は、そのテキストの色です。

もし、貴方が、これにあてはまるようであれば、幅や色の値を省略することができます.

4.プリントアウト用のCSS

プリントアウト用のCSSを作成し、head要素の範囲以内に下記のように設置するだけです。ここでは、プリントアウト用のCSSはprintstyle.cssとしています。

<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

ポイントは、media属性です。これを適用することにより、対象デバイスを設定できるようになります。

media属性に関しては、下記に詳しく書いてあります。
http://msugai.fc2web.com/web/CSS/media.html

5.テキストの画像置換

to-Rさんのブログでも言及されていましたが、テキストを画像に差し替える方法があります。

HTMLのソースを見ると、テキスト情報なのですが、デザインフォント等でデザインされた画像が表示されているというテクニックです。マークアップは下記のようになります。

<h1>Buy widgets</h1>

これを見てもわかる通り、テキスト情報ですが、下記のようにCSSを組むと画像置換ができます。

h1{
background: url(widget-image.gif) no-repeat;
height: image height;
text-indent: -9999px;
} 

ポイントは、text-indentプロパティで、負の値にすることをテキスト飛ばしと言ったりしますが、テキストを表示外に配置しています。

6.CSSボックスモデルHack

通常のマークアップ、というよりも普通は下記のようにしています。

<div id="box">...</div>
#box{
width: 100px;
border: 5px;
padding: 20px
} 

この意味は、ボックスの幅が150px(幅100px+2つのborderで10px+両側のpaddingで40px)ですが、IE以外のブラウザでは100pxです。

borderとpaddingが無視されます、この問題の解決方法は下記です。

<div id="box"><div>...</div></div>
#box{
width: 150px
}

#box div{
border: 5px;
padding: 20px
} 

7.ブロックレベル要素のセンタリング

固定幅レイアウトでは、下記のようにCSSを設定すればセンタリングされます。

#content{
width: 700px;
margin: 0 auto;
} 

しかし、IE6では、これだけでは、センタリングされません。IE6も対応させる場合は下記のようになります。

body{
text-align: center;
}

#content{
text-align: left;
width: 700px;
margin: 0 auto;
} 

ポイントはtext-align: centerです。#contentの箇所にtext-align: left;を指定していますが、これは、文字を中央寄せを解除するためにしています。

8.CSSで垂直整列

tableでは楽に実装できる事柄でした。vertical-align: middle;とやれば完成です。

しかし、これはCSSレイアウトでは動作しません。

動作させるには、line-heightプロパティで親ボックスレベル要素と同じ値をheightプロパティに設定すれば動作します。

詳しくは、to-Rさんのトコで表記されています。

9.containerのポジショニング

CSSに関する最良のもののうちの1つは、絶対にドキュメントの中で望むところはどんな場所でもオブジェクトの位置を決めることができるということです。さらに、container内のオブジェクトの位置を決めることは可能です

<div id="container"><div id="navigation">...</div></div>
#container{
position: relative
} 

#navigation{
position: absolute;
left: 30px;
top: 5px
} 

ポイントは、positionプロパティです。親ボックスにrelativeを設定します。/p>

10.スクリーン下部に走る背景色

CSSのデフォルトの背景色は、白ですが、これを部分的に青にしたい場合は下記のようになります。

#navigation{
background: blue;
} 

しかし、これはその部分のみで、ページの下部まで適用されません。これを下部まで適用したい場合は、背景画像を設置するのが有効な手段です。

body{
background: url(blue-image.gif) 0 0 repeat-y
} 

あとがき

ザックバランにやりすぎたところもあり、分かりにくい箇所も有るかと思います。特に10番目。さらに、変な日本語もあるかもしれませんが、ご了承ください。