複数行の見出しに対応した背景画像の使い方(2)

まず、上の画像のような背景画像を用意します。

次に、オレンジのでカットし、hbg.gif、harw.gifの2つの画像に分割します。周囲を囲む異なる2本の線はそれぞれ異なる要素を使ってCSSで表現します。

前回と同じように「無料ウェブ素材 Tyto-Styleの素材は全て無料.加工OK. 商用OK.」というテキストをh2要素で括り、その周囲をdiv要素class属性hwrap、h2の中にspan要素を置きました。

<div class="hwrap">
	<h2 class="title">
		<span>無料ウェブ素材 Tyto-Styleの素材は全て無料.<br />加工OK. 商用OK.</span>
	</h2>
</div><!-- /.hwrap -->

これで準備は終わりです。CSSを適用していきます。

それぞれの要素に指定する画像は以下の図を参考にしてください。

実際のCSSは以下のようになります。

div.hwrap{
width: 341px;
background-color: #015098;
padding: 1px;
margin-bottom: 5px;
}

h2.title{
width: 339px;
background: url(hbg.gifへのパス) left top repeat-x #1d74cc;
border: 1px solid #438cd4;
}

span{
font-weight:bold;
font-size: 120%;
padding: 7px 15px 5px 30px;
display:block;
color:#fff;
background: url(harw.gifへのパス) 10px 10px no-repeat;
}

まずはdiv要素のhwrapの横幅を指定します。幅の合計は343pxですが、padding属性で1pxの余白をつけるので、widthの属性値は341pxになります。背景色は用意した画像の一番端の色に指定します。この場合は#015098になります。margin-bottom属性は見出し全体の下の余白を取っています。

div.hwrap{
width: 341px;
background-color: #015098;
padding: 1px;
margin-bottom: 5px;
}

h2要素titleには背景画像としてhbg.gifを指定します。h2を覆うhwrapにぴったりとくっつくように指定し、背景画像はrepeat-xを指定し、横に繰り返します。また縦に伸びた時のために、背景画像hbg.gifの一番下の色の値を取得し、背景色を指定します。この場合は#1d74ccですね。

また用意した画像の周囲を覆う2本の線の内、内側の線をborder属性で指定します。その結果、h2要素titleのwidth属性は339pxに指定することになります。

h2.title{
width: 339px;
background: url(hbg.gifへのパス) left top repeat-x #1d74cc;
border: 1px solid #438cd4;
}

最後にspan要素です。前回同様ここでのポイントはdisplay属性です。span要素はインライン要素なので、そのままだと、harw.gifの位置をきちんと表現できません。span要素をブロック要素に変えた上で、背景画像にharw.gifを指定し、位置を調整しましょう。これで完成です。

span{
font-weight:bold;
font-size: 140%;
padding: 5px 15px 10px;
display:block;
color:#014396;
background: url(hbottom.gifへのパス) left bottom no-repeat;
}

これを実際に適用してみると以下のようになります。

デモ | 複数行の見出しに対応した背景画像の使い方(2)

以上です。この企画、もう1回ぐらいやる予定です。読んでいる人がいるのか微妙な企画ですが、もしそういう方がいらっしゃいましたら、次回更新まで気長にお待ちください。

• 複数行の見出しに対応した背景画像の使い方(1)
• 複数行の見出しに対応した背景画像の使い方(2)