CSSでWebページの背景画像を指定する

文：John Lee（TechRepublic）
翻訳校正：原井彰弘
2008/02/07 18:30

CSSが登場する以前、背景画像はページ全体の壁紙としてしか使用できなかった。しかし、CSSが登場したことで背景画像をさまざまな目的に活用できるようになった。本稿では、そのような活用方法を3つ紹介しよう。

コンテンツボックス

　今や非常に有名になっているウェブデザインがもう一つある。角が丸く表示されるコンテンツボックスだ。テーブルを用いて作成する方法もあるが、そのようなその場しのぎの方法よりもすぐ作成できて簡単なのは、背景画像を使用する方法だ。ここでは、ダウンロードした画像ファイル「boxtop.gif」と「boxbottom.gif」を使用する。CSSのルールを用いて、タグにそれらのボックスを構成する要素を貼り付けるのである。

　では、まずルール「box」をクラスとして宣言することから始めよう（リスト4）。クラスとして宣言するには、名前の手前にドットを入力すればよい。そして、背景の属性を以下のようにコーディングする。

リスト4

<html>
<head>
<title>CSS Backgrounds</title>
 <style type="text/css">
<!--
body {
      background-color: #8393ca;
      background-image: url(gradient.jpg);
      background-repeat: repeat-x;
}
.box {
      width: 350px;
      background-color: #ffcc00;
      background-image: url(boxbottom.gif);
      background-repeat: no-repeat;
      background-position: left bottom;
}
-->
</style>
</head>
<body>
<h1>Chapter One</h1>
<p>”Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk…”</p>
<br>
<a href=”#”>This link will open a new window.</a>
</body>
</html>

　boxルールのwidth属性は、2枚の画像の幅と一致するように設定を行う。つまり、この設定でボックス内のコンテンツが背景の画像よりも広がらないようにするのだ。また、背景色のカラーコードは、bodyタグに指定したグラデーションの場合と同様に、背景画像の色と一致するように指定する。そして、最後の2つの属性「repeat」および「position」では、背景画像がX軸方向にもY軸方向にも連続しないようにし、コンテンツの左下の端に常に表示されるよう指定を行っている。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    今、使っているマシンのOSは？

    投票受付期間：2008年6月27日 〜 2008年7月11日
  • » 投票しないで結果だけ見る
  • 話題のタグ
CSS Apple Java JavaScript Tips Linux Leopard C/C++ Mozilla Mac OS X Webアプリケーション開発 Database PHP Google RIA 入門 SOA iPod touch イロハ Safari 開発環境 Ruby XHTML Ajax HTML Windows 小技 フレームワーク Internet Explorer iPhone ブラウザ Microsoft Firefox Python Opera オープンソース Firefox 3 Off Topic server Apache MySQL Eclipse Solaris リファレンス Webデザイン Flash 仮想化 iPhone 3G Adobe ライブラリ
  • 話題のタグを見る »