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

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

| CSS, トピック, 無料背景素材, 見出し用背景素材

Pin It

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

今回は以前の記事に続き、複数行の見出しに対応した画像の装飾に付いての解説です。

ポイントはHTMLは前回と同じものを利用して、違うデザインにすることです。前回と同様、横幅のみ固定して、縦に伸ばしてもうまく背景画像内にテキストが収まるようにします。

背景画像の切り出し方

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

次に、オレンジのでカットし、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回ぐらいやる予定です。読んでいる人がいるのか微妙な企画ですが、もしそういう方がいらっしゃいましたら、次回更新まで気長にお待ちください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です