今日はとあるサイトで使っているタイトルバーの作り方を解説したいと思います。
構造はいたってシンプルなのですが、何人かの人から「どうやって作ってるの？」と聞かれたので。
スタイルシートに詳しい方には、たいして有用な情報ではないかもしれませんが。

そのタイトルバーの完成形がこれです。

画像ではなく、スタイルシートのみで作ってあります。
ものすごくシンプルなので、一見、わざわざ作り方を説明するまでもないように見えます。
が、1点だけ微妙な小技を効かせてあって、それは左側のラインです。
よく見ると、外枠の枠線と、左側の縦のラインの間に、1ピクセルの隙間が空いています。
作り方を教えてほしいという人たちは、どうやらこの隙間がうまく作れないようです。

そのHTMLとCSSはこんな感じです。

■HTML

[html]
<div class="midashi">
<h1>タイトル</h1>
</div>
[/html]

■CSS

[css]
.midashi {
padding: 1px;
background: -moz-linear-gradient(top, #fefefe, #efefef);
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#efefef));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#fefefe’, endColorstr=’#efefef’);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#fefefe’, endColorstr=’#efefef’)";
border: 1px solid #dbdbdb;
}

.midashi h1 {
padding: 10px 14px;
font-size: 18px;
font-weight: normal;
line-height: 1.5;
border-left: 5px solid #0050c5;
}
[/css]

フォントサイズやラインの色、背景色などは適宜調整してください。

とてもシンプルですが、使い勝手はいいと思います。