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

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

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

見出し

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

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

見出し

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

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

見出し

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

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

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

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

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

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

使いこなすための＋α

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

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

見出し

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

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

一覧へ戻る