CSS（スタイルシート）の小技

最初の字だけ装飾する（ドロップキャップ）

文章の最初の字だけを装飾するスタイルシート適用方法。 first-letter擬似要素を使用。この例では、dl内のdd要素に.dropcapとclass名をつけて、そこにfirst-letterでスタイル設定。

dd.dropcap:first-letter{
font-size: 300%;
background-color: #c00;
color: #fff;
float: left;
margin-right: 10px;
margin-bottom: 10px;
padding: 2px;
}

高さ指定したボックスの縦方向中央に配置

配置する物

{
height: 200px;
line-height: 200px;
text-align: center;
}

ボックスの高さと同じ値のline-heightを指定する。
配置出来るものは、一行で収まるテキストや画像など。

ボックスを画面中央に配置

例

ボックスを中央寄せするだけなら

{
margin-left:auto;
margin-right:auto;
}

で可能ですが、上下でも真ん中にしたい場合は、
ボックスに幅と高さを指定して上下左右50％の位置に絶対配置。さらにボックスに指定した幅と高さのそれぞれ半分をマイナスマージンで戻せば出来ます。
この例では、

{
width: 500px;
height: 350px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -175px;
}

文末を揃える

文章に改行を入れないでボックスの幅に任せで自動で折り返しさせる場合、文章の右端が段々になりますが、スタイルシートでtext-align: justify; text-justify: inter-ideograph; を指定することで文末がピシッと揃います。 FireFoxの場合はtext-align: justify;のみで揃います。しかし「text-align: justify;」は、「ウィンドウズ　Vista 」などのように半角・全角スペースが入った文章だとかなり無理して間隔を調整しようとする場合があるので注意です。
このスタイルシートを適用する

{
text-align: justify;
text-justify: inter-ideograph;
}

要素を重ねて表示

5つの枠（ここではdiv要素）を囲む親要素（ここではdd要素）に

{
position: relative;
height: 200px;
}

を指定。そして
枠1に

{
position: absolute;
top: 10px;
left: 10px;
z-index: 5;
}

枠2に

{
position: absolute;
top: 30px;
left: 80px;
z-index: 4;
}

枠3に

{
position: absolute;
top: 50px;
left: 150px;
z-index: 3;
}

枠4に

{
position: absolute;
top: 30px;
left: 220px;
z-index: 2;
}

枠5に

{
position: absolute;
top: 10px;
left: 290px;
z-index: 1;
}

をそれぞれ指定。 z-indexの値が大きいほうが上に表示されます。

要素の透明化

上の「要素を重ねて表示」のそれぞれの枠に

{
filter: alpha(opacity=50);
opacity:0.5;
}

を追加。
filter: alpha(opacity=**)はIE限定の拡張機能で、 opacityの値が0で透明、50で透明度50％、100で不透明に。 widthかheightを指定しないとフィルターがかかりません。
FireFoxではopacity:**;で透明化可能。値は0で透明、0.5で透明度50％、1で不透明。

背景画像が透けて見えるテキスト

Pentium4 2.8

背景画像を設定した親要素の中にp要素でテキストを配置。p要素のスタイルシートには、

{
width: 100%;
background-color: #fff;
color: #000;
filter: alpha(opacity=70);
opacity:0.7;
}

を設定。

フッターを最下部に

コンテンツの少ないページだとこのようにフッターの下にスペースが空いてしまいます。このスペースを消すには、

html{
height:100%;
margin:0;
}
body{
height:100%;
margin:0;
}

を指定。
さらに、body直下にdivタグを置いて、

{
min-height:100%;
position: relative;
}

とCSS設定。
このdivタグの最下部にフッターを置き、

{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

とすればフッターがページの最下部に固定され余分なスペースが消えます。結果