CSSでWebページの背景画像を指定する
文:John Lee(TechRepublic) 翻訳校正:原井彰弘
2008-02-07 18:30:00
カスケーディングスタイルシート(CSS)を用いると、背景画像をいろいろな用途でセンスよく活用することが可能になる。CSSを利用すれば、ただ単にページ全体の壁紙として表示するだけでなく、背景画像をCSSのあらゆるルールに割り当てることも可能なのである。本稿では、動的で視覚的に美しいページを作成するためにウェブデザイナが背景画像を活用する方法の中で、もっとも有名なものを3つ紹介しよう。
Compuserveの時代を思い出してみよう。当時、ウェブページの背景画像が与える効果は限定的だった。ブラウザは背景画像をHTML文書全体の背景としてしか表示させることができず、デフォルトでは利用者のブラウザのサイズに合わせて画面上に無限に敷き詰められるように表示されていたのである。この機能は興味深いものであったが、ウェブが「趣味で利用されるよく分からないもの」から企業の情報伝達手段として変化を遂げていく中で、それほど歓迎されるものではなかった。
しかし、CSSが登場したことでそのような日々は遠い過去のものとなってしまったのである。
本稿(原文)は、TechRepublicのダウンロードページからPDFとしても入手可能である。PDFには、例として用いた画像やHTMLのコードも含まれている。
グラデーション
まず始めに、図1の4つの画像をハードディスクにダウンロードして欲しい。
注意:これらの画像は、これから作成を行うウェブページと同じディレクトリに保存するよう注意して欲しい。そうしないと、HTMLを表示しても画像は表示されない。

folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
Why ワークプレース?
-
2020年代を勝ち抜くインフラ
-
ウルトラ帳票文化を乗り越える!
-
新時代にはゼロトラストが不可欠
-
特集:ビジネスを止めるな!
-
明治創業の鉄道企業がAWSに挑戦
-
DX成功の鍵はセキュリティにあり
-
隗より始めよ
-
下した決断は「ハイブリッドへ」
-
働き方改革にモニターが有効なワケ
-
どこまで可能?企業を究極の自動化
-
クラウドバックアップお悩み相談室
-
意識してますか?PCの「信頼性」
-
ビジネス成功の砦はここにあり!
-
働き方、生産性を根底から底上げ!
-
講演レポ:ポスト2020時代の基盤
-
「脱レガシー」なくしてDXはない
-
分析されたデータを活用できるか?
-
特集:ポスト2020時代のCX再考
-
レポート:NWセキュリティの未来
-
Office 365にもFWが必要?
-
サブスクモデルのSaaSで業務改善
-
データ活用を加速するエコシステム
-
ITシステムは永久のβ版思考で
-
実現まで10年「ゼロトラスト」
-
AI活用が激変する新たなインフラ
-
変化への対応はリアルタイム経営で
-
働き方改革は身近な「改善」から
-
攻めと守りのクラウド活用とは!?
-
ビジネスの大きな転換点で勝者に!
-
RPAがニガテなExcelをどう使う
-
レガシーなインフラ設計を見直す