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

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

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

　続いて、好きなHTMLエディタを開いて新しいページを作成しよう。リスト1のコードをエディタにコピー＆ペーストし、先ほどダウンロードした画像と同じ場所に保存する。ここでは、h1、p、aといったタグを以下の書式のまま含めなければいけないことに注意して欲しい。これらのタグは、CSSで背景画像の設定を行うときに使用されるからだ。

リスト1

<html>
<head>
<title>CSS Backgrounds</title>
</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>

　ここでは非常によく見かける、背景がグラデーションになっているウェブページの作成方法から説明を始めよう。CSSが登場する以前は、背景画像はHTML文書の壁紙としてX軸方向にもY軸方向にも敷き詰めて表示させるしかなかった。しかし、今や我々はもう少し自由にコントロールを行えるようになっている。それでは、リスト2で強調表示されているコードを入力し、bodyの背景にグラデーションを指定するという新しいCSSルールを作成しよう。

リスト2

<html>
<head>
<title>CSS Backgrounds</title>
<style type=”text/css”>
<!--
body {
      background-image: url(gradient.jpg);
}
-->
</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>
記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
秋もやります！ builder tech day
ユーザーにとっては、UIがすべて
RIAやAjaxによりインターフェイスデザインの幅が広がりました。「正しいデザイン」へのアプローチを、テクノロジーとメソドロジー両方の切り口で、具体的にご紹介するリアルイベントです。
  • 2日前のトップ記事
  • 3日前
  • 4日前
  • 5日前
  • 6日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Mozilla iPod touch Python Google iPhone 3G Flash Webサービス 開発環境 Database SOA Apache 仮想化ソフトウェア Opera プログラミング言語 Firefox Tips Ajax 携帯電話機 Internet Explorer JavaScript CSS ソフトウェア開発 Adobe Apple 入門 HTML 脆弱性 Linux データベース プロジェクト管理 Firefox 3 ブラウザ Safari Off Topic Webデザイン Webアプリケーション開発 iPhone 仮想化 Windows PHP 小技 Java リファレンス モバイル XHTML RIA Mac OS X server XML オープンソース
  • 話題のタグを見る »