複数行の見出しに対応した背景画像の使い方(1)
CSSの初心者向けの本や記事は「背景画像を使って見出しを飾ろう」という感じで、繰り返しのない一枚の画像を置く方法書いてくれていることはあっても、繰り返しについてはあまり詳しく触れられていないことが多い気がします。
逆に上級者向けのものを見ると、この辺りはできて当然というレベルで、説明を飛ばしてしまっています。
こんな状態なので、今ばりばりコーディングをやっている人でも初級者から中級者への移行期は結構悩んだりしたんじゃないでしょうか。
そんな風に思い、これから何回かに分けて見出しの装飾方法を紹介して行こうと思います。
まずはブログなどで見出しを書くと横幅も縦幅も固定された背景画像を利用すると、長いタイトルの時など背景画像からはみ出てしまいますが、それを画像の分割とCSSでうまく回避する方法を紹介します。
今はまだ全体を覆うdiv要素の中にマルチカラムでレイアウトされているものが多いと思うので、比較的横への繰り返しは制限されている一方、縦は自動的に繰り返される仕様になっていることが多いですから、縦への繰り返しを使ってテキストのはみ出しを回避したいと思います。
まず、上の画像の一番上のもののような背景画像を用意します。
次に、その背景画像をオレンジの箇所でカットし、htop.gif、hbody.gif、hbottom.gifの3つの画像に分割します。
そこまで準備が出来たら、実際にこれらの画像を背景画像として適用するhtmlを用意します。ポイントは3つに画像を分けたので、htmlでも最低3箇所画像を適用できるようにテキストを要素でくくるるということです。
今回は「無料ウェブ素材 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: 343px;
background: url(hbody.gifへのパス) left top repeat-y;
margin-bottom: 5px;
}
h2.title{
padding-top: 5px;
background: url(htop.gifへのパス) left top no-repeat;
}
span{
font-weight:bold;
font-size: 140%;
padding: 5px 15px 10px;
display:block;
color:#014396;
background: url(hbottom.gifへのパス) left bottom no-repeat;
}
まずはdiv要素hwrapの横幅を指定します。幅の指定は必ずするようにしましょう。幅を指定しておかないと、崩れの元になります。次にbackground属性で背景画像と画像の開始位置、繰り返しを指定します。margin-bottom属性は見出し全体の下の余白を取っています。いうまでもないことですが、ここでpadding-bottomを指定してしまうと、背景画像が不自然に下へはみ出してしまいます。
div.hwrap{
width: 343px;
background: url(hbody.gifへのパス) left top repeat-y;
margin-bottom: 5px;
}
h2要素titleには背景画像としてhtop.gifを指定します。h2を覆うhwrapにぴったりとくっつくように、画像の開始位置をtopに指定することはもちろん、余白をとる場合はpaddingを使ってください。。
h2.title{
padding-top: 5px;
background: url(htop.gifへのパス) left top no-repeat;
}
最後にspan要素です。ここでのポイントはdisplay属性です。span要素はインライン要素なので、そのままだとテキストの幅にしか背景が適用されません。加えて、ここでfont関連の指定もやっておきます。
span{
font-weight:bold;
font-size: 140%;
padding: 5px 15px 10px;
display:block;
color:#014396;
background: url(hbottom.gifへのパス) left bottom no-repeat;
}
これを実際に適用してみると以下のようになります。
これでテキストが複数行のまたがる長さでも、背景画像をそれほど違和感無く適用できるようになります。
今回は見出しを例にしましたが、同じ方法を使って、角丸デザインなんかにも応用できます。ただし、この方法はあくまで横幅が決まっていたり、決めることのできる場合です。横にも縦にも伸ばすためには、もう少し手の込んだ方法で行う必要があるのですが、htmlのソースが複雑になり過ぎる傾向があります。横幅ぐらいは決定できるデザインにしておくべきでしょうね。
- 複数行の見出しに対応した背景画像の使い方(1)
- 複数行の見出しに対応した背景画像の使い方(2)