マジ

TIPS＆TRICKSを超えた 本気で使える テクニック

背景画像のテクニック
だれでも一度は自分のページに背景画像を付けてみたことがあるだろう。しかし、単純に背景画像を並べるだけではあまり面白みがないし、文字が読みにくくてかなわないので、HTMLに慣れてくると背景画像をはずしてしまうものだ。しかし、CSSのテクニックを追究すれば、ページ全体に並べるだけが背景画像の使い方ではないことが分かるはずだ。
文：佐藤和人HTML MANIAXで紹介したテクニックは

http://internet.impress.co.jp/maniax/でソースを公開！

5つの背景関連プロパティーを駆使せよ！
background-color: #FFC

CSSには、背景関連のプロパティーがCSSの色の書式で背景色を指定

以下の 5 つある。①背景色を指定する
background-image: url(back.gif)「background-color」②背景画像を指定すurl( 〜 )に画像のURLを指定る「background-image」③画像の繰り返し方を指定する「background-repeat」④
背景画像を固定させる「background-background-repeat: no-repeat
repeat（上下左右に並べる）、repeat-x（左右にだけ並べる）、attachment」⑤背景画像の開始位置を指repeat-y（上下にだけ並べる）、no-repeat（画像を1つだけ表示）定する「background-position」。これらののどれかを指定値は、簡略化プロパティーのbackgroundに並べて指定するのが便利だ。
HTML では body 要素に背景画像を、

background-atattchment: fixedbody要素とテーブル関連の要素に背景色fixedを指定すると背景画像を固定するを指定できるだけだが、CSSの背景関連プロパティーは、見出しや段落など、どんbackground-position: 40% 60%
画像の左右と上下の開始位置をスペースで区切って並べるな要素にも適用できる。背景画像を繰り返さずに1つだけ表示させたり、位置を指定したり固定させたり、といったことは一括指定CSSを使わないとできない。5 つのプロ
パティーを駆使して、画像を使った高度な表現を工夫してみよう。

background: #FFC url(back.gif)
no-repeat fixed 40% 60%

160 +++ iNTERNET magazine 2003.06 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

1［ 囲みの枠を画像で飾る ］
見出しや段落に背景色や背景画像を付けると、四角い囲みのような表示になる。単なる真四角の囲みでは見飽きたスタイルだ。背景に使う画像をひと工夫して、角が丸まったような効果を出してみよう。

見出しの端にアクセントを加える
ソース①のページを開くと、見出しの左端が丸まって、グラデーションがかか使用する画像っているように見える。これはh2要素に背景色と背景画像を単純に指定しているだけだ。backgroundプロパティーにno-repeatを加えることで、見出しの左上隅に1つだけ画像が置かれる。この画像の右端は背景色と滑らかにつながるような色にしてある。
こうした画像を作るときのポイントは、① tips1-1.html

