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

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

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

　newwinクラスを指定したaタグを定義すれば、ウェブページは完成だ（リスト9）。

リスト9

<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=”#” class=”newwin”>This link will open a new window.</a>
</body>
</html>

　今までの作業を保存し、ウェブブラウザでHTMLのページを開いてみよう。図2のように表示されるはずだ。

図2 図2：4つの背景画像によって完成したページ。

　CSSで背景画像を扱えば、ここに挙げた以外にも変わったことをいろいろと行える。本稿で紹介した例は、表面的なものに過ぎないのだ。CSSの優れた入門書を読んで、さまざまな属性の設定を試してみよう。もしかしたら、思いもよらなかった使い方が見つかるかもしれない。

　John Lee氏はデザインとイラストレーションを専門とするコンサルタントであり、フリーランスのテクニカルライターでもある。ウェブサイトはjohnleestudio.com。

この記事は海外CNET Networks発のニュースをシーネットネットワークスジャパン編集部が日本向けに編集したものです。海外CNET Networksの記事へ

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 今日のトップ記事
  • 昨日
  • 2日前
  • 3日前
  • 6日前
  • 7日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
オープンソース リファレンス Microsoft server ライブラリ RIA Eclipse Webデザイン C/C++ Firefox Ajax Linux Internet Explorer iPhone Opera SOA フレームワーク Mac OS X 小技 Firefox 3 Flash Python Mozilla XHTML Apache Safari ブラウザ Database iPhone 3G Leopard Apple Off Topic Ruby Windows JavaScript iPod touch 入門 開発環境 CSS 3 CSS HTML Java Adobe イロハ 仮想化 Tips Solaris PHP Webアプリケーション開発 Google
  • 話題のタグを見る »