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

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

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

リンクの目印

　さて、いよいよ最後のテクニックである。背景画像はどんなルールにも貼り付けられるということを利用して、新しいウィンドウでページを開くリンクに背景画像を表示するというルールを定義しよう。ここでは、本稿の最初でダウンロードした小さな赤い矢印の画像を使用する。今まで作成したHTMLでnewwinという名前のクラスを新たに作成し、background属性を指定しよう（リスト8）。

リスト8

<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;
}
.newwin {
      background-image: url(xlink.gif);
      background-repeat: no-repeat;
      background-position: right top;
      padding-right: 10px;
}
-->
 </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>

　背景画像の属性はもう簡単に扱えるはずだ。ただ、ここでは新しくpadding-rightという要素も登場している。この要素は画像表示分の10ピクセルを確保するために指定されており、後にはそのままハイパーテキストが続くようになっている。

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

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