ブラウザーの設定で文字のサイズを変えてもおかしくならないような大きさやデザ
h2 { font-size: 1em; color: white;
padding: 0.4em 0 0.4em 1em;
background: #F99 url(maru.gif) no-repeat; }インにすることだ。また、この画像の左上は透明色にしていない。透明色にすると見出しの背景色もそこに塗られてしまう。

角の丸い囲みを作る
ソース②は、背景画像で角の丸い囲みを作ってみたものだ。ややこしいテーブルでこうしたデザインを作っているサイ

使用する画像トは多いが、CSSならHTMLはぐっとシンプルになる。用意する画像は、左のように囲みの上部と下部になるもの。まず、囲みにしたい部分をクラス名が「section」のdiv要素で囲む。このdiv要素の中身は h2 要素で始まり、次に p 要素が並んで い るも の に す る 。 h 2 要 素 に は② tips1-2.html

backgroundプロパティーで上部の丸みになる画像を指定する。div要素の中の最後のp要素には「last」というクラス名

div.section { width: 400px; margin: 1em 0 2em 4em;
background-color: #FCC; }div.section h2 { font-size: 1em; margin: 0;
padding: 1em 1em 0em;
background: #FCC url(top.gif) no-repeat; }div.section p { line-height: 1.5; padding: 0 1em; }div.section p.last { padding-bottom: 16px;
margin-bottom: 0;
background: #FCC url(bottom.gif) no-repeat bottom; }を付け、やはりbackgroundプロパティ
ーで下部の丸みになる画像を指定する。
あとはdiv要素にピンク色の背景色を付け、各要素のマージンやパディングで余白を調整する。
このデザインの欠点は、囲みの幅を固定しなければならないこと。幅を固定したくなければ、左か右のどちらかの丸みをあきらめるしかない。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2003.06 +++

161

2

［ 大きな背景画像で効果を付ける ］
ページ全体に背景画像を付けると、テキストがとても読みにくいページになってしまう。それでも背景画像はついつい使いたくなってしまうもの。ここでは大きな背景画像を見せながら、テキストも読みやすくする工夫をしてみよう。

画像を見せながらテキストは読みやすく
ソース①は、大きな背景画像をbody要素に指定したものだ。backgroundプ
ロパティーにはno-repeatと「90% 2%」を加えることで、ページの右上に1つだけ画像が表示される。HTMLだけではできないCSS特有のワザだ。ただし、これだけでは画像と文字が重なって、たいへん読みにくくなってしまう。
そこで、見出しや段落をクラス名が「main」のdiv要素で大きく囲む。このdiv① tips2-1.html

要素の背景色を白くすれば、文字の背景には画像が重ならないようになる。また、

body { background: #FFC url(honoo.gif)
no-repeat 90% 2%; }div.main { margin-left: 5em; margin-top: 1em;
width: 20em; padding: 1em 2em;
border: 2px dashed black; background-color: white; }マージンや幅を指定して、背景画像が見える余白を作っておく。こうすれば、背景画像を見せながらテキストは読みやすいページになる。

大きな画像を固定させる
CSSのテクニックとしてよく知られているものに、「背景画像の固定」がある。ページをスクロールしても、背景画像が常に一定の位置に置かれるというものだ。
ただしそうしたページでは、重なったテキストと画像がスクロールのたびに再描画されるためにブラウザーの動きが重くなるし、目がちかちかして困りものだ。
ソース②は、ソース①をほんの少し変えたのもの。body要素のbackgroundプロパティーにfixedを加えただけだ。ページをスクロールしても、常に画面の左上に背景画像が1つ表示されるようになる。
やはりテキスト部分の全体をdiv要素で囲み、背景色を付けているので、背景画像と文字は重ならない。これならページ② tips2-2.html

をスクロールするたびに目が痛くなるこ
body { background: #FFC url(honoo.gif)
no-repeat fixed 90% 2%; }div.main { margin-left: 5em; margin-top: 1em;
width: 20em; padding: 1em 2em;
border: 2px dashed black; background-color: white; }162 +++ iNTERNET magazine 2003.06 +++ともないはずだ。サイトのイメージとなる大きなロゴやイラストを効果的に使いたい人は、こんな工夫をしてみてはどうだろうか。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

3［ 背景画像の謎に迫る ］
ここでは、あまり知られていない背景画像の使い方を紹介しよう。背景画像の性質を利用したちょっとしたトリックだ。単純に見える背景画像も、実は奥が深いものだということが分かるだろう。

背景画像を2つ使う
背景用の画像を2つ用意して、ページの左上と右下に表示させる、なんてことはできるだろうか。1つの要素には1つしか画像を指定できない。それなら、要素を2つ使えばいい。ソース①は、html要素とbody要素にそれぞれ背景画像を指定したものだ。html要素の画像は右下に、body要素の画像は左上に表示される。ただし、ウィンドウズ版 Internet
Explorer（IE）
でこれがうまくいくのは、標準準拠モードのIE 6（2002年12月号参① tips3-1.html照）
だけだ。
さらに background プロパティーにhtml { background: black url(honoo2.gif)
no-repeat fixed 98% 98%; }body { background: url(honoo2.gif)
no-repeat fixed 1em 1em; }2つの画像で半透明化効果

fixedを指定すれば2つの画像が固定される……といきたいところだが、ウィンドウズ版IEではbody要素のほうの背景画像は固定されない。

使用する画像

ソース②のページを開いてみると、黒い背景に浮かぶ画像が白い背景のブロックと重なる部分は、自動的に半透明化されてブロックの背後に回っているように見える。この効果を作るには、まずb o d y 要 素 に 背 景 画 像 を 指 定し 、backgroundプロパティーにfixedを加えて固定させる。同じ画像を元にして、グラフィックソフトなどで色を薄めて2つ目の画像を作る。この2つ目の画像をクラス名「main」のdiv要素の背景に指定し、やはり固定させる。どちらも背景画像の位置は同じ「80% 10%」にする。
fixedを指定したときの背景画像は、ど② tips3-2.html

んな要素でも常にブラウザー画面を基準にした位置に配置される。この例は、
body { background: black url(honoo2.gif)
no-repeat fixed 80% 10%; }div.main { margin-left: 5em; margin-top: 1em;
width: 20em; padding: 1em 2em;
border: 2px dashed black;background: white url(honoo3.gif)
no-repeat fixed 80% 10%; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

背景画像のこうした性質を利用したものだ。ただし、この仕様を正確にサポートしているのはマッキントッシュ版 IE 5、ネットスケープ6以降、Opera 7だけだ。
ウィンドウズ版IEは、ページ全体の背景画像しか固定できない。

+++ iNTERNET magazine 2003.06 +++163

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.