CSS初心者に向けるhタグの装飾色々

皆さんはサイトのhタグの装飾をどのように行っていますか？

画像で指定しているのでしょうか？ それともCSSで指定していますか？

SEO的に見てもせっかくのhタグですから、画像でなくテキストで入れたいところです（altにテキスト入れられますが、純粋なテキストよりもSEO的効果は薄いなんて言われてます。）。

今回は簡単につくれるhタグの装飾をいくつかご紹介します。

まずはこんなのはどでしょうか？

※まわりの点線は含みません

<div class="title">
<h3>2008.04.07</h3>
<h2>ここにタイトルが入ります</h2>
</div>

.title	{
border-left: 3px solid #CCC;
}
.title h3	{
font-size: 80%;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
color: #909090;
padding: 0 0 0 10px;
}
.title h2	{
font-size: 120%;
color:#6B6B6B;
padding: 0 0 0 10px;
letter-spacing: 1px;
}

おつぎはこんなのいかがですか？

<h2>ここにタイトルが入ります</h2>

h2	{
font-size: 120%;
background: #F4F4F4;
padding: 5px 0 2px 10px;
border-left: 10px solid #80A852;
border-bottom: 1px solid #A1A1A1;
color:#6B6B6B;
}

ラストは:first-letterを使った見出しの表現

<h2>ここにタイトルが入ります</h2>

h2	{
font-size: 120%;
border-bottom: 1px dotted #A1A1A1;
color:#6B6B6B;
letter-spacing: 1px;
}
h2:first-letter	{
font-size: 1.5em;
}

こんな感じです。

基本、罫線と字間やfont-familyでいじります。色々ためしてみましょう。