今回のポイント hr+CSSでimgによる疑似区切り線を置き換える エンジニアとデザイナの作るページの違い |
前回勉強した背景画像の使い方は,もともとHTMLで存在した<body background="ファイル名">の置き換えです。CSSによってリピート方向や開始位置の指定ができるようになりましたが,古くからHTMLの勉強をしている人ほど「背景=ページ背景」という認識が強くなります。この考え方から抜け出してみることにしましょう。
CSSを使えばbodyだけでなく,HTML中,bodyに含まれるほとんどの要素に対して背景画像を設定できます。ただし,“ほとんど”であって全部ではありません。たとえば<br />のように画面上に表示されないものは,画面上で表示される領域を持っていないため背景画像は設定できません。同様に<title>のようなheadに含まれるタグ領域も画面表示がないため対象外です。
一方,ブラウザ画面上でわずかでも面積を専有しているものは背景画像が設定できます。たとえば,水平区切り線の<hr />には背景が設定できます。
hrに背景画像を付けてみよう
hrに背景画像というのをやってみます(リスト1)。<p>の文章部分には適当な長さのテキストを入れてください。
リスト1●hrに背景画像を付ける例
|
hrに対してCSSでbackground-image:url(bg2.jpg);という指定をしていますね。ところがこのままでは水平線に背景は付きません(図1)。
図1●リスト1のブラウザ表示。hrに対してただbackground-image:url(xxx.jpg);を指定しても背景が付かない |
なぜ背景が付かないかというと,hrには高さという概念が存在しないからです。そこで<style>の中のhrに対する指定を次のように書き換えます。
|
この指定をすることで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のような表示になってしまいます。
図3●hrに対して背景画像を指定したが,heightが画像サイズより小さい場合 |
これでは何の画像なのかわかりません。ちゃんと画像サイズと同じheightに設定すると,画像が何だったのかがわかります(図4)。
図4●heightを画像サイズに合わせた場合 |
区切り線的に画像を使用することを考えると,大体高さで50px程度が限界だと思います。それよりも大きくなってしまうと区切り線なのか挿絵なのかがあいまいになります。