エンジニアのためのWebデザイン教室

第19回　「背景＝ページ背景」という考えから抜け出そう

2008/05/28
園田誠

連載目次へ >>

>> 2 1

今回のポイント
hr+CSSでimgによる疑似区切り線を置き換える
エンジニアとデザイナの作るページの違い

　前回勉強した背景画像の使い方は，もともとHTMLで存在した<body background="ファイル名">の置き換えです。CSSによってリピート方向や開始位置の指定ができるようになりましたが，古くからHTMLの勉強をしている人ほど「背景＝ページ背景」という認識が強くなります。この考え方から抜け出してみることにしましょう。

　CSSを使えばbodyだけでなく，HTML中，bodyに含まれるほとんどの要素に対して背景画像を設定できます。ただし，“ほとんど”であって全部ではありません。たとえば<br />のように画面上に表示されないものは，画面上で表示される領域を持っていないため背景画像は設定できません。同様に<title>のようなheadに含まれるタグ領域も画面表示がないため対象外です。

　一方，ブラウザ画面上でわずかでも面積を専有しているものは背景画像が設定できます。たとえば，水平区切り線の<hr />には背景が設定できます。

hrに背景画像を付けてみよう

　hrに背景画像というのをやってみます（リスト1）。<p>の文章部分には適当な長さのテキストを入れてください。

リスト1●hrに背景画像を付ける例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>背景の練習</title>
<style type="text/css">
/*hrに背景画像を入れてみる*/
hr{
  background-image:url(bg2.jpg);
}
</style>
</head>
<body>
<h1>背景画像の練習</h1>
<p>（適当なテキスト）
<hr /><!--このhrに背景画像を設定-->
（適当なテキスト）
</p>
</body>
</html>

　hrに対してCSSでbackground-image:url(bg2.jpg);という指定をしていますね。ところがこのままでは水平線に背景は付きません（図1）。

図1●リスト1のブラウザ表示。hrに対してただbackground-image:url(xxx.jpg);を指定しても背景が付かない

　なぜ背景が付かないかというと，hrには高さという概念が存在しないからです。そこで<style>の中のhrに対する指定を次のように書き換えます。

hr{
  height:50px;  /*高さを指定*/
  border:none;  /*境界線を消去*/
  background-image:url(bg2.jpg);
}

　この指定をすることでhrに高さの概念が入り，背景画像が表示されるようになります（図2）。

図2●heightを指定すると背景画像が表示される

　hrはもともとdivやpと同じブロック要素です。ブラウザ側はhrを「高さ1pxあるいは2pxの凹型境界線付きで中身が空のボックス」として表示しているようです。高さ1pxあるいは2pxと極端に狭いので，上下の境界線がくっついて”影付き線”のような見え方をしている，というのが通常のhrの正体です。そこでhrに対してheightで高さを指定し，もともと設定されている境界線をborder:none;で消すと，図2のように背景画像が表示されるようになるというわけです。

　hrに限らずブロック要素は，背景画像のサイズに合わせて領域の大きさを広げるということはしてくれません。背景画像を設定するのであれば，背景画像がきちんと表示されるだけの高さ，あるいは幅をheightやwidthで指定する必要があります。

　たとえば高さ50pxの画像をhrの背景に使おうとしたときに，height:10px;のような指定をすると図3のような表示になってしまいます。