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

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

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

　これでほぼ完成なのだが、最後にもう一つ、paddingを追加する必要がある。そうしないと、ボックスの内容がボックスの縁にぴったりと付いてしまうことになるからだ。リスト6の強調表示のように、boxクラスを継承したh1にコードを追加し、それと同時に新たにboxクラスを継承したpを定義しよう。

リスト6

<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;
}
.box h1 {
      background-image: url(boxtop.gif);
      background-repeat: no-repeat;
      background-position: left top;
      padding: 10px 20px 0 20px;
}
.box p {
      padding: 0 20px 10px 20px;
}
-->
</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>

　さて、divでコンテナを作成してboxクラスを適用すれば、これまでに記述したコードを実際に表示させることが可能だ（リスト7）。

リスト7

<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;
}
.box h1 {
      background-image: url(boxtop.gif);
      background-repeat: no-repeat;
      background-position: left top;
      padding: 10px 20px 0 20px;
}
.box p {
      padding: 0 20px 10px 20px;
}
-->
</style>
</head>
<body>
<div class=”box”><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>
</div>
<br>
<a href=”#”>This link will open a new window.</a>
</body>
</html>
記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
フレームワーク Java CSS 3 server Python Apache XHTML PHP Windows HTML リファレンス Eclipse Adobe JavaScript Solaris 入門 iPhone 3G Tips iPod touch Safari SOA 仮想化 iPhone Leopard C/C++ ブラウザ Firefox 3 Database Mac OS X オープンソース イロハ Webデザイン CSS Ajax Opera RIA Firefox ライブラリ Ruby 小技 Mozilla Off Topic Microsoft Internet Explorer 開発環境 Apple Google Webアプリケーション開発 Linux Flash
  • 話題のタグを見る »