CSSテクニック

見出しの文字数と背景の長さをそろえる3

今回は見出しの幅を固定する場合のコツです。
ポイントは背景の繰り返し方と、使う画像の選び方です。

テクニック使用前(幅を150pxに固定してみました)

見出し
ながーいながーい見出しでーす

テクニックの下手な使い方

見出し
ながーいながーい見出しでーす

テクニックの上手な使い方

見出し
ながーいながーい見出しでーす

下手な使い方はどこがいけないか分かりますか?
背景が切れて上手く表示されていませんね。
これはカッコよくないです。

カッコよく作るには、「切れ目の無い画像を用意すること」と、
「ちょっと大きめ(長め)に画像を用意する」ことです。
今回はこのような画像を用意しました。
大きめに用意する理由は、background-repeat:repeat-y;だけだと画像の継ぎ目が見えてしまうことがあるからです。 素材やさんから借りる場合はしょうがないですが、自作する場合は大きめに作るよう心がけてください。

今回は次のようなスタイルシートを作りました。
background-repeat:repeat-y;で背景を縦方向にだけ表示することと、
padding-left:??px;を指定して、背景に文字がかぶらないように注意してください。
利用する場合は、値を自分に合わせて書き換えてください。

スタイルシート
h6.good{
    font-size:medium;
    background-color:#FFFFFF;
    background-image:url(../img/m-3back.gif);
    padding-left:40px;
    background-repeat:repeat-y;
    width:150px;
}

HTML
<h6 class="good">ながーいながーい見出し</h6>


使いこなすための+α

今回のテクニックは、
幅が固定されていて、更新する可能性のある見出し
の装飾に有効です。更新によって見出しの文字数が増えて2段になった場合でも、 デザインを崩さないですみます。

background-colorをclassで指定すると、見出しに背景色を変えることも可能ですし、 見出しと背景2と組み合わせることも可能です。

見出し
見出し
ながーいながーい見出しでーす

見出しと背景2と組み合わせる場合は、ちょっとしたコツがいります。
spanタグのclassにdisplay:block;を必ず指定してください。


一覧へ戻る


Last Modified 2004-10-13 © きくちゃん 2004 - All Rights Reserved