CSSの見出しサンプル

2006年11月28日

業務を効率よくスピーディーに行うためのCSSで作る見出しサンプル集
パターンは考えると星の数ほどありますが、ここでは実際にニュースサイトやブログでも使われている“使える見出し”にこだわってみました。
アイデアが思いついたら随時追加していく予定です。

画像を使わないオーソドックスな5パターン

CSSだけを使用した使い回しのきくオーソドックスなスタイル

使える見出し

h5#midashi_01{
padding:5px 0 5px 15px;
border-left:#009900 8px solid;
border-bottom:#009900 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}

使える見出し

h5#midashi_02{
padding:5px 0 5px 15px;
background:#F5F5F5;
border-left:#009900 8px solid;
font-size: small;
font-weight: bold;
color:#333;
}

使える見出し

h5#midashi_03{
padding:5px 0 5px 15px;
background:#F5F5F5;
border-left:#009900 8px solid;
border-right:#666666 1px solid;
border-bottom:#666666 1px solid;
border-top:#666666 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}

使える見出し

h5#midashi_04{
padding:5px 0 5px 15px;
background: #EEFFEE;
border-bottom:#009900 1px solid;
border-top:#009900 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}

使える見出し

h5#midashi_05{
padding:5px 0 5px 15px;
background: #F5F5F5;
border: #666666 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}

見出しにカテゴリに関するサブコメントを含める工夫をする。ｈタグにspanを入れてdisplay:blockにするのがポイントです。

使える見出しカテゴリに関するサブコメント

h5#midashi_09{
padding:0 0 0 10px;
border-left:#009900 5px solid;
font-size: medium;
font-weight: bold;
color:#009900;
}
h5#midashi_09 span{
display:block;
font-size:small;
color:#999999;
}

透過ＧＩＦを利用したカメレオン見出し

画像の背景をアルファ0に透過させて白色の横、ストライプ、格子柄で透過ＧＩＦを作る。その画像をｈタグの背景にもっていき色をＣＳＳで指定します。透過させている画像の背景にその色が浮き出るのでＣＳＳだけで色の変化をつけることができます。※濃い目の色を指定するとテキストが綺麗に見えないのが難点ではあります…

使える見出し

h5#midashi_06{
padding:5px 0 5px 15px;
background: url(../../oblique-line_1px.gif) #FFCCFF ;
font-size: small;
font-weight: bold;
color:#333;
}

使える見出し

h5#midashi_07{
padding:5px 0 5px 15px;
background: url(../../stripe_1px.gif) #FFCCFF ;
font-size: small;
font-weight: bold;
color:#333;
}

使える見出し

h5#midashi_08{
padding:5px 0 5px 15px;
background: url(../../check_1px.gif) #FFCCFF ;
font-size: small;
font-weight: bold;
color:#333;
}

このブログのようにPNGを使用するとグラデーションをかけれたり、模様をつけれたりと色々なことができるようになります。ＩＥ6のシェアが下がるまでの辛抱ですね